转载

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

本文阅读时间大约8分钟。

1. WebSocket简介

WebSocekt协议诞生于2008年，在2011年成为国际标准，目前所有的浏览器都已经支持WebSocket协议了。WebSocket协议属于服务器推送技术的一种，它最大的特点就是可以实现服务端和客户端的双向通信。

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

WebSocket协议和HTTP协议一样，也是在TCP协议层之上的应用层协议，刚接触WebSocket协议的人通常会有个疑问：都有HTTP这个应用层协议了，为啥还要再搞出一个WebSocket协议？

事实上，HTTP是无状态的，并且只能支持单向通信，即都是浏览器向服务端发送HTTP请求，然后得到一个响应。

在实际应用中，还有另外一种场景：服务端有数据更新的时候，希望客户端能够及时感知到。针对这种场景，在WebSocket出现之前，只能采用长轮询的方案（如下图所示）——客户端通过一个AJAX请求和定时器进行轮询查询；这样的方案在服务端数据变化比较频繁的时候，是比较适合使用的，但是当服务端数据变化不频繁的时候，就会面临一个两难的选择：轮询间隔时间短了，会增加服务端的负担，轮询得时间间隔长了，又不能及时感知到服务端数据的变化。

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

WebSocket协议的出现就是为了解决上面这个两难问题的，可以弥补长轮询方案的不足，使用WebSocket协议的方案的时序图如下图所示，浏览器和服务端之间会建立一个WebSocket连接，基于这个连接客户端可以给服务端发送信息，服务端也可以给客户端发送信息，如果服务端的数据变更不频繁，或者客户端对数据感知的时效性要求不高，就比较适合使用WebSocket这种方案。

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

2. Spring Boot实战

下面我们会使用Spring Boot中的Websocket支持组件，实现一个交互式的Web应用程序，演示下WebSocket协议的工作过程。

2.1 服务端

1. 新建一个Spring Boot工程，在pom中加入下面的依赖：

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

Spring Boot Maven插件提供了很多方便的特性：

将classpath下的Jar包打包成一个独立的可以运行的Jar包，方便应用的交付和部署；
搜索所有的类，将含有main方法的那个类标记为运行入口类；
内置了一个依赖解析器，可以自动选择跟当前的Spring Boot版本适配的版本号

2. 创建请求和响应的消息类，分别是：HelloMessage.java和Greeting.java，代码如下所示：

<img data-ratio="1.6342342342342342" data-s="300,640" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/4AG6tic68AGa9znglv4G0jSuHBlEQDicHJKuVVBDemXqNYiafnZA6lT9ejxtXJZmctG1zDdThEVYerIADiaPy5ztibQ/640?wx_fmt=png" data-type="png" data-w="1110" style="text-align: center;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;" />

3. 接下来增加Spring配置，开启WebSocket和STOMP消息的支持，具体的 WebSocketConfig 代码如下所示：

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

@Configuration 注解表示 WebSocketConfig 是一个Spring配置类；
@EnableWebSocketMessageBroker 注解用来启动Spring的WebSocket消息处理代理；
configureMessageBroker() 方法用来配置消息代理的一些特性，通过调用 enableSiampleBroker() 方法，启动一个基于内存的消息代理，该消息代理会将打招呼的消息广播给那些订阅了“/topic”卡头的客户端；
setApplicationDestinationPrefixes() 方法用来跟 @MessageMapping 注解一起起作用，这个注解指定的是服务端接口的前缀，整体下来， greeting() 方法对应的请求路径是"/app/hello"。
registerStompEndpoints() 方法用来注册"/gs-guide-websocket"端点，使得SockJS客户端在不支持WebSocket协议的时候，可以选择其他的传输协议连接服务端，例如：xhr-streaming、xhr-polling等等。

4. 创建基于ws协议的消息处理Controller类，在Spring中，我们计划使用STOMP协议来演示ws协议的应用，STOMP协议并不是为websocket设计的，它属于消息队列的一种协议，和AMQP、 JMS是一个层面的东西，只不过由于它的简单性恰巧可以用于定义websocket的消息体格式。

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

@MessageMapping 注解的作用类似于Spring MVC中的 @RequestMapping ，表示 greeting() 方法可以处理发往“/hello”的消息；
greeting() 方法的参数是HelloMessage类，消息的内容会被转换成HelloMessage对象，这个方法的内部会先休眠1秒——模拟服务端的处理过程，然后给客户端返回一个消息响应对象（Greeting对象）；
@SendTo 注解表示：消息的响应使用的是广播模式， greeting() 方法返回的消息，会发送给所有订阅了“/topic/greetings”的订阅者

2.2 客户端

前面准备好了服务端代码，接下来我们需要开发一个JS客户端，用来跟服务端进行双向通信。

1. 创建客户端界面，这里非常简单，就一个index.html文件，在这个文件的开头，引入了 SOCKJS 和 STOMP 两个JS库，用来跟服务端进行通信。

<img data-ratio="1.14921875" data-s="300,640" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/4AG6tic68AGa9znglv4G0jSuHBlEQDicHJ52aeCicBQ1icOmWWCmD6dNCmqvvaesgf64icPOypiatJsOO7OwPJa9c5sQ/640?wx_fmt=png" data-type="png" data-w="1280" style="text-align: center;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;" />

2. 编写客户端逻辑，创建一个JS文件——app.js，代码如下所示，其中最需要关注的是 connect() 方法和 sendName() 方法。

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

connect() 方法利用 SOCKJS 和 stomp.js 访问服务端的"/gs-guide-websocket"端点来建立连接，如果建连成功，客户单就会订阅主题“/topic/greetings”——服务端会将返回的消息广播发送到该主题；如果该主题收到了消息，那么客户端会调用 showGreeting() 方法，在浏览器上渲染出它收到的消息内容；
sendName() 方法用来接收用户的输入，并利用STOMP客户端将用户输入的内容发送到服务端——"/app/hello"，相应地，该请求会被服务端的 GreetingController.greeting() 方法处理。

最后，前后端的代码架构如下图所示

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

2.3 运行演示

1. 通过 WebsocketdemoApplication.main() 启动应用程序，启动过程如下：

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

2. 打开两个浏览器页面，都访问 localhost:8080 ，分别点击Connect按钮，将这两个客户端都跟服务端建立连接，如下图所示：

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

3. 在任意一个客户端中发送消息，延迟一会，可以看到两个客户端页面都看到了服务端返回的消息——这就是前文说的广播模式。

Spring Boot 实战之基于 WebSocket 协议构建交互式 Web 应用

3. 总结

本文首先介绍了WebSocket的定义，然后比较了HTTP协议和WebSocket协议的异同点，并且针对实际应用中的服务端-客户端数据同步的场景进行了不同方案的分析和讨论，分别讨论了长轮询方案和基于WebSocket协议的方案的优劣点；最后利用Spring Boot提供的组件，实现了一个简单的交互应用，用来展示WebSocket协议的实际应用和效果。