SpringBoot 2.1.0 整合 WebSocket 通信

小灰灰 2022-04-13 08:00 617阅读 0赞

**目录**

Java WebSocket 通信概述

SpringBoot 整合 Tomcat  WebSocket

@ServerEndpoint 指定 websocket 服务终端

创建 ServerEndpointExporter 对象

前端 H5 webSocket 客户端

Spring Boot 整合 Spring WebSocket

WebSocketHandler 消息处理器

HandshakeInterceptor 握手拦截器

WebSocketConfigurer 配置

前端 H5 webSocket 客户端

SockJS 库代替 H5 原生 WebSocket

--------------------

# Java WebSocket 通信概述 #

1、WebSocket 的出现是基于 Web 应用的实时性需要而产生的，在淘宝、京东等网页客服、网页卖家聊天等需求上应用广泛。对于前端网页可以使用 H5 开发 WebSocket 客户端，也可以使用 SockJS 库开发 WebSocket 客户端。

2、对于Java 开发者而言，后台 WebSocket 服务端开发通常有以下常用的选择，本文介绍前两种：

> 1、Tomcat7 以后开始支持 websocket 协议  
> 2、Spring4 以后开始支持 WebSocket  
> 3、Netty3 以后支持开发 WebSocket

3、本文环境：springboot 2.1.0 ，使用内置的 Tomcat 服务器。

# SpringBoot 整合 Tomcat  WebSocket #

1、本章节介绍的是使用 Tomcat 的 API 开发后台 WebSocket 程序（Tomcat7 以后开始支持 websocket 协议）。

**2、pom.xml 文件中导入 Spring boot 的 websocket 启动模块 spring-boot-starter-websocket：**

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

在线演示源码：[https://github.com/wangmaoxiong/red-door/blob/master/pom.xml][https_github.com_wangmaoxiong_red-door_blob_master_pom.xml]

## **@ServerEndpoint 指定 websocket 服务终端** ##

**1**、创建后台 webSocket 服务端类，类上面使用 @ServerEndpoint( javax.websocket.server.ServerEndpoint)注解标识，表示当前类是 webSocket 服务终端，同时在里面实现客户端连接建立、发送消息、接收消息等通信业务。

2、在线演示源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/tomcat/ServerEndpointChat.java][https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_tomcat_ServerEndpointChat.java]

## **创建 ServerEndpointExporter 对象** ##

1、创建 org.springframework.web.socket.server.standard.ServerEndpointExporter 实例交由 Spring 容器管理，这个 bean 会自动注册使用了@ServerEndpoint 注解声明的 Websocket endpoint 。

2、如果使用的是外置的 Tomcat 容器，则不需要自己提供 ServerEndpointExporter，因为它将由 Tomcat 容器自己提供和管理。

3、在线源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/tomcat/WebSocketConfig.java][https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_tomcat_WebSocketConfig.java]

## **前端 H5 webSocket 客户端** ##

在线 html 源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/tomcatChat.html][https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_tomcatChat.html]  
在线 js 源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/tomcatChat.js][https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_tomcatChat.js]

1、为了方便，直接使用 H5 的 webSocket 方式，可以参考《[HTML5 WebSocket][]》。

![20210509134307665.gif][]

# Spring Boot 整合 Spring WebSocket #

## WebSocketHandler 消息处理器 ##

1、WebSocketHandler : WebSocket 消息和生命周期事件的处理根接口, 一共五个方法，可以直接实现此接口，也可以实现它的子接口，或继承它的实现类。

public interface WebSocketHandler {
    	void afterConnectionEstablished(WebSocketSession session) throws Exception;
    	void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception;
    	void handleTransportError(WebSocketSession session, Throwable exception) throws Exception; 
    	void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception; 
    	boolean supportsPartialMessages();
    }

2、在线演示源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/spring/WebSocketChatHandler.java][https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_spring_WebSocketChatHandler.java]

## HandshakeInterceptor 握手拦截器 ##

1、每次用户在浏览器客户端 js 中发起 webSocket 连接后，都会先进入本拦截器，主要作用如下：  
     1）用于权限控制：比如可以控制没有登录的用户或者权限不足的用户无法连接进行操作  
     2）用于标识用户：便于在 webSocket 处理器(WebSocketFacebookHandler)中向指定用户发送消息  
     3）还可以进行其它的类似安全框架的安全监测，日志系统的记录日志等  
2、HandshakeInterceptor 接口中只有两个方法 beforeHandshake(握手前)、afterHandshake(握手后)

3、在线演示源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/spring/WebSocketChatHandler.java][https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_spring_WebSocketChatHandler.java]

## WebSocketConfigurer 配置 ##

1、Spring WebSocket 配置类 - 用于绑定 WebSocketHandler 处理器 与 HandshakeInterceptor 拦截器

2、在线演示源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/spring/WebSocketChatConfig.java][https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_spring_WebSocketChatConfig.java]

## **前端 H5 webSocket 客户端** ##

html 页面：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChat.html][https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChat.html]  
js 文件：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChat.js][https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChat.js]

![20210509152228891.gif][]

# SockJS 库代替 [H5 原生 WebSocket][H5 _ WebSocket] #

1、SockJS 是一个浏览器 JavaScript 库，提供了一个一致的、跨浏览器的 Javascript API，在浏览器和 web 服务器之间创建了一个低延迟、全双工、跨域的通信通道。

