如何实现WebSocket消息拦截？已有AJAX请求拦截实现参考

实现思路和你拦截AJAX的逻辑类似，通过重写浏览器原生WebSocket构造函数注入监听逻辑即可，具体实现代码如下：

// 缓存原生WebSocket构造函数
const OriginalWebSocket = window.WebSocket;
// 定义全局变量存储最近一次收到的WebSocket消息
window.lastWsMessage = '';

// 重写全局WebSocket构造函数
window.WebSocket = function(url, protocols) {
  // 初始化原生WebSocket实例
  const wsInstance = new OriginalWebSocket(url, protocols);

  // 拦截通过onmessage直接绑定的消息回调
  const originalOnMessage = wsInstance.onmessage;
  wsInstance.onmessage = function(event) {
    window.lastWsMessage = event.data;
    // 执行原有业务逻辑，不影响页面原有功能
    if (originalOnMessage) {
      return originalOnMessage.apply(this, arguments);
    }
  };

  // 拦截通过addEventListener绑定的message事件
  const originalAddEventListener = wsInstance.addEventListener;
  wsInstance.addEventListener = function(type, listener, options) {
    if (type === 'message') {
      // 包装原有监听器，插入消息存储逻辑
      const wrappedListener = function(event) {
        window.lastWsMessage = event.data;
        return listener.apply(this, arguments);
      };
      return originalAddEventListener.call(this, type, wrappedListener, options);
    }
    return originalAddEventListener.apply(this, arguments);
  };

  return wsInstance;
};

// 拷贝原生WebSocket的静态属性和方法，避免部分场景报错
Object.assign(window.WebSocket, OriginalWebSocket);

上述代码会自动拦截所有WebSocket连接收到的消息，全局变量lastWsMessage会始终存储最近一次的消息内容，和你之前用的lastXhr效果完全一致。

如果你还需要拦截客户端主动发送的WebSocket消息，可以补充以下代码：

const originalSend = OriginalWebSocket.prototype.send;
OriginalWebSocket.prototype.send = function(data) {
  // 按需添加存储最近发送消息的逻辑
  // window.lastWsSendData = data;
  return originalSend.apply(this, arguments);
};

内容的提问来源于stack exchange，提问作者Alex