1.写在前面
本篇将为您讲解WebScoket技术,我将从WebScoket的诞生背景,本质,特点,实现的角度来为大家一一讲解。由于本人也是一枚编程小白,因此该篇是经过大量的资料融合加上本人的对WebSocket的实际应用,尽可能从初学者的角度将WebSocket技术讲的通俗易懂。
2.诞生背景
在WebSocket诞生之前,网站为了实现推送技术(服务端向客户端发送消息)大多采用的方法就是轮询。什么是轮询? 轮询就是客户端每隔一段时间向服务端发送一次HTTP 请求,然后服务器将处理好的数据返回给客户端。大家可以发现,轮询的本质依然是客户端在调用服务端。
补充:轮询分为短轮询和长轮询,大家可自行查阅二者区别
3.本质
WebScoket的本质是一种协议,他与HTTP协议性质是相同的,只不过他们的特点不同,应用场景也不同。为什么说他是一种协议,大家看以一下下面的两张图便可以明白。
4.特点
经过上面的WebScoket背景与本质部分,我们可以看出WebScoket的其中一个特点是,可以实现服务端主动给客户端下发数据的业务功能,这也是我认为WebScoket的最大特点。
其次WebScoket还有以下特点:
1.较少的控制开销:在连接创建后,服务器和客户端之间交换数据时,用于协议控制的数据包头部相对较小;
2.更强的实时性:由于协议是全双工的,所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应,延迟明显更少;
3.保持连接状态:与 HTTP 不同的是,WebSocket 需要先创建连接,这就使得其成为一种有状态的协议,之后通信时可以省略部分状态信息;
4.更好的二进制支持:WebSocket 定义了二进制帧,相对 HTTP,可以更轻松地处理二进制内容;
5.可以支持扩展:WebSocket 定义了扩展,用户可以扩展协议、实现部分自定义的子协议。
5.实现(Vue + SpringBoot)
1.vue部分
<template>
<button @click="webclick">给后台发送消息</button>
</template>
<script>
export default {
name: "web2",
data() {
return {
ws: null
}
},
created() {
//连接WebSocket服务端,然后初始化监听事件
this.ws = new WebSocket("ws://localhost:8087/websocket/test");
this.initWebSocket();
},
destroyed() {
// 离开路由之后断开websocket连接
this.setOncloseMessage()
},
methods: {
//连接websocket,用于接收后台实时消息推送
initWebSocket() {
// 连接错误
this.ws.onerror = this.setErrorMessage
// 连接成功
this.ws.onopen = this.setOnopenMessage
// 收到消息的回调
this.ws.onmessage = this.setOnmessageMessage
// 连接关闭的回调
this.ws.onclose = this.setOncloseMessage
// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口
window.onbeforeunload = this.onbeforeunload
},
setErrorMessage() {
console.log('WebSocket连接发生错误-状态码:' + this.ws.readyState)
console.log(this.websocket)
},
setOnopenMessage() {
console.log('WebSocket连接成功-状态码:' + this.ws.readyState)
console.log(this.websocket)
},
setOnmessageMessage(event) {
// 根据服务器推送的消息做自己的业务处理
console.log(this.websocket)
console.log('服务端返回:' + event)
const result = JSON.parse(event.data)
console.log(result)
},
setOncloseMessage() {
console.log('WebSocket连接关闭 状态码:' + this.websocket.readyState)
}
}
}
</script>
2.SpringBoot部分
依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
配置类:该类是为了配置ServerEndpointExporter去查找带有@ServerEndPoint注解的服务类。
/**
* WebScoket配置类
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
服务类
@Component
//此注解相当于设置访问URL
@ServerEndpoint("/websocket/{userName}")
public class WebSocket {
private final static Logger log = LoggerFactory.getLogger("websocketLog");
private Session session;
private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();
private static Map<String, List<Session>> sessionPool = new HashMap<String, List<Session>>();
@OnOpen
public void onOpen(Session session, @PathParam(value = "userName") String userName) {
this.session = session;
webSockets.add(this);
if(sessionPool.get(userName) == null) {
List<Session> userList = new ArrayList<Session>();
userList.add(session);
sessionPool.put(userName, userList);
} else {
sessionPool.get(userName).add(session);
}
System.out.println(userName + "【websocket消息】有新的连接,总数为:" + webSockets.size());
}
@OnClose
public void onClose(Session session, @PathParam(value = "userName") String userName) {
webSockets.remove(this);
if(sessionPool.get(userName).size() <= 1) {
sessionPool.remove(userName);
} else {
sessionPool.get(userName).remove(session);
}
System.out.println( "【websocket消息】连接断开,总数为:" + webSockets.size() );
}
@OnMessage
public void onMessage(String message) {
System.out.println("【websocket消息】收到客户端消息:" + message);
}
// 此为广播消息
public void sendAllMessage(String message) {
for (WebSocket webSocket : webSockets) {
try {
webSocket.session.getAsyncRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 此为单点消息
public void sendOneMessage(String userName, String message) {
List<Session> sessionList = sessionPool.get(userName);
if(sessionList != null) {
sessionList.forEach(item -> {
try {
if (item != null) {
item.getAsyncRemote().sendText(message);
}
} catch (Exception e) {
e.printStackTrace();
}
});
}
}
}
其实,WebSocket的实现就是固定的格式,只是会有业务代码的差异,大家真正做过一遍后就很容易理解了。
6.写在最后
该篇文章是在作者本人对WebScoket理解的基础上进行整理,如有问题欢迎大家指出,万分感谢。
=============stay hungry stay foolish=============