websocket实时通讯(vue3)

 在线websocket测试-在线工具-postjson

测试工具请求地址： ws:/192.168.0.后台IP:端口号/system/socket/用户ID

// 1.建立链接
var ws:any
onMounted( async () => {
  // 获取当前登录用户信息接口(传参所需userId，根据后端要求来定)
  const res = await getUserInfoData()
  console.log('userID', res.user.userId)

  ws = new WebSocket(
    // handBaseURL = 192.168.0.ip:9600' (真实后台接口)
    // res.user.userId (传参: 当前userId)
    // 此地址为后端给的接口：
    `ws:/${handBaseURL}/system/socket/${res.user.userId}`
  );
  ws.onmessage = onMessage
  ws.onopen = onOpen
  ws.onerror = onError
  ws.onclose = onClose
})

// 2. ws.send()给服务器发送信息
let submitCode = JSON.stringify({
  //单独处理给服务器发送消息
});

// onOpen: 确保websocket连接已经建立，并且可以开始进行数据交换，如果未被触发，代表无法进行数据交换;
const onOpen = () => {
  ws.send(submitCode); // 在这里给服务器发送消息(不需要可省略)
} 
// 处理错误事件或提示
const onError = () => {
  console.log('连接错误')
}
// 处理连接关闭事件
const onClose = () => {
  console.log('连接关闭')
}
// 处理卸载前, 关闭链接
onUnmounted(() => {
  ws.close();
  window.localStorage.removeItem('socketKey'); //清除缓存
});

// 3.服务器每次返回信息都会执行一次onMessage方法
let socketResNum:any = localStorage.getItem('socketKey') //定义变量存储到本地
const onMessage= (e:any) => {
  const res = JSON.parse(e.data)
  console.log("WebSocket服务器返回的数据: ", res);

  // 拿到后台返回数据后根据需求进行操作即可
  socketResNum++ //实时记录未读消息数量 (不需要存储可忽略)
  // 存储到本地缓存
  localStorage.setItem('socketKey', JSON.stringify(socketResNum));
  // 实时更改未读消息数量(根据业务所需)
  (document.getElementById('numId') as HTMLElement).textContent = localStorage.getItem('socketKey');
};