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

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

1. WebSocket简介

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

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

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

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

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

2. Spring Boot实战

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

2.1 服务端

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

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

• 将classpath下的Jar包打包成一个独立的可以运行的Jar包，方便应用的交付和部署；

• 搜索所有的类，将含有main方法的那个类标记为运行入口类；

• 内置了一个依赖解析器，可以自动选择跟当前的Spring Boot版本适配的版本号

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

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

• @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的消息体格式。

• @MessageMapping注解的作用类似于Spring MVC中的@RequestMapping，表示greeting()方法可以处理发往“/hello”的消息；

• greeting()方法的参数是HelloMessage类，消息的内容会被转换成HelloMessage对象，这个方法的内部会先休眠1秒——模拟服务端的处理过程，然后给客户端返回一个消息响应对象（Greeting对象）；

• @SendTo注解表示：消息的响应使用的是广播模式，greeting()方法返回的消息，会发送给所有订阅了“/topic/greetings”的订阅者

2.2 客户端

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

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

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

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

• sendName()方法用来接收用户的输入，并利用STOMP客户端将用户输入的内容发送到服务端——"/app/hello"，相应地，该请求会被服务端的GreetingController.greeting()方法处理。

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

2.3 运行演示

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

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

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

3. 总结

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

4. 参考资料

1. http://www.ruanyifeng.com/blog/2017/05/websocket.html

2. https://www.fullstackpython.com/websockets.html

3. https://spring.io/guides/gs/messaging-stomp-websocket/

4. 《Spring Boot实战》

往期精选

Spring Boot实战之定时任务调度

Spring Boot实战之业务状态机

跟着阿杜拆书：《慢思考》

Mac高效开发之iTerm2、Prezto和Solarized主题

本号专注于后端技术、JVM问题排查和优化、Java面试题、个人成长和自我管理等主题，为读者提供一线开发者的工作和成长经验，期待你能在这里有所收获。