JavaScript 编写事件驱动的回调

Question

我正在编写一种库，它将传递来自服务器的各种事件，进行一些处理并将结果传递到客户端 JavaScript。我已经看到 socket.io 发生了 socket.on("message", callback()} 这样的事件。我有一个地方需要从服务器获取消息并将其传递给 myobj.on("message",callback()) 之类的前端，还有另一种情况我需要播放音频然后当音频结束时我需要触发相同的 on 函数具有不同的事件和回调。喜欢 myobj.on("audioEnded", callback()).

我有这样的音频播放功能：

var self = this;

this.socket.on("audio", function (audio) {
    audio = JSON.parse(audio);
    var audioUrl =
      "data:audio/ogg;base64," + audio.data;
    self.audioElem = new Audio();
    self.audioElem.src = audioUrl;
    self.audioElem.play();
    self.audioElem.onended = (I want to notify the on function of the frontend JavaScript from here.)
  });

如何编写这个 on 事件通知函数？

Answer 1

您可以试试这个“订阅”功能

const Subscriptions = {}
function subscribe (type, callback) {  
    const current = Subscriptions[type]
    if (current) {
        current.push(callback)
    } else {
        Subscriptions[type] = [callback]
    }
}
function send (action, value) {
    ws.send(JSON.stringify({ action, value }))  
}
ws.onmessage = evt => {     // ws -> websocket
    const info = JSON.parse(evt.data)    
    const { action, content } = info

    const handlers = Subscriptions[action]
    handlers && handlers.forEach(callback => callback(content, info))
}
// And all your socket messages should look like this:

//send(':login', { phone: '15089320000', password: 'xxxxx' })
subscribe(':login', (content, info) => ...)
{
    action: ":login"
    content: {state: 1, aid: 1, name: "Super Can", info: {name: "Super Can", level: "Super Level!"},…}
}

那么您的代码应该如下所示：

subscribe('audio', audio => {   // audio is already a JSON, no need to parse again
    const audioUrl =
      "data:audio/ogg;base64," + audio.data;
    self.audioElem = new Audio();
     ....
})

但我没有使用 socket.io，而是使用 WebSocket。

JavaScript 编写事件驱动的回调

JavaScript writing event driven callbacks

javascript

function

object

callback