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

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

知识星球 - 恒宇少年

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容