从零搭建开发脚手架 Spring Boot实现WebSocket的多种姿势

川长思鸟来 2022-10-09 15:25 138阅读 0赞

### 文章目录 ###

*   *  简介
     *  Http、Websocket、SockJs、Stomp介绍
     *   *  Http
         *  Websocket
         *  SockJs
         *  Stomp
         *  WebSocket、SockJs、STOMP三者关系
     *  Websocket多种实现方式
     *   *  简单Websocket
         *   *  服务端
             *  客户端
         *  Spring WebSocket
         *   *  服务端
             *  客户端
         *  SockJS
         *   *  服务端
             *  客户端
         *  Stomp
         *   *  服务端
             *  客户端
     *  常见疑问
     *   *  1.JavaScript有原生方法支持发送ping/pong消息吗?
         *  2.SockJS心跳
         *  3.配置WebSocket引擎

## 简介 ##

WebSocket 是Web 浏览器和服务器之间的**双向**、**全双工**、**持久连接**。一旦建立了 WebSocket 连接，该连接将保持打开状态，直到客户端或服务器决定关闭此连接。

一个典型的用例可能是当一个应用程序涉及多个用户相互通信时，比如在聊天中。

## Http、Websocket、SockJs、Stomp介绍 ##

### Http ###

Http超文本传输协议，Http有1.0、1.1、 2.0几个版本，从Http1.1起，默认都开启了Keep-Alive，保持连接持续性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输Http数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接，这样就降低了资源的消耗优化性能，但是Keep-Alive也是有时间限制的，还有一个客户端只能主动发起请求才能获取返回数据，并不能主动接收后台推送的数据，Websocket便应运而生。

### Websocket ###

Websocket是 Html5新增加特性之一，目的是浏览器与服务端建立全双工的通信方式，解决 http 请求-响应带来过多的资源消耗，同时对特殊场景应用提供了全新的实现方式，比如聊天、股票交易、游戏等对实时性要求较高的行业领域。

> http与websocket都是基于TCP(传输控制协议)的，websocket可以看做是对http协议的一个补充。

### SockJs ###

SockJS是一个JavaScript库，为了应对许多浏览器不支持WebSocket协议的问题，设计了备选SockJs。SockJS 是 WebSocket 技术的一种模拟。SockJS会尽可能对应 WebSocket API，但如果WebSocket 技术不可用的话，会自动降为轮询的方式。SockJS会优先选择WebSocket进行连接，但是当服务器或客户端不支持WebSocket时，会自动在 XHR流、XDR流、iFrame事件源、iFrame HTML文件、XHR轮询、XDR轮询、iFrame XHR轮询、JSONP轮询 这几个方案中择优进行连接。

SockJS客户端首先发送`GET /info`以从服务器获取基本信息，在那之后，它必须决定使用哪种传输方式。如果可能的话，使用WebSocket，如果不是，在大多数浏览器中，至少有一个HTTP流媒体选项，如果还不是，则使用HTTP（长）轮询。

所有传输请求都具有以下URL结构：

http://host:port/myApp/myEndpoint/{server-id}/{session-id}/{transport}

*  `{server-id}`用于在集群中路由请求，但不用于其他用途。
 *  `{session-id}`关联属于SockJS会话的HTTP请求。
 *  `{transport}`指示传输类型（例如`websocket`、`xhr-streaming`和其他）。

