第二十章: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 条评论
登录 后参与评论

相关文章

来自专栏吴小龙同學

博客:固定位置增加二维码

如果您也是用 hexo 搭建的个人博客,不妨一试。 博客主题选择 目前我的个人博客是基于GitHub Pages,用hexo搭建的,详细教程:《手把手教你...

3287
来自专栏

短信任务源程序分享[.NET CF C#]

ShortMessageTask 短信任务v1.4 使用vs.net 2005 beta2写的,使用outlook.dll读取联系人,二进制文件保存信息 ...

624
来自专栏张戈的专栏

WP Super Cache静态缓存插件纯代码版(兼容多域名网站)

中午,小熊发来一篇来自歧路亡羊博客的精彩教程:《wordpress 利用代码来实现缓存》。粗略看了一下,发现这个代码在几个月之前我就用过,不过由于此代码无法区分...

3957
来自专栏祥子的故事

工具篇 | 获取邮箱的登陆授权码

2745
来自专栏hbbliyong

使用Visual Studio 调试断点不起作用的问题解决办法 调试Revit CAD 不能进入断点

随着Visual Studio 2010正式版的发布,相信不少人都像我一样升级到了Visual Studio 2010。那么您在使用VS2010在AutoCAD...

35112
来自专栏IT技术精选文摘

使用NGINX和NGINX Plus速率限速

NGINX最有用但经常被误解和配置错误的特征之一就是速率限制。 它允许您限制用户在给定时间段内可以执行的HTTP请求数量。 速率限制可以用于安全目的,例如减慢...

2479
来自专栏开源项目

Git 项目推荐 | 基于go+protobuff 实现的分布式

eQ ? 基于go+protobuff实现的多种持久化方案的mq框架 Client For KiteQ Go: https://github.com/b...

42114
来自专栏区块链入门

第8课 如何使用开发环境命令行注册EOS靓号?

【本文目标】 通过本文学习,程序员可以在EOS本地环境完成主网心意的12位EOS账号注册。 不愿意折腾的其他人员可参考文档《第2课 不懂技术,如何抢注热门E...

902
来自专栏后端技术探索

Restful风格的HTTP Basic Athorization基本认证API接口

话说什么是基本认证? 在HTTP协议进行通信的过程中,HTTP协议定义了基本认证过程以允许HTTP服务器对WEB浏览器进行用户身份证的方法,当一个...

852
来自专栏小尘哥的专栏

springboot中使用tk.mybatis代码生成器

tk.mybatis是对mybatis的进一步封装,它对基本的单表的增删改查又做了进一步封装,springboot中的使用之前已经写过了,如果没用过,请参考我之...

982

扫码关注云+社区