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

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

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

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

免费专题文章汇总

恒宇少年在博客整理出来了SpringBoot、ApiBoot、SpringCloud的文章汇总【SpringBoot基础教程专题】,【SpringCloud基础教程专题】,【ApiBoot组件使用专题

本章目标

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学习目录,感谢阅读!

欢迎微信扫码加入知识星球,恒宇少年带你走以后的技术道路!!!

知识星球 - 恒宇少年

推荐阅读更多精彩内容