客戶端上的socket.io如何偵聽服務器發出的事件？

Question

我的客戶端上有以下代碼：

btn.addEventListener('click', function(){
    socket.emit('chat',{
        message: message.value,
        handle: handle.value
    });
});

因此，我認為我理解上述內容。 當發生click事件時，請運行回調函數。 在回調函數內部，讓套接字向服務器發出此“聊天”事件。 與事件套接字一起發出，傳遞JSON數據。

現在在服務器端，我們有：

var io = socket(server);

io.on('connection', function(socket){    
    socket.on('chat', function(data){
        io.emit('chat', data);  
    });
});

我想我也明白這一點。 將套接字綁定到該服務器。 然后聽連接事件。 調用該事件時，socket.io（會神奇地嗎？）將套接字對象傳遞給我們的函數。 然后，我們聽所有套接字進行聊天。 按照客戶端的定義，將聊天中發出的數據拿回我們所有的套接字。

socket.on('chat', function(data){
     // do cool stuff
})

還是在上面的示例中，我們讓客戶端在服務器端監聽事件。

我的問題是，事件如何“傳遞”到客戶端？ 這是某種本機Javascript功能嗎？ 我想了解更多有關后端發生的情況。

Answer 1

該事件通過websockets傳遞到服務器。 它是從瀏覽器到服務器的tcp連接。 連接是全雙工的，這意味着服務器可以將實時數據發送到客戶端，反之亦然。

在前端代碼中，您應該具有類似於以下內容的內容

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

此代碼要求服務器使用Web套接字進行TCP連接。 一旦瀏覽器通過websockets連接到服務器，socket.io就可以通過連接將事件發送到發送方。

在連接事件中傳遞的套接字只是對前端連接時創建的任何套接字的引用。 套接字獲得一個唯一的ID，通過此引用，您可以與Web瀏覽器客戶端實時通信。

如果您想深入了解Web套接字，建議閱讀此文章

https://tools.ietf.org/html/rfc6455