第二十章: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学习目录,感谢阅读!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴柯的运维笔记

Samba共享常见的集中配置

配置SMB共享 SMB协议是建立在NetBIOS协议之上的应用协议,是基于TCP138、139两个端口的服务,NetBIOS出现之后,Microsoft就使用...

3359
来自专栏听雨堂

fckeditor上传问题的解决

一、上传时报Invalid Request,问题解决在此: fckeditor编辑器上传文件出现invalid Request问题解决! FCKConfig....

1885
来自专栏.NET技术

elasticsearch同步mongodb--mongo connector的使用

mongodb-win32-x86_64-3.4.6-signed.msi  (如果已经安装可以忽略)

1552
来自专栏IMWeb前端团队

让chrome插件在手机上跑起来

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 创建一个chrome的插件,并让这个插件能够作为一个app,运行在终...

1825
来自专栏Flutter入门到实战

老司机带你快速上手调试Flutter项目

在讲解调试工具之前,先来看看有关的设置选项,点击菜单栏File-->Settings-->Languages & Frameworks --> Flutter,...

1592
来自专栏自动化测试实战

RF第二讲--Selenium2Library库的简单实用

3948
来自专栏lonelydawn的前端猿区

初学redis之windows服务配置与启动

初学redis首先要配置好服务, redis在Linux上的安装只要按照官方指导来,很快很简单。 下面来谈谈redis在windows上的安装。 官网虽然没给r...

1965
来自专栏逸鹏说道

Javascript缓存投毒学习与实战

0x00 起因 不久前@三好学生师傅买了一个wooyun wifi,然后聊到了缓存投毒: ? 然后看到wooyun wifi的这个说明: 默认情况下该功能附带缓...

3705
来自专栏抠抠空间

Django项目实战之用户头像上传与访问

1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <meta char...

3727
来自专栏挖掘大数据

远程连接hive server流程详解

hiveserver2 1、在hive服务器上启动hive server2,在你的hive主目录/bin/下找到并执行下面的命令,默认监听10000端口 #hi...

4140

扫码关注云+社区