Intro to Socket IO

Socket IO is an invaluable tool that utilizes WebSocket technologies to enable the creation of a persistent connection that allows two-way communication between the client and server. In addition to sending messages back and forth between the client and the server, event listeners can also be set up on the client to which the server can receive and respond. This technology is ideal for browser-based applications that frequently pass small pieces of data back in forth to and from the server, without having the hassle of setting up and shutting down the connection.

The WebSocket protocols were established 2011 by the Internet Engineering Task Force, defining the ground rules for syntax and use of the WebSocket API. Socket.IO is one of many tools that enhances their abilities working alongside Node.js, offering a library of methods and built in event listeners.

Creating the connection is a simple process with just a bit of starter code. On the server side, below, the library is imported, a port is defined and a message is sent. The emit method sends a message to every socket that is connected to the socket:

import { Server } from "socket.io";

const io = new Server(3000);

io.on("connection", (socket) => {
  // send a message to the client
  socket.emit("hello from server", 1, "2", { 3: Buffer.from([4]) });

  // receive a message from the client
  socket.on("hello from client", (...args) => {
    // ...
  });
});

source:

When the client-side code below is added the connection is made and we can see the message that was received.

The starter code on the other end is just as simple and looks very similar. The socket.on method is creating a listener that sends will send the message only when the connection is made.

import { io } from "socket.io-client";

const socket = io("ws://localhost:3000");

// send a message to the server
socket.emit("hello from client", 5, "6", { 7: Uint8Array.from([8]) });

// receive a message from the server
socket.on("hello from server", (...args) => {
  // ...
});

source:

One of the benefits of using sockets is that you have the ability to include callbacks on one end that are invoked when on the other end, once they are received, these listeners allow functions to be triggered without having to poll the other to determine the statuses.

socket.on("hello", (arg, callback) => {
  console.log(arg); // "world"
  callback("got it");
});

source:

The simple example above demonstrate the link between one server and one client, but Sockets allow the capability of a one-to-many connection, in essence allowing a continuous connection to all clients.

With broadcasting, the server can send messages to all sockets on the connection or just a subset of users.

// to all connected clients
io.emit("hello");

// to all connected clients in the "news" room
io.to("news").emit("hello");

source:

Included here are just a small sample of the numerous capabilities of this very useful, easy-to-use technology. WebSocket can be a great tool to have at your disposal when building browser-based apps.