Github地址：[https://github.com/sockjs][https_github.com_sockjs]

### Stomp ###

`STOMP`是面向流文本的消息传输协议`Streaming Text Oriented Messaging Protocol`，是 `WebSocket` 通信标准的一部分，属于业务层的控制协议`Wire protocol`，[协议规范][Link 1]。在通常的发布订阅语义之上，它通过 `begin`、 `commit`、`rollback` 事物序列以及`ack`确认机制来提供消息可靠的投递。由于协议简单且易于实现，几乎所有的编程语言都有 STOMP 的客户端实现。

STOMP协议，来为浏览器 和 server 间的 通信增加适当的消息语义。

STOMP在WebSocket之上提供了一个基于帧的线路格式层，用来定义消息的语义。

传输协议方面，同时支持`STOMP Over WebSocket`和`STOMP Over SockJS`。

**STOMP帧由命令、一个或多个头信息以及负载所组成**。例如如下就是发送数据的一个STOMP帧：

>>> SEND
    destination:/app/marco
    content-length:20
    
    {"message":"Maeco!"}

### WebSocket、SockJs、STOMP三者关系 ###

简而言之，WebSocket 是底层协议，SockJS 是WebSocket 的备选方案，也是底层协议，而 STOMP 是基于 WebSocket（SockJS）的上层协议。

1、HTTP协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节，假设 HTTP 协议 并不存在，只能使用 TCP 套接字来 编写 web 应用。

2、直接使用 WebSocket（SockJS） 就很类似于 使用 TCP 套接字来编写 web 应用，因为没有高层协议，就需要我们定义应用间所发送消息的语义，还需要确保连接的两端都能遵循这些语义；

3、同HTTP在TCP 套接字上添加请求-响应模型层一样，STOMP在WebSocket 之上提供了一个基于帧的线路格式层，用来定义消息语义；

## Websocket多种实现方式 ##

maven依赖先引入

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

### 简单Websocket ###

与Spring无关，基于tomcat实现

WebSocket 规范支持两种在线数据格式——文本和二进制。API 支持这两种格式，添加了处理规范中定义的 Java 对象和健康检查消息（ping-pong）的功能：

*  Text：任何文本数据（java.lang.String、原语或它们等效的包装类）
 *  Binary：由java.nio.ByteBuffer或byte\[\]（字节数组）表示的二进制数据（例如音频、图像等）
 *  Java 对象：API 可以在您的代码中使用本机（Java 对象）表示，并使用自定义转换器（编码器/解码器）将它们转换为 WebSocket 协议允许的兼容在线格式（文本、二进制）
 *  Ping-Pong：javax.websocket.PongMessage是 WebSocket 对等方响应健康检查 (ping) 请求而发送的确认

#### 服务端 ####

相关注解如下：

*  @ServerEndpoint：如果用@ServerEndpoint 修饰，容器确保类作为WebSocket服务器的可用性，监听特定的 URI 空间
 *  @ClientEndpoint：使用此注解修饰的类被视为WebSocket客户端
 *  @OnOpen：当启动新的WebSocket连接时，容器会调用带有@OnOpen的 Java 方法
 *  @OnMessage：一个Java方法，用@OnMessage注解，当消息发送到端点时从WebSocket容器接收信息
 *  @OnError：当通信出现问题时调用带有@OnError的方法
 *  @OnClose：用于装饰一个 Java 方法，该方法在WebSocket连接关闭时由容器调用

我们通过使用@ServerEndpoint注解来声明一个 Java 类*WebSocket*服务器端点。我们还指定部署端点的 URI。URI 是相对于服务器容器的根定义的，并且必须以正斜杠开头：

**第一步：注入ServerEndpointExporter，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。**

@Configuration
    public class WebSocketEndpointConfig { 
        @Bean
        public ServerEndpointExporter serverEndpointExporter() { 
            return new ServerEndpointExporter();
        }
    }

**第二步：websocket处理类**，注意加`@Component`

@ServerEndpoint(value = "/chat/{username}")
    @Component
    public class ChatEndpoint { 
    
        private Session session;
        private static Set<ChatEndpoint> chatEndpoints = new CopyOnWriteArraySet<>();
        private static HashMap<String, String> users = new HashMap<>();
    
        @OnOpen
        public void onOpen(
                Session session,
                @PathParam("username") String username) throws IOException { 
            this.session = session;
            chatEndpoints.add(this);
            users.put(session.getId(), username);
            String message = username + "Connected!";
            broadcast(message);
        }
    
        @OnMessage
        public void onMessage(Session session, String message)
                throws IOException { 
            broadcast(message);
        }
    
        @OnClose
        public void onClose(Session session) throws IOException { 
    
            chatEndpoints.remove(this);
            broadcast(users.get(session.getId()) + "Disconnected!");
        }
    
        @OnError
        public void onError(Session session, Throwable throwable) { 
            // Do error handling here
        }
    
        private static void broadcast(String message) { 
    
            chatEndpoints.forEach(endpoint -> { 
                synchronized (endpoint) { 
                    try { 
                        endpoint.session.getBasicRemote().sendText(message);
                    } catch (IOException e) { 
                        e.printStackTrace();
                    }
                }
            });
        }
    }

#### 客户端 ####

### Spring WebSocket ###

#### 服务端 ####

**处理类**

public class ChatHandler extends AbstractWebSocketHandler { 
        @Override
        protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { 
            System.out.println("Received message: " + message.getPayload());
            Thread.sleep(2000);
            session.sendMessage(new TextMessage("Polo!"));
        }
        @Override
        public void afterConnectionEstablished(WebSocketSession session) { 
            System.out.println("Connection established!");
        }
        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus status) { 
            System.out.println("Connection closed. Status: " + status);
        }
    }

