第二十章：SpringBoot项目中使用WebSocket配置广播式通信

WebSocket为浏览器和服务端提供了双工异步通信的功能，浏览器可以向服务端发送消息，服务端也可以向浏览器发送消息。WebSocket需要浏览器的支持，目前大多数主流的浏览器都是支持的。

WebSocket是通过socket来实现双工异步通信能力的。但是直接使用WebSocket协议开发程序闲的特别繁琐，一般情况我们使用STOMP来实现交互。

SpringBoot在tomcat7内嵌版本就已经开始支持了WebSocket的支持，配置源码存在于org.springframework.boot.autoconfigure.websocket下，接下来我们来讲解SpringBoot项目如何配置使用WebSocket。

本章目标

SpringBoot项目配置使用WebSocket实现广播式消息。

构建项目

我们使用IntelliJ IDEA工具创建一个SpringBoot项目，并添加Jsp、Web、WebSocket等依赖，如下图1所示：

图1

配置WebSocket

下面我们创建一个WebSocketConfig配置类，添加SpringBoot项目对WebSocket的支持配置，如下图2所示：

图2

如上图2所示，我们通过@EnableWebSocketMessageBroker注解开启使用STOMP协议来传输消息，并且实现了registerStompEndpoints方法添加了对应的STOMP使用SockJS协议。接下来我们配置两个实体用于浏览器与服务器端的通信交互。

浏览器向服务端发送消息实体

我们创建一个简单的WiselyMessage实体，用于浏览器向服务端发送消息参数，如下图3所示：

图3

我们消息实体内仅添加了一个名称，我们一会会在前台界面将name字段的值传输到后台。

服务端向浏览器发送的实体

下面我们再来创建一个服务端广播通知浏览器的实体类型，如下图4所示：

图4

上图4内仅一个消息内容返回到前台。我们通讯实体已经配置完成，下面我们开始编写通讯交互的控制器以及添加配置WebSocket的请求路径。

配置WebSocket控制器

我们添加一个名叫WsController的控制器并添加对应的@MessageMapping注解开启WebSocket的访问地址映射，如下图5所示：

图5

上图5内，当浏览器向服务端发送请求时，通过@MessageMapping映射/welcome这个地址，类似@RequestMapping，当服务端有消息存在时，会对订阅@SendTo中路径的浏览器发送请求。接下来我们添加一个Jsp页面来配置WebSocket的JS使用方式。

配置JSP支持WebSocket

在编写对应的代码之前，我们需要下载三个js文件，分别是：jquery.min.js、sockjs.min.js、stomp.min.js，在本章源码的resources/statis目录下（文章源码在本文最后）。Jsp代码如下图6所示：

图6

我们在Jsp页面加载的时候先执行了一边关闭socket通道的操作，当我们点击《连接》按钮时会调用如下图7所示的Js方法完成开启连接操作：

图7

可以看到我们通过SockJs来注册了endpoine，并且通过客户端开启通过连接，连接成功后调用setConnected方法来修改界面的元素显示隐藏，如下图8所示：

图8

通过注册/topic/getReponse路径来回去服务端向浏览器端的请求数据内容，并且调用showResponse方法显示在页面中，showResponse方法如下图9所示：

图9

下面是断开连接的代码，如下图10所示：

图10

上面我们关于WebSocket的配置已经完成，我们需要访问对应的Jsp来测试，我们先修改application.properties配置文件添加JSP的路径映射，如下图11所示：

图11

点击发送名称到后台的请求方法代码如下图12所示：

图12

可以看到我们发送内容直接到@MessageMapping的路径/welcome下。

映射MVC到Index.jsp

我们创建一个名叫做WebConfig的配置类并继承WebMvcConfigurerAdapter，实现addViewControllers方法添加对应的路径映射配置，如下图13所示：

图13

可以看到我们映射/index地址到/index.jsp也就是到webapp/WEB-INF/jsp/index.jsp，下面我们来启动项目测试效果。

运行测试

我们启动项目后，访问地址：127.0.0.1:8080/index，界面输出内容如下图14所示：

图14

我们现在是断开连接的状态，我们尝试点击连接看下效果，如下图15所示：

图15

可以看到我们成功的开启了WebSocket通道，开启通道后显示了对应的输入内容，我们来尝试输入一个名称点击发送查看界面输出内容如下图16所示：

图16

点击《发送》按钮后等待3秒钟后，界面会输出欢迎的字样，证明我们的WebSocket通道已经成功的接通并且获取到了服务端返回到浏览器的数据，下面我们打开多个浏览器Tab来测试广播式的消息是否可以发送到多个开启WebSocket通道的浏览器中。

测试广播式消息返回

我们先来打开浏览器中的多个Tab如下图17所示：

图17

上图17内的三个浏览器都开启了WebSocket通道，下面我们在其中一个浏览器中输出一个名称并点击《发送》按钮后，挨个浏览器查看效果，如下图18、19、20所示：

图18

图19

图20

可以看到上三个图中，我们的WebSocket服务端通过广播的形式完成了服务端的消息发送到浏览器中。

总结

以上内容就是本章的全部内容，本章主要讲解了SpringBoot项目下如何配置使用WebSocket开启广播式消息发送，在以后的章节中我会添加点对点的形式。

本章源码已经上传到码云：

SpringBoot配套源码地址：https://gitee.com/hengboy/spring-boot-chapter

SpringCloud配套源码地址：https://gitee.com/hengboy/spring-cloud-chapter

SpringBoot相关系列文章请访问：目录：SpringBoot学习目录

QueryDSL相关系列文章请访问：QueryDSL通用查询框架学习目录

SpringDataJPA相关系列文章请访问：目录：SpringDataJPA学习目录

SpringBoot相关文章请访问：目录：SpringBoot学习目录，感谢阅读！