2、SockJS 首先尝试使用本地 WebSockets，如果失败了，它可以使用各种特定于浏览器的传输协议，比如流，轮询等，并通过类似 WebSocket 的抽象来呈现它们。

3、SockJS 适用于所有现代浏览器和不支持 WebSocket 协议的环境，例如，在限制性的公司代理之后。

4、虽然现在主流的浏览器都支持 WebSocket，但是某些低版本的浏览器无法支持，而 SockJS 就可以解决这个问题，如果浏览器不支持，则它底层会使用其它的方式来进行替代，而使用的 API 都不变。

<table> 
 <thead> 
  <tr> 
   <th><em>Browser</em></th> 
   <th><em>Websockets</em></th> 
   <th><em>Streaming（流）</em></th> 
   <th><em>Polling（轮询）</em></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>IE 6, 7</td> 
   <td>no</td> 
   <td>no</td> 
   <td>jsonp-polling</td> 
  </tr> 
  <tr> 
   <td>IE 8, 9 (cookies=no)</td> 
   <td>no</td> 
   <td>xdr-streaming †</td> 
   <td>xdr-polling †</td> 
  </tr> 
  <tr> 
   <td>IE 8, 9 (cookies=yes)</td> 
   <td>no</td> 
   <td>iframe-htmlfile</td> 
   <td>iframe-xhr-polling</td> 
  </tr> 
  <tr> 
   <td>IE 10</td> 
   <td>rfc6455</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Chrome 6-13</td> 
   <td>hixie-76</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Chrome 14+</td> 
   <td>hybi-10 / rfc6455</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Firefox &lt;10</td> 
   <td>no ‡</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Firefox 10+</td> 
   <td>hybi-10 / rfc6455</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Safari 5.x</td> 
   <td>hixie-76</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Safari 6+</td> 
   <td>rfc6455</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Opera 10.70+</td> 
   <td>no ‡</td> 
   <td>iframe-eventsource</td> 
   <td>iframe-xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Opera 12.10+</td> 
   <td>rfc6455</td> 
   <td>xhr-streaming</td> 
   <td>xhr-polling</td> 
  </tr> 
  <tr> 
   <td>Konqueror</td> 
   <td>no</td> 
   <td>no</td> 
   <td>jsonp-polling</td> 
  </tr> 
 </tbody> 
</table>

5、SockJS 模仿 WebSockets API，首先，需要加载 sockjs javascript 库：

> sockjs 开源地址：[https://gitee.com/mirrors/sockjs][https_gitee.com_mirrors_sockjs]  
> sockjs  CDN 地址：[https://www.bootcdn.cn/sockjs-client/ ][https_www.bootcdn.cn_sockjs-client_]

5、加载 SockJS 脚本后，可以与 WebSockets 服务器建立连接，除了创建对象的前缀不同，其它的事件和方法都是一致的。

> var ws = new WebSocket("ws://127.0.0.1:8317/websocket/spring/chat.action");  //原生对象前缀是 ws://  
> var sockjs = new SockJS('http://127.0.0.1:8317/websocket/spring/chatSock.action'); // sockJS 前缀是 http:// 或者 https://

前端演示源码：

[https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChatSock.html][https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChatSock.html]  
[https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChatSock.js][https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChatSock.js]

6、后端也需要开启 SockJS 支持，此时只能使用 Spring WebSocket 的方式，Tomcat WebSocket  暂时没有找到：后端 WebSocketConfigurer 注册的时候需要添加 .withSockJS() 方法，表示 启用 SockJS 回退选项。

后端演示源码：[https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/spring/WebSocketChatSockConfig.java][https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_spring_WebSocketChatSockConfig.java]

[https_github.com_wangmaoxiong_red-door_blob_master_pom.xml]: https://github.com/wangmaoxiong/red-door/blob/master/pom.xml
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_tomcat_ServerEndpointChat.java]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/tomcat/ServerEndpointChat.java
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_tomcat_WebSocketConfig.java]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/tomcat/WebSocketConfig.java
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_tomcatChat.html]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/tomcatChat.html
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_tomcatChat.js]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/tomcatChat.js
[HTML5 WebSocket]: https://blog.csdn.net/wangmx1993328/article/details/83178769
[20210509134307665.gif]: /images/20220413/50b9c4153a9a4eae8d50da85412d8345.png
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_spring_WebSocketChatHandler.java]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/spring/WebSocketChatHandler.java
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_spring_WebSocketChatConfig.java]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/spring/WebSocketChatConfig.java
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChat.html]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChat.html
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChat.js]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChat.js
[20210509152228891.gif]: /images/20220413/396267db92d94a99afe32e07c5613337.png
[H5 _ WebSocket]: https://wangmaoxiong.blog.csdn.net/article/details/83178769
[https_gitee.com_mirrors_sockjs]: https://gitee.com/mirrors/sockjs
[https_www.bootcdn.cn_sockjs-client_]: https://www.bootcdn.cn/sockjs-client/
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChatSock.html]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChatSock.html
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_resources_public_html_springChatSock.js]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/resources/public/html/springChatSock.js
[https_github.com_wangmaoxiong_red-door_blob_master_src_main_java_com_wmx_reddoor_scoket_spring_WebSocketChatSockConfig.java]: https://github.com/wangmaoxiong/red-door/blob/master/src/main/java/com/wmx/reddoor/scoket/spring/WebSocketChatSockConfig.java