**配置注册**

@Configuration
    @EnableWebSocket
    public class WebSocketConfig implements WebSocketConfigurer { 
        @Override
        public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { 
            registry.addHandler(chatHandler(), "/chat").setAllowedOrigins("*"); 
        }
        @Bean
        public ChatHandler chatHandler() { 
            return new ChatHandler();
        }
    }

#### 客户端 ####

### SockJS ###

#### 服务端 ####

在上面代码**WebSocketConfig.java上重点开启SockJS支持**`.withSockJS();`

@Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { 
        registry.addHandler(chatHandler(), "/chat").withSockJS();
    }

#### 客户端 ####

> 运行效果一样，但是客户端–服务器之间通信的方式却有了很大的变化。

### Stomp ###

#### 服务端 ####

**配置注册**

@Configuration
    @EnableWebSocketMessageBroker
    public class WebSocketStompConfig extends AbstractWebSocketMessageBrokerConfigurer { 
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) { 
            //为/chatroom路径启用SockJS功能
            registry.addEndpoint("/chatroom").setAllowedOrigins("*").withSockJS();
        }
    
        @Override
        public void configureMessageBroker(MessageBrokerRegistry registry) { 
            //表明在topic、queue、users这三个域上可以向客户端发消息。 服务端-->客户端
            registry.enableSimpleBroker("/topic", "/queue", "/users");
            //客户端向服务端发起请求时，需要以/app为前缀。 客户端-->服务端
            registry.setApplicationDestinationPrefixes("/app");
            //给指定用户发送一对一的消息前缀是/users/。
            registry.setUserDestinationPrefix("/users/");
        }
    }

> WebSocketStompConfig 重载了registerStompEndpoints() 方法，将/chat注册为STOMP端点。
> 
> 这个路径与之前接收和发送消息的目的地路径有所不同。这是一个端点，客户端在订阅或发布消息到目的地前，要连接该端点。
> 
> WebSocketStompConfig还通过重载configureMessageBroker() 方法配置了一个简单的消息代理。这个方法是可选的，如果不重载它的话，将会自动配置一个简单的内存消息代理，用它来处理以“/topic”为前缀的消息。

**处理来自客户端的STOMP消息**

@Controller
    public class WebSocketCharConroller { 
        @Autowired
        SimpMessagingTemplate SimpMessagingTemplate;
        //目的地是“/app/chat”。（“/app”前缀是隐含 的，因为我们将其配置为应用的目的地前缀）
        @MessageMapping("/chat")
        public void handleShout(String msg) { 
            SimpMessagingTemplate.convertAndSend("/topic/test", "测试SimpMessageSendingOperations ");
        }
    
        @SubscribeMapping("/subscribe")
        public String handleSubscribe() { 
            return "i am ok";
        }
    }

