客户端上的socket.io如何侦听服务器发出的事件？

Question

I have the following code on my client side:

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

So I think I understand the above. When a click event happens, run the callback function. Inside the callback function, have socket emit this "chat" event to the server. Along with the event socket emits, pass the JSON data.

Now on the server side we have this:

var io = socket(server);

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

I think I understand this as well. Bind the socket to this server. Then listen to the connection event. When that event is invoked, socket.io (will magically?) pass a socket object to our function. We then listen to all of our sockets for a chat. As defined on the client side, take the data emited from the chat and emit it back to all of our sockets.

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

Again in the above example, we have the client listening to the event on the server side.

My question is, how does the event get "passed" to the client side? Is this some sort of native Javascript functionality? I would like to know more of what happens on the backend.

Answer 1

The event gets passed to the server through websockets. Its a tcp connection from the browser to the server. The connection is full duplex meaning the server can send real time data to the client and vise versa.

In your frontend code you should have something that looks similar to

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

This code asks the server for a tcp connection using web sockets. Once the browser is connected to the server through websockets, socket.io can send events to the send through the connection.

The socket that is passed in the connection event is just a reference to whatever socket gets created when the frontend connects. The socket gets a unique id and with this reference you can communicate in real time to the web browser client.

If you want a deep dive into web sockets, I'd recommend reading this

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