背景
项目中需要做一个消息提示功能，当有用户处理相关待办信息后，别的用户需要实时更新处理后的待办信息。
解决方案：
1、使用最原始的方法，写个定时器去查询待办信息。但这种方式在大多数情况是不被允许的，它会浪费系统中的许多资源，同时也并不是完全意义上的实时更新。
2、使用WebSocket通信技术去实现一个实时更新，它可以实现广播和私信的模式。当一个用户与WebSocket服务建立连接后，用户可以给它发送一个消息，此时WebSocket服务会接收到这个消息并做出回信（此时可以回信给所有与其建立连接的用户——广播，也可以回信给指定用户——私信）。接下来将从前后端去讲解WebSocket的使用。
一、WebSocket服务的搭建（SpringBoot后端）
SpringBoot自带的WebSocket有以下5个注解需要注意：
@ServerEndpoint
暴露出的ws应用的路径，支持RESTful风格传参，类似/websocket/{username}
@OnOpen
与当前客户端连接成功，有入参Session对象（当前连接对象），同时可以利用@PathParam()获取上述应用路径中传递的参数，比如@PathParam(“username”) String username。
@OnClose
与当前客户端连接失败，有入参Session对象（当前连接对象），同时也可以利用@PathParam()获取上述应用路径中传递的参数。
@OnError
与当前客户端连接异常，有入参Session对象（当前连接对象）、Throwable对象（异常对象），同时也可以利用@PathParam()获取上述应用路径中传递的参数。
@OnMessage
当前客户端发送消息，有入参Session对象（当前连接对象）、String message对象（当前客户端传递过来的字符串消息）
1、引入所需依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2、使用自定义类开启WebSocket
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @program: webSocketTest
* @description: WebSocket相关配置
* @author: 黄珺瑜
* @create: 2022-06-30 16:24
**/
@Configuration
@EnableWebSocket
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
3、配置WebSocket服务
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
/**
* @program: webSocketTest
* @description: WebSocket服务
* @author: 黄珺瑜
* @create: 2022-06-30 16:25
**/
@Component
@Slf4j
@ServerEndpoint("/websocket") //暴露的ws应用的路径
public class WebSocket {
// 用来存储服务连接对象
private static Map<String ,Session> clientMap = new ConcurrentHashMap<>();
/**
* 客户端与服务端连接成功
* @param session
*/
@OnOpen
public void onOpen(Session session){
/*
do something for onOpen
与当前客户端连接成功时
*/
clientMap.put(session.getId(),session);
}
/**
* 客户端与服务端连接关闭
* @param session
*/
@OnClose
public void onClose(Session session){
/*
do something for onClose
与当前客户端连接关闭时
*/
clientMap.remove(session.getId());
}
/**
* 客户端与服务端连接异常
* @param error
* @param session
*/
@OnError
public void onError(Throwable error,Session session) {
error.printStackTrace();
}
/**
* 客户端向服务端发送消息
* @param message
* @throws IOException
*/
@OnMessage
public void onMsg(Session session,String message) throws IOException {
/*
do something for onMessage
收到来自当前客户端的消息时
*/
sendAllMessage(message);
}
//向所有客户端发送消息（广播）
private void sendAllMessage(String message){
Set<String> sessionIdSet = clientMap.keySet(); //获得Map的Key的集合
// 此处相当于一个广播操作
for (String sessionId : sessionIdSet) { //迭代Key集合
Session session = clientMap.get(sessionId); //根据Key得到value
session.getAsyncRemote().sendText(message); //发送消息给客户端
}
}
}
二、与WebSocket服务建立连接（Vue前端）
WebSocket是js自带的一个对象，所以此处不需要任何引入第三方依赖包的操作。
WebSocket对象讲解：
创建WebSocket对象
const ws = new WebSocket('ws://127.0.0.1:8088/websocket') // WebSocket服务的建立需要使用ws协议或者wss协议onopen事件监听
// 建立连接后的回调函数 openCallback(e){ console.log('与服务端连接打开->',e) }onerror事件监听
// 连接异常后的回调函数 errorCallback(e){ console.log('与服务端连接打开->',e) }onclose事件监听
// 关闭连接的回调函数 closeCallback(e){ console.log('与服务端连接打开->',e) }onmessage事件监听
// 接收到服务端的回信后的回调函数 messageCallback(e){ console.log('与服务端连接打开->',e) }
1、包装后的webSocket.js
/**
* 参数说明：
* webSocketURL：String webSocket服务地址 eg: ws://127.0.0.1:8088/websocket (后端接口若为restful风格可以带参数)
* callback：为带一个参数的回调函数
* message：String 要传递的参数值（不是一个必要的参数）
*/
export default{
// 初始化webSocket
webSocketInit(webSocketURL){ // ws://127.0.0.1:8088/websocket
this.webSocket = new WebSocket(webSocketURL);
this.webSocket.onopen = this.onOpenwellback;
this.webSocket.onmessage = this.onMessageCallback;
this.webSocket.onerror = this.onErrorCallback;
this.webSocket.onclose = this.onCloseCallback;
},
// 自定义回调函数
setOpenCallback(callback){ // 与服务端连接打开回调函数
this.webSocket.onopen = callback;
},
setMessageCallback(callback){ // 与服务端发送消息回调函数
this.webSocket.onmessage = callback;
},
setErrorCallback(callback){ // 与服务端连接异常回调函数
this.webSocket.onerror = callback;
},
setCloseCallback(callback){ // 与服务端连接关闭回调函数
this.webSocket.onclose = callback;
},
close(){ // 关闭连接
this.webSocket.close();
},
sendMessage(message){ // 发送消息函数
this.webSocket.send(message);
},
}
2、Vue中WebSocket对象的使用
<template>
<el-button type="primary" @click="sendMessage">发送消息</el-button>
</template>
<script>
import webSocket from '@/api/evgis/webSocket'
export default {
name:"WebSocketTest",
data(){
return{
webSocketObject: null,
}
},
created() {
// webSocket.webSocketInit(process.env.VUE_APP_BASE_API.replace("http","ws")+"/evgis/todoStatus")
webSocket.webSocketInit('ws://127.0.0.1:8088/websocket') //初始化webSocket
// 按需进行绑定回调函数
webSocket.setOpenCallback(res=>{
console.log("连接建立成功",res);
})
webSocket.setMessageCallback(res=>{
// 在此处进行数据刷新操作即可实现数据发生改变时实时更新数据
console.log("接收到回信",res);
})
webSocket.setErrorCallback(res=>{
console.log("连接异常",res);
})
webSocket.setCloseCallback(res=>{
console.log("连接关闭",res);
})
},
methods:{
sendMessage(){
// 数据发生改变时给WebSocket发送消息，让其进行广播操作
webSocket.sendMessage();
}
}
}
</script>
<style>
</style>
三、实践时遇到困难
1、由于使用的时若依框架，配置好WebSocket服务后需要开放出ws的服务地址，否则会提示未带token，WebSocket连接不上。
2、在配置WebSocket服务时，没有在关闭连接方法中移除连接对象。导致建立WebSocket连接后一发送消息就断开连接。
参考文章：前后端使用利用WebSocket进行通信、服务器推送消息到前端实现页面数据实时刷新-分布式Websocket技术方案