如何重写原生JavaScript WebSocket的默认Ping协议？

问题说明 #

我正在为Expo（React Native）项目搭建WebSocket僵死连接处理机制，Node.js服务端借助ws包内置的pong事件和Ping发送功能，很容易实现心跳管理。但客户端的原生WebSocket存在限制：它会自动以0x9操作码响应服务端的Ping帧，但这类Ping消息不会触发onmessage回调，导致我无法在收到Ping时执行自定义逻辑（比如重置心跳超时计时器）。

我尝试过的代码如下：

const heartbeat = () => {
    console.log("heartbeat");

    clearTimeout(pingTimeout!);

    pingTimeout = setTimeout(() => {
        socket.close();
        setResetConnection(rc => !rc);
    }, HEARTBEAT_INTERVAL + HEARTBEAT_LATENCY);
};

socket.onmessage = (event) => {
    console.log("message");

    if (event.data instanceof Blob) {
        console.log("received ping");
        heartbeat();
        const response = new ArrayBuffer(1);
        const view = new Uint8Array(response);
        view[0] = 0x9;
        socket.send(view);
        return;
    }

    // ... 剩余的onmessage处理代码 ...
}

Socket初始化代码：

var socket = new WebSocket("ws://ipaddr:8080");

当前Pong会自动发送给服务端，但我无法注入自定义逻辑，希望找到无需自行构建完整Ping/Pong协议的解决办法。

可行解决方案 #

1. 用第三方库替代原生WebSocket #

使用react-native-websocket库，它封装了原生WebSocket并提供了Ping/Pong帧的监听支持，无需手动处理帧编码：

import WebSocket from 'react-native-websocket';

// 初始化连接
const socket = new WebSocket('ws://ipaddr:8080');

// 监听Ping事件，直接执行自定义逻辑
socket.on('ping', () => {
    console.log('收到服务端Ping');
    heartbeat(); // 重置心跳超时计时器
    // 库会自动发送Pong响应，无需手动编码
});

// 处理普通业务消息
socket.on('message', (event) => {
    // ... 你的消息处理逻辑 ...
});

安装命令：npm install react-native-websocket（Expo项目无需额外配置）

2. 利用React Native原生模块监听底层事件 #

如果不想引入第三方库，可以通过RCTWebSocketModule直接监听WebSocket的底层事件，拦截Ping帧并注入逻辑：

import { NativeModules, useEffect } from 'react-native';
const { RCTWebSocketModule } = NativeModules;

// 初始化原生WebSocket
const socket = new WebSocket('ws://ipaddr:8080');

// 监听底层消息事件
RCTWebSocketModule.addListener('websocketMessage', (message) => {
    // 检查是否为Ping帧（操作码9）
    if (message.opcode === 9) {
        console.log('捕获到Ping帧');
        heartbeat(); // 执行自定义逻辑
        // 手动发送Pong帧（操作码10）
        socket.send(new Uint8Array([0xA]));
    } else {
        // 将普通消息转发给原本的onmessage回调
        if (socket.onmessage) {
            socket.onmessage({ data: message.data });
        }
    }
});

// 组件卸载时移除监听，避免内存泄漏
useEffect(() => {
    return () => {
        RCTWebSocketModule.removeAllListeners('websocketMessage');
    };
}, []);

注意：该方法依赖React Native的原生模块API，不同版本可能存在兼容性差异，需要测试验证。

3. 服务端配合发送标记化普通消息 #

如果客户端修改受限，可以让服务端不发送标准WebSocket Ping帧，而是发送带有ping标记的普通JSON消息，这样客户端就能在onmessage中捕获并处理：

// 服务端（ws包实现）
setInterval(() => {
    ws.send(JSON.stringify({ type: 'ping' }));
}, HEARTBEAT_INTERVAL);

// 客户端处理逻辑
socket.onmessage = (event) => {
    try {
        const data = JSON.parse(event.data);
        if (data.type === 'ping') {
            heartbeat(); // 执行自定义逻辑
            // 发送Pong响应
            socket.send(JSON.stringify({ type: 'pong' }));
            return;
        }
    } catch (e) {
        // 处理非JSON格式消息
    }

    // ... 处理业务消息 ...
};

这个方案无需修改客户端的WebSocket底层行为，仅需服务端配合调整，适合快速迭代场景。

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