如何在不覆盖原有逻辑的前提下扩展WebSocket的onmessage事件

当前代码中直接给socket.onmessage赋值新函数会覆盖原有逻辑，要实现扩展而不覆盖，有两种可靠的方法：

方法一：保存原有回调并在新逻辑中调用 #

先把原来的onmessage回调保存下来，在新的回调函数里先执行原有逻辑，再处理新的业务：

// otherFile.js
// 保存原始的onmessage回调
const originalOnMessage = socket.onmessage;

socket.onmessage = (e) => {
    // 优先执行原有回调（避免原有逻辑丢失）
    if (originalOnMessage) {
        originalOnMessage.call(socket, e);
    }

    // 执行新增的处理逻辑
    let payload = JSON.parse(e.data);
    if (payload.event === 'event1') {
        // 这里写新的处理代码
    }
};

注：使用call(socket, e)是为了保证原有回调中的this指向与原环境一致，避免出现上下文错误。

方法二：使用addEventListener添加事件监听（推荐） #

WebSocket对象支持标准的事件监听API，通过addEventListener注册多个message事件处理函数，所有注册的回调都会按顺序执行，不会互相覆盖：

修改socket.js的代码： #

// socket.js
window['socket'] = new WebSocket('wss://wss.somedomain.com:1000');
socket.addEventListener('message', (e) => {
    let payload = JSON.parse(e.data);
    if (payload.event === 'event1') {
        // 原有处理逻辑
    }
});

修改otherFile.js的代码： #

// otherFile.js
socket.addEventListener('message', (e) => {
    let payload = JSON.parse(e.data);
    if (payload.event === 'event1') {
        // 新增的处理逻辑
    }
});

这种方式更符合前端事件驱动的标准写法，无需手动维护原有回调，扩展性和可维护性更好。

内容的提问来源于stack exchange，提问作者NME New Media Entertainment