将中间件添加到事件

Question

我一直在尝试对事件处理程序进行修改，以便在它通常被发送到真正的事件处理程序函数之前拦截它。

例子：

var ws =  new WebSocket("/ws.ws");
ws.onmessage = function(event){
    console.log("A normal event received")
}
// or using ws.addeventlistener("message",function(){})

现在，在我执行上面的代码之前，我将执行我的中间件来拦截未来将创建的每个 websocket 对象上的 onmessage 事件的所有事件调用。然后中间件将对事件对象进行修改，然后将其转发给真实事件。

我知道如何使用 WebSocket.send 方法做到这一点。

var proxySend = WebSocket.prototype.send;
WebSocket.prototype.send = function() {
    console.log("Intercepted a send call",arguments)
    //make a change to the arguments here
    return proxySend.apply([].slice(arguments));
}

但我不知道如何处理消息事件。我相信这是不可能的，但值得一试。我在 chrome 扩展中使用它，所以中间件总是会在网页加载之前加载。

更新：

如果网站使用 addeventlistener 函数通过使用我在 WebSocket.send 示例中展示的相同技巧来添加事件，我可以做到这一点。

因为 ws.onmessage 现在是我卡在的地方。

我尝试通过对 onmessage 原型使用​​ getter/setter 来执行建议的操作。

var eventRef = null;
Object.defineProperty(WebSocket.prototype, 'onmessage', {
  get: function() { return eventRef ; },    
  set: function(onmessageEventHandler){ 
    eventRef = function(event){
      console.log("Before onMessage event"); // my middleware
      onmessageEventHandler(event);
    }
  }
});

但它不会控制台记录“onMessage 事件之前”，甚至不会调用分配给 onmessage 事件的函数。

如果您想对其进行测试，可以在这里尝试。为了便于测试，我将其修改为 onclick。 https://codepen.io/MyPenAccount/pen/MWaZrwE

Answer 1

我不知道这是否能完全解决您的问题，但您可以这样做：

Object.defineProperty(HTMLElement.prototype, "onclick", {   
    set: function(handler) { 
        // Maybe clear previous installed click handlers
        // or prevent multiple calls to this.

        this.addEventListener("click", function(event) {
            alert("Middleware")

            handler(event)
        })
    }
})