概述

应用场景：

• 消息推送，替代 ajax 轮询。
• 在线聊天

WebSocket 是 HTML5 提供的在单个 TCP 链接上进行全双工通讯的协议。

客户端请求

• Connection: upgrade 表示客户端希望升级连接
• Upgrade: websocket 表示希望升级到 websocket 协议

Request URL: ws://127.0.0.1:8080/webSocket/88274.2421418903 Request Method: GET Connection: Upgrade Upgrade: websocket Sec-WebSocket-Version: 13 Sec-WebSocket-Key: Uzqa3dqq8zeBv2Ol4nxOaQ== Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits 

服务端响应

Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: Fl7B8k4erUi8bempzvN91WtKtqk= Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15 

HTML5 中的 WebSocket

WebSocket 的属性

• ws.readyState 当前连接状态
  • 0 连接未建立
  • 1 连接已建立，可以正常通信
  • 2 连接正在关闭
  • 3 连接已关闭或连接不能打开
• ws.bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数

WebSocket 的事件

• ws.onopen 建立连接后的回调函数
• ws.onmessage 收到服务端消息的回调函数
• ws.onerror 通信错误的回调函数
• ws.onclose 连接关闭的回调函数

WebSocket 的方法

• ws.send(data) 发送数据
• ws.close() 关闭连接

使用

// 创建链接 var ws = new WebSocket(url, [protocol] ); // 建立连接后的回调函数 ws.onopen = function (event) { }; // 收到服务端消息的回调函数 ws.onmessage = function (event) { }; // 通信错误的回调函数 ws.onerror = function (event) { }; // 连接关闭的回调函数 ws.onclose = function (event) { } // 发送数据 function send() {     ws.send(JSON.stringify(message)); } // 关闭连接 function closeWebSocket() {     ws.close(); } 

问题 1

Failed to construct ‘WebSocket’: The URL’s scheme must be either ‘ws’ or ‘wss’. ‘localhost’ is not allowed.

url 协议不要忽略 ws 或 wss 分别对应 http 与 https 的区别

在 springboot 中访问静态页面

index.html 文件放置位置 resource/static/index.html

直接访问地址：localhost:8080/index.html

springboot 在 resource 文件夹下有两个默认文件夹

• static 存放静态页面
• templates 存放动态页面，需要配合 thymeleaf 使用

Java 支持 WebSocket

添加 spring-boot-starter-websocket 依赖

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 

定义监听端点,和监听事件(与前端的监听事件相同)

@ServerEndpoint("/webSocket/{sid}") @Component public class WebSocketServer { // 事件 @OnOpen public void onOpen(Session session, @PathParam("sid") String sid) {} @OnMessage public void onMessage(Session session, String message) {} @OnError public void onError(Session session, Throwable error) {} @OnClose public void onClose() {} // 方法 private Session session; // 客户端连接对象 public void fun(){ // 发送消息 this.session.getBasicRemote().sendText(message); // 关闭连接 this.session.close(); } } 

问题 1

index.html:22 WebSocket connection to ‘ws://127.0.0.1:8080/webSocket/10000’ failed: Error during WebSocket handshake: Unexpected response code: 404

在使用 springboot 内置的 Tomcat 容器时，需要注入 ServerEndpointExporter，这个 bean 中的 registerEndpoints() 方法会将 @ServerEndpoint 注解的 bean 添加到 serverContainer 容器中。

ServerEndpointExporter 是由 spring-boot-starter-websocket 提供的，并且这个项目的子项目中包含 starter-web，所以单独做一个 websocket 时只需要依赖 starter-websocket 即可

@Configuration public class WebSocketConfig { /**      * 使用内置 tomcat 需要定义 bean      * 外置则不需要，否则会报错      */ @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } 

如果还是失败，需要检查是否将这个类注册为 bean。需要添加 @Component 注解，@ServerEndpoint 不会生成一个 bean,它是 Tomcat 中的注解，表示服务监听端点的地址。

@ServerEndpoint("/webSocket/{sid}") @Component public class WebSocketServer {} 

因为 ServerEndpointExporter 注册时是从所有 bean 中查找

protected void registerEndpoints() {     String[] endpointBeanNames = context.getBeanNamesForAnnotation(ServerEndpoint.class); } 

问题 2

连接错误 导致 连接断开

在服务端的 onMessage 方法中抛出未捕获异常会触发 onError 事件，然后触发 onClose 事件。最终也会触发客户端的 onClose 事件。

客户端 onMessage 方法中异常不会触发其它监听事件。

案例源码

码云：源码参考传送门

• 实现当前在线人数展示
• 参考 WebController 中的 sendGroup 可以改造为客户端主动消息推送
• 参考 群发消息可以改造为群聊和单独聊
  

参考：

• HTML5 WebSocket
• SpringBoot如何返回页面
• SpringBoot跳转页面详解+thymeleaf
• 用JAVA分别实现WebSocket客户端与服务端