> @MessageMapping注解，表明chat（）方法能够处理指定目的地上到达的消息。本例中目的地也就是“/app/chat”。（“/app”前缀是隐含 的，因为我们将其配置为应用的目的地前缀）
> 
> @SubscribeMapping注解，与@MessageMapping注解相似，当收到了STOMP订阅消息的时候，带有@SubscribeMapping注解的方法将会被触发。

#### 客户端 ####

## 常见疑问 ##

### 1.JavaScript有原生方法支持发送ping/pong消息吗? ###

连接WebSocket的时候，发现WebSocket刚连接上没过多久就断开了，为了保持长时间的连接，就想到了ping/pong协议。

浏览器提供了原生的WebSocket构造函数用来创建一个WebSocket实例，该实例只提供了一个send方法，并且该send方法只能用来发送上述协议中Payload Data的内容，浏览器会根据send的参数自动生成一个完整的帧数据。所以，在浏览器端是没法控制除了Payload Data之外的帧内容的，也就是无法自定义opcode。所以，也就**实现不了WebSocket规范定义的ping/pong协议**。

详情参见：

*  [https://stackoverflow.com/questions/10585355/sending-websocket-ping-pong-frame-from-browser][https_stackoverflow.com_questions_10585355_sending-websocket-ping-pong-frame-from-browser]
 *  https://segmentfault.com/a/1190000038816821

### 2.SockJS心跳 ###

SockJS协议要求服务器发送心跳消息，以防止代理断定连接挂起，Spring SockJS配置有一个名为`heartbeatTime`的属性，你可以使用它来定制频率。默认情况下，在25秒后发送心跳，假设在该连接上没有发送其他消息，这个25秒的值符合以下对公共互联网应用程序的[IETF建议][IETF]。

> 在WebSocket和SockJS上使用STOMP时，如果STOMP客户端和服务器协商交换心跳，那么SockJS心跳就被禁用了。

Spring SockJS支持还允许你配置`TaskScheduler`来调度心跳任务，任务调度程序由线程池支持，其默认设置基于可用处理器的数量，你应该考虑根据你的特定需要定制设置。

registry.addHandler(chatHandler(), "/chat").setAllowedOrigins("*").withSockJS().setHeartbeatTime(25000)
    
    其他配置
        .withSockJS()
                .setStreamBytesLimit(512 * 1024) 
                .setHttpMessageCacheSize(1000) 
                .setDisconnectDelay(30 * 1000);

*  将`streamBytesLimit`属性设置为`512KB`（默认为128KB => `128 * 1024`）。
 *  将`httpMessageCacheSize`属性设置为`1000`（默认为`100`）。
 *  将`disconnectDelay`属性设置为30秒（默认为5秒 => `5 * 1000`）。

### 3.配置WebSocket引擎 ###

每个底层 WebSocket 引擎都公开了控制运行时特征的配置属性，例如消息缓冲区大小、空闲超时等。

@Configuration
    @EnableWebSocket
    public class WebSocketConfig implements WebSocketConfigurer { 
        @Bean
        public ServletServerContainerFactoryBean createWebSocketContainer() { 
            ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();
            container.setMaxTextMessageBufferSize(8192);
            container.setMaxBinaryMessageBufferSize(8192);
            return container;
        }
    }

参考：

*  [https://docs.spring.io/spring-framework/docs/4.3.x/spring-framework-reference/html/websocket.html][https_docs.spring.io_spring-framework_docs_4.3.x_spring-framework-reference_html_websocket.html]
 *  https://www.cnblogs.com/goloving/p/14735257.html

[https_github.com_sockjs]: https://github.com/sockjs
[Link 1]: https://stomp.github.io/stomp-specification-1.1.html
[https_stackoverflow.com_questions_10585355_sending-websocket-ping-pong-frame-from-browser]: https://stackoverflow.com/questions/10585355/sending-websocket-ping-pong-frame-from-browser
[IETF]: https://tools.ietf.org/html/rfc6202
[https_docs.spring.io_spring-framework_docs_4.3.x_spring-framework-reference_html_websocket.html]: https://docs.spring.io/spring-framework/docs/4.3.x/spring-framework-reference/html/websocket.html