在Spring Boot框架下使用WebSocket实现消息推送
Spring Boot的学习持续进行中。前面两篇博客我们介绍了如何使用Spring Boot容器搭建Web项目(使用Spring Boot开发Web项目)以及怎样为我们的Project添加HTTPS的支持(使用Spring Boot开发Web项目(二)之添加HTTPS支持)，在这两篇文章的基础上，我们今天来看看如何在Spring Boot中使用WebSocket。
什么是WebSocket
WebSocket为浏览器和服务器之间提供了双工异步通信功能，也就是说我们可以利用浏览器给服务器发送消息，服务器也可以给浏览器发送消息，目前主流浏览器的主流版本对WebSocket的支持都算是比较好的，但是在实际开发中使用WebSocket工作量会略大，而且增加了浏览器的兼容问题，这种时候我们更多的是使用WebSocket的一个子协议stomp，利用它来快速实现我们的功能。OK，关于WebSocket我这里就不再多说，我们主要看如何使用，如果小伙伴们有兴趣可以查看这个回答来了解更多关于WebSocket的信息WebSocket 是什么原理？为什么可以实现持久连接。
Project创建
使用WebSocket需要我们先创建一个Project，这个Project的创建方式和我们前文(初识Spring Boot框架)说的一样，不同的是在选择依赖的时候选择Thymeleaf和WebSocket依赖，如下图：
配置WebSocket
Project创建成功之后，我们先来配置WebSocket，创建如下类：
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
}
}关于这个类我说如下几点：
1.@EnableWebSocketMessageBroker注解表示开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思。
2.registerStompEndpoints方法表示注册STOMP协议的节点，并指定映射的URL。
3.stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();这一行代码用来注册STOMP协议节点，同时指定使用SockJS协议。
4.configureMessageBroker方法用来配置消息代理，由于我们是实现推送功能，这里的消息代理是/topic
创建浏览器发送消息的接收类
浏览器发送来的消息用这个类来接收：
public class RequestMessage {
private String name;
public String getName() {
return name;
}
}创建响应消息类
服务器返回给浏览器的消息由这个类来承载：
public class ResponseMessage {
private String responseMessage;
public ResponseMessage(String responseMessage) {
this.responseMessage = responseMessage;
}
public String getResponseMessage() {
return responseMessage;
}
}创建控制器
@Controller
public class WsController {
@MessageMapping("/welcome")
@SendTo("/topic/getResponse")
public ResponseMessage say(RequestMessage message) {
System.out.println(message.getName());
return new ResponseMessage("welcome," + message.getName() + " !");
}
}关于这个控制器，首先@Controller注解不必多言，say方法上添加的@MessageMapping注解和我们之前使用的@RequestMapping类似。@SendTo注解表示当服务器有消息需要推送的时候，会对订阅了@SendTo中路径的浏览器发送消息。
添加脚本
我们这个案例需要三个js脚本文件，分别是STOMP协议的客户端脚本stomp.js、SockJS的客户端脚本sock.js以及jQuery，这三个js文件拷贝到src/main/resources/static/js目录下。OK，这三个js文件我已经为小伙伴们准备好了，可以直接在文末下载案例，案例中有，也可以自行下载这三个js文件。
演示页面
在写这个HTML页面之前，我想先说我们要实现的效果是什么样子的。当我的Project启动之后，在浏览器访问消息发送页面，在该页面发送一条消息，当服务端收到这条消息之后给所有的连接上了服务器的浏览器都发送一条消息。OK，我们在src/main/resources/templates目录下新建一个ws.html页面，内容如下：
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>广播式WebSocket</title>
<script th:src="@{js/sockjs.min.js}"></script>
<script th:src="@{js/stomp.js}"></script>
<script th:src="@{js/jquery-3.1.1.js}"></script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
<div>
<div>
<button id="connect" onclick="connect();">连接</button>
<button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
</div>
<div id="conversationDiv">
<label>输入你的名字</label><input type="text" id="name"/>
<button id="sendName" onclick="sendName();">发送</button>
<p id="response"></p>
</div>
</div>
<script type="text/javascript">
var stompClient = null;
function setConnected(connected) {
document.getElementById("connect").disabled = connected;
document.getElementById("disconnect").disabled = !connected;
document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
// $("#connect").disabled = connected;
// $("#disconnect").disabled = !connected;
$("#response").html();
}
function connect() {
var socket = new SockJS('/endpointSang');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
setConnected(true);
console.log('Connected:' + frame);
stompClient.subscribe('/topic/getResponse', function (response) {
showResponse(JSON.parse(response.body).responseMessage);
})
});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log('Disconnected');
}
function sendName() {
var name = $('#name').val();
console.log('name:' + name);
stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
}
function showResponse(message) {
$("#response").html(message);
}
</script>
</body>
</html>这里虽然代码略多，但是仔细分析一下却也很简单。首先js文件引入的那一部分我就不再多说，这里如果又不理解的可以参考使用Spring Boot开发Web项目。然后我们的页面上先有两个按钮，一个是连接，一个是断开连接，两个按钮分别对应不同的点击事件，在这两个按钮下方有一个输入框，就是我们要发送的内容，然后还有一个发送按钮，发送按钮对应了一个发送消息的点击事件。这是整个页面的元素，很简单，我们这里重点来看一下js逻辑代码。connect方法是当我点击连接按钮的时候执行的，var socket = new SockJS('/endpointSang');表示连接的SockJS的endpoint名称为/endpointSang，stompClient = Stomp.over(socket);表示使用STOMP来创建WebSocket客户端。然后调用stompClient中的connect方法来连接服务端，连接成功之后调用setConnected方法，该隐藏的隐藏，该显示的显示。然后再通过调用stompClient中的subscribe方法来订阅/topic/getResponse发送来的消息，也就是我们在Controller中的say方法上添加的@SendTo注解的参数。stompClient中的send方法表示发送一条消息到服务端，其他的都是常规的js用法我就不再赘述。
配置viewController
接下来就是要为ws.html提供路径映射：
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/ws").setViewName("/ws");
}
}OK，做完这一切之后我们就可以运行项目了，我同时打开多个浏览器，然后在其中一个上发送消息，我们来看看结果：
我在最上面的浏览器上发送消息，其他两个浏览器都能收到我的消息。
OK ，以上就是我们在Spring Boot框架下使用WebSocket实现消息推送的全过程。
本案例下载地址：
本案例GitHub地址
以上。
参考资料：
《JavaEE开发的颠覆者 Spring Boot实战》第七章
在Spring Boot框架下使用WebSocket实现消息推送的更多相关文章
- 在Spring Boot框架下使用WebSocket实现聊天功能
上一篇博客我们介绍了在Spring Boot框架下使用WebSocket实现消息推送,消息推送是一对多,服务器发消息发送给所有的浏览器,这次我们来看看如何使用WebSocket实现消息的一对一发送,模 ...
- Spring Boot 框架下使用MyBatis访问数据库之基于XML配置的方式
MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML ...
- WebSocket与消息推送
B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不需要与客户端长时间建立一个通信链 ...
- HTML5 学习总结（五）——WebSocket与消息推送
B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不需要与客户端长时间建立一个通信链 ...
- HTML5 学习笔记（五）——WebSocket与消息推送
B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不需要与客户端长时间建立一个通信链 ...
- 实现websocket 主动消息推送，用laravel+Swoole
近来有个需求:想实现一个可以主动触发消息推送的功能,这个可以实现向模板消息那个,给予所有成员发送自定义消息,而不需要通过客户端发送消息,服务端上message中监听传送的消息进行做相对于的业务逻辑. ...
- 使用websocket进行消息推送服务
Websocket主要做消息推送,简单,轻巧,比comet好用 入门了解:https://www.cnblogs.com/xdp-gacl/p/5193279.html /** * A Web Soc ...
- 【转】SpringMVC整合websocket实现消息推送及触发
1.创建websocket握手协议的后台 (1)HandShake的实现类 /** *Project Name: price *File Name: HandShake.java *Packag ...
- WebSocket 学习教程（二）：Spring websocket实现消息推送
=============================================== 环境介绍: Jdk 1.7 (1.6不支持) Tomcat7.0.52 (支持Websocket协议) ...
随机推荐
- axios介绍与使用说明 axios中文文档
本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node ...
- hash详解
首先介绍一下hash? 事实上是一种叫做蛤丝的病毒 hash的做法: 首先设一个进制数base,并设一个模数mod 而哈希其实就是把一个数转化为一个值,这个值是base进制的,储存在哈希表中,注意一下 ...
- winform中的数据绑定
1. 简单的数据绑定 例1 using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[& ...
- java--- 使用interrupte中断线程的真正用途
Java线程之中,一个线程的生命周期分为:初始.就绪.运行.阻塞以及结束.当然,其中也可以有四种状态,初始.就绪.运行以及结束. 一般而言,可能有三种原因引起阻塞:等待阻塞.同步阻塞以及其他阻塞(睡眠 ...
- xcode8的那些坑儿
前几天手又贱,更新了xcode8....被几个坑玩坏了.最起码,字体改了,我现在还没有适应.下面列举了这两天遇到的问题 1.关于相册,照相,通讯录,麦克风的权限问题 xcode8打完包安装后,你会发现 ...
- PHPCMS V9 任意文件下载(Windows)
先来看看PHPCMS V9.6.0的任意下载 还是和上次的注入一样,是个由parse_str() 函数引发的变量覆盖. 位于 /phpv9.6.0/phpcms/modules/content/dow ...
- [Codeforces 946G]Almost Increasing Array
Description 题库链接 给你一个长度为 \(n\) 的序列 \(A\) .现在准许你删除任意一个数,删除之后需要修改最小的次数使序列单调递增.问最小次数. \(1\leq n\leq 200 ...
- [HNOI 2009]最小圈
Description 考虑带权的有向图$G=(V,E)$以及$w:E\rightarrow R$,每条边$e=(i,j)(i\neq j,i\in V,j\in V)$的权值定义为$w_{i,j}$ ...
- [USACO07NOV]牛继电器Cow Relays
题目描述 给出一张无向连通图,求S到E经过k条边的最短路. 输入输出样例 输入样例#1: 2 6 6 4 11 4 6 4 4 8 8 4 9 6 6 8 2 6 9 3 8 9 输出样例#1: 10 ...
- 【网络流】【BZOJ1061】【NOI2008】志愿者招募
原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1061 题意:问你如何购买志愿者使得满足题意的总费用最小. 解题思路:首先,由于志愿者存在的 ...