WebSocket 在 SpringBoot 中的使用
介绍
WebSocket 是 HTML5 开始提供的一种在单个 TCP 链接上进行全双工通信的协议。javascript
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，容许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只须要完成一次握手，二者之间就直接能够建立持久性的链接，并进行双向数据传输。html
在 WebSocket API 中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。前端
如今，不少网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，而后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器须要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费不少的带宽等资源。java
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，而且可以更实时地进行通信。node
浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求，链接创建之后，客户端和服务器端就能够经过 TCP 链接直接交换数据。web
当你获取 Web Socket 链接后，你能够经过 send() 方法来向服务器发送数据，并经过 onmessage 事件来接收服务器返回的数据。spring
如下 API 用于建立 WebSocket 对象。浏览器
WebSocket协议
WebSocket并非全新的协议，而是利用了HTTP协议来创建链接。咱们来看看WebSocket链接是如何建立的。tomcat
首先，WebSocket链接必须由浏览器发起，由于请求协议是一个标准的HTTP请求，格式以下：安全
GET ws://localhost:3000/ws/chat HTTP/1.1 Host: localhost Upgrade: websocket Connection: Upgrade Origin: http://localhost:3000 Sec-WebSocket-Key: client-random-string Sec-WebSocket-Version: 13
该请求和普通的HTTP请求有几点不一样：
- GET请求的地址不是相似
/path/，而是以ws://开头的地址； - 请求头
Upgrade: websocket和Connection: Upgrade表示这个链接将要被转换为WebSocket链接； Sec-WebSocket-Key是用于标识这个链接，并不是用于加密数据；Sec-WebSocket-Version指定了WebSocket的协议版本。
随后，服务器若是接受该请求，就会返回以下响应：
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: server-random-string
该响应代码101表示本次链接的 HTTP 协议即将被更改，更改后的协议就是Upgrade: websocket指定的WebSocket协议。
版本号和子协议规定了双方能理解的数据格式，以及是否支持压缩等等。若是仅使用WebSocket的API，就不须要关心这些。
如今，一个WebSocket链接就创建成功，浏览器和服务器就能够随时主动发送消息给对方。消息有两种，一种是文本，一种是二进制数据。一般，咱们能够发送JSON格式的文本，这样，在浏览器处理起来就十分容易。
为何 WebSocket 链接能够实现全双工通讯而HTTP链接不行呢？实际上 HTTP 协议是创建在 TCP 协议之上的，TCP 协议自己就实现了全双工通讯，可是 HTTP 协议的请求－应答机制限制了全双工通讯。WebSocket 链接创建之后，其实只是简单规定了一下：接下来，我们通讯就不使用HTTP协议了，直接互相发数据吧。
安全的WebSocket链接机制和HTTPS相似。首先，浏览器用wss://xxx建立WebSocket链接时，会先经过HTTPS建立安全的链接，而后，该 HTTPS 链接升级为 WebSocket 链接，底层通讯走的仍然是安全的 SSL/TLS 协议。
浏览器
很显然，要支持WebSocket通讯，浏览器得支持这个协议，这样才能发出ws://xxx的请求。目前，支持WebSocket的主流浏览器以下：
- Chrome
- Firefox
- IE >= 10
- Sarafi >= 6
- Android >= 4.4
- iOS >= 8
SpringBoot 中 WebSocket 的使用
加入 maven 依赖
SpringBoot 2.0 以后，直接导此包便可：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>1.5.10.RELEASE</version>
</dependency>
WebSocketConfig
开启 websocket 支持，若是是使用独立的 servlet 容器（如tomcat），则不须要注入 ServerEndpointExporter
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* 开启 websocket 支持<br>
* 配置WebSocketEndpointServer
* 若是使用独立的servlet容器，不是使用SpringBoot的内置容器
* 不须要注入ServerEndpointExporter, 它将由容器本身提供和管理
* @author zhangchuanqiang
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
WebSocketServer
websocket 服务器，至关于一个ws协议的 Controller
import lombok.extern.java.Log;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;
/**
* @Description: WebSocketServer
* @Author: zcq
* @Date: 2019-06-14 14:37
*/
@Log
@Component
@ServerEndpoint("/index/{sid}") //该注解表示该类被声明为一个webSocket终端
public class MySocket {
/**
* 初始在线人数
*/
private static AtomicInteger online_num = new AtomicInteger(0);
/**
* 线程安全的socket集合，存储在线用户实例
*/
private static CopyOnWriteArraySet<MySocket> webSocketSet = new CopyOnWriteArraySet<MySocket>();
/**
* 当前会话
*/
private Session session;
/**
* 接收用户id
*/
private String sid = "";
/**
* 链接创建成功调用的方法
*/
@OnOpen
public void onOpen(Session session, @PathParam("sid") String sid) {
this.sid = sid;
this.session = session;
webSocketSet.add(this);
// 在线人数+1
addOnlineCount();
log.info("有连接加入，当前人数为:" + getOnline_num());
sendMessageBasic("有连接加入，当前人数为:" + getOnline_num());
}
/**
* 链接关闭调用的方法
*/
/**
* 链接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this);
subOnlineCount(); //在线数减1
log.info("有一链接关闭！当前在线人数为" + getOnline_num());
}
/**
* 收到客户端消息后调用的方法
*
* @param message
* @param session
* @throws IOException
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
log.info("来自客户端的消息:" + message);
for (MySocket item : webSocketSet) {
item.sendMessageBasic(message);
}
}
/**
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.info("发生错误");
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessageBasic(String message) {
try {
this.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 实现服务器主动推送
*/
public void sendMessageAsync(String message) {
this.session.getAsyncRemote().sendText(message);
}
/**
* 群发自定义消息
*/
public static void sendInfo(String message, @PathParam("sid") String sid) throws IOException {
log.info("推送消息到窗口" + sid + "，推送内容:" + message);
for (MySocket item : webSocketSet) {
//这里能够设定只推送给这个sid的，为null则所有推送
if (sid == null || "all".equals(sid)) {
item.sendMessageBasic(message);
} else if (item.sid.equals(sid)) {
item.sendMessageBasic(message);
}
}
}
public static MySocket getWebSocket(String sid) {
if (webSocketSet == null || webSocketSet.size() <= 0) {
return null;
}
for (MySocket item : webSocketSet) {
if (sid.equals(item.sid)) {
return item;
}
}
return null;
}
public AtomicInteger getOnline_num() {
return MySocket.online_num;
}
public int subOnlineCount() {
return MySocket.online_num.addAndGet(-1);
}
public int addOnlineCount() {
return MySocket.online_num.addAndGet(1);
}
}
推送消息
/**
* @Description: 页面请求
* @Author: zcq
* @Date: 2019-06-14 14:35
*/
@GetMapping("/socket/{cid}")
public ModelAndView socket(@PathVariable String cid) {
ModelAndView mav = new ModelAndView("/index1");
mav.addObject("cid", cid);
return mav;
}
/**
* @Description: 推送数据接口
* @Author: zcq
* @Date: 2019-06-14 14:35
* @param cid 为 all 时，为推送所有
*/
@ResponseBody
@RequestMapping("/socket/push/{cid}")
public Result pushToWeb(@PathVariable String cid, String message) {
try {
MySocket.sendInfo(message, cid);
} catch (IOException e) {
e.printStackTrace();
return Result.error();
}
return Result.success(cid);
}
页面发起 socket 请求
协议是 ws 或者 wss，能够封装了一些 basePath 的路径类，能够replace(“http”,“ws”)来替换协议。
<html>
<head>
<meta charset="utf-8">
<title>My WebSocket</title>
</head>
<body>
Welcome<br/>
<input id="text" type="text"/>
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
// Websocket 使用 ws 或 wss 的统一资源标志符，相似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。
// onlinenum = new WebSocket("ws://localhost:8086/websocket/20");
onlinenum = new WebSocket("http://localhost:8086/websocket/${cid}".replace("http", "ws").replace("https", "ws"));
} else {
alert('Not support websocket')
}
//链接发生错误的回调方法
onlinenum.onerror = function () {
setMessageInnerHTML("error");
};
//链接成功创建的回调方法
onlinenum.onopen = function (event) {
setMessageInnerHTML("open");
}
//接收到消息的回调方法
onlinenum.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//链接关闭的回调方法
onlinenum.onclose = function () {
setMessageInnerHTML("close");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket链接，防止链接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
onlinenum.close();
};
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭链接
function closeWebSocket() {
onlinenum.close();
}
//发送消息
function send() {
const message = document.getElementById('text').value;
onlinenum.send(message);
}
</script>
</html>
问题补充：
- 若是但愿打成WAR包，部署到TOMCAT中。须要使启动类继承：SpringBootServletInitializer，并加入方法：
/**
* 用于支持打包成 WAR，部署到 tomcat 中
*/
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
return builder.sources(AssetApplication.class);
}
- 若是打成WAR包后，在TOMCAT中启动时报错：Multiple Endpoints may not be deployed to the same path 注释掉 WebSocketServer 类上的 @Component 注解。
资料
相关文章
- 1. SpringBoot 使用WebSocket
- 2. springBoot websocket使用
- 3. Websocket在Vue中的使用
- 4. SpringBoot使用Websocket（一）
- 5. 在flask中使用WebSocket
- 6. 在 vue中使用 websocket
- 7. 在Jetty中使用websocket
- 8. 在cocos creator 中使用websocket
- 9. 使用dwebsocket在Django中使用Websocket
- 10. 在springboot中AJAX的使用
- 更多相关文章...
- • 在Spring中使用Redis - Redis教程
- • 在Java程序中使用Redis - Redis教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • C# 中 foreach 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
