小铃铛不提示(遗留bug)--author:taoyan 2022-7-13 for: VUEN-1674【严重bug】

[JOSEPH30bit]

版本号：

3.6.3（发布日期：2024-03-11）

问题描述：

websocket前端遗留bug。每次给当前用户发送消息后，界面右上角小铃铛没反应，必须刷新界面小铃铛的消息才加一(新消息才显示)。

---这个前端websocket代码处留了注释：//update-begin-author:taoyan date:2022-7-13 for: VUEN-1674【严重bug】系统通知，为什么必须刷新右上角才提示

小铃铛截图：

请问这个bug修复了吗，应该如何解决？感谢您抽出时间查看，在校大学生，才疏学浅，无法修复这个bug，期待着您的回复！

错误截图：

前端websocket注释了bug的代码位置：

友情提示：

• 未按格式要求发帖、描述过于简单的，会被直接删掉;
• 描述问题请图文并茂，方便我们理解并快速定位问题;
• 如果使用的不是master，请说明你使用的分支;

[zhangdaiscott]

不是必须刷新啊

[JOSEPH30bit]

不是必须刷新啊

给当前登录的用户发消息时，小铃铛没反应，也没新消息提示，右上角数量也没加一，刷新页面小铃铛右上角新消息才加一。
好像是websocket断了？ 我把setTimeout(() => {
loadData();
}, 5000); 改为轮询：setInterval(() => {
loadData();
}, 100);
不用刷新就可以实时显示小铃铛新消息，但没法用轮询，控制台会炸。

[liaozhiyang]

你看下是不是socket断了？
socket断了， 控制台会输出" [WebSocket] 连接断开 "

[liaozhiyang]

已修复，下一版本发布。

经排查可能因为这个写法会有这种情况，你本地按如下更改看是否能解决。

在 src/hooks/web/useWebSocket.ts 文件替换如下代码：

// noinspection JSUnusedGlobalSymbols

import { unref } from 'vue';
import { useWebSocket, WebSocketResult } from '@vueuse/core';
import { getToken } from '/@/utils/auth';

let result: WebSocketResult<any>;
const listeners = new Map();

/**
 * 开启 WebSocket 链接，全局只需执行一次
 * @param url
 */
export function connectWebSocket(url: string) {
  //update-begin-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
  const token = (getToken() || '') as string;
  result = useWebSocket(url, {
    // 自动重连 (遇到错误最多重复连接10次)
    autoReconnect: {
      retries: 10,
      delay: 5000,
    },
    // 心跳检测
    heartbeat: {
      message: 'ping',
      // 如果服务器压力再改回来55秒
      interval: 5000,
    },
    protocols: [token],
    onConnected: function (ws) {
      console.log('[WebSocket] 连接成功', ws);
    },
    onDisconnected: function (ws, event) {
      console.log('[WebSocket] 连接断开：', ws, event);
    },
    onError: function (ws, event) {
      console.log('[WebSocket] 连接发生错误: ', ws, event);
    },
    onMessage: function (_ws, e) {
      console.debug('[WebSocket] -----接收消息-------', e.data);
      try {
        //update-begin---author:wangshuai---date:2024-05-07---for:【issues/1161】前端websocket因心跳导致监听不起作用---
        if (e.data === 'ping') {
          return;
        }
        //update-end---author:wangshuai---date:2024-05-07---for:【issues/1161】前端websocket因心跳导致监听不起作用---
        const data = JSON.parse(e.data);
        for (const callback of listeners.keys()) {
          try {
            callback(data);
          } catch (err) {
            console.error(err);
          }
        }
      } catch (err) {
        console.error('[WebSocket] data解析失败：', err);
      }
    },
  });
  //update-end-author:taoyan date:2022-4-24 for: v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
  // if (result) {
  //   result.open = onOpen;
  //   result.close = onClose;

  //   const ws = unref(result.ws);
  //   if(ws!=null){
  //     ws.onerror = onError;
  //     ws.onmessage = onMessage;
  //     //update-begin---author:wangshuai---date:2024-04-30---for:【issues/1217】发送测试消息后，铃铛数字没有变化---
  //     ws.onopen = onOpen;
  //     ws.onclose = onClose;
  //     //update-end---author:wangshuai---date:2024-04-30---for:【issues/1217】发送测试消息后，铃铛数字没有变化---
  //   }
  // }
}

function onOpen() {
  console.log('[WebSocket] 连接成功');
}

function onClose(e) {
  console.log('[WebSocket] 连接断开：', e);
}

function onError(e) {
  console.log('[WebSocket] 连接发生错误: ', e);
}

function onMessage(e) {
  console.debug('[WebSocket] -----接收消息-------', e.data);
  try {
    //update-begin---author:wangshuai---date:2024-05-07---for:【issues/1161】前端websocket因心跳导致监听不起作用---
    if(e==='ping'){
      return;
    }
    //update-end---author:wangshuai---date:2024-05-07---for:【issues/1161】前端websocket因心跳导致监听不起作用---
    const data = JSON.parse(e.data);
    for (const callback of listeners.keys()) {
      try {
        callback(data);
      } catch (err) {
        console.error(err);
      }
    }
  } catch (err) {
    console.error('[WebSocket] data解析失败：', err);
  }
}


/**
 * 添加 WebSocket 消息监听
 * @param callback
 */
export function onWebSocket(callback: (data: object) => any) {
  if (!listeners.has(callback)) {
    if (typeof callback === 'function') {
      listeners.set(callback, null);
    } else {
      console.debug('[WebSocket] 添加 WebSocket 消息监听失败：传入的参数不是一个方法');
    }
  }
}

/**
 * 解除 WebSocket 消息监听
 *
 * @param callback
 */
export function offWebSocket(callback: (data: object) => any) {
  listeners.delete(callback);
}

export function useMyWebSocket() {
  return result;
}

[JOSEPH30bit]

你看下是不是socket断了？ socket断了， 控制台会输出" [WebSocket] 连接断开 "

您好，连上一会就断了，提示useWebSocket-1961a067.js:1 Uncaught ReferenceError: url is not defined 请问这如何解决