Learning WebSocket

January 12, 2021 · View on GitHub

Just one of the things I'm learning. https://github.com/hchiam/learning

Super quick demo setup

Triple-click to select the whole command below: (and copy it into CLI and run it)

git clone https://github.com/hchiam/learning-websocket.git && cd learning-websocket && yarn && nodemon

Or if you don't have yarn installed:

git clone https://github.com/hchiam/learning-websocket.git && cd learning-websocket && npm install && nodemon

You can then open http://localhost:8080 in multiple tabs to see live chat working locally in localhost.

Both server and client have .on and .emit events. 1st parameter is the name of the listener. 2nd parameter contains the data (a JSON object for .emit, and a function(data) for .on). There's io.sockets.emit ("send to all") and socket.broadcast.emit ("send to all others").

Server

const io = socket(server);

io.on("connection", (socket) => {
  socket.on("some-server-listener-1", (data) => {
    // send message data to all clients:
    io.sockets.emit("client-listener-1", data);

    // send typing data to all clients except sender client that triggered this listener:
    socket.broadcast.emit("client-listener-2", data);

    socket.on("disconnect", (socket) => {
      console.log(`A client socket disconnected.`);
    });
  });
});

Client

const socket = io(window.location.origin);

socket.emit("some-server-listener-1", data);
socket.on("client-listener-2", (data) => {
  // ...
});

Medium tutorial

https://medium.com/@tfarguts/websockets-for-beginners-part-2-9a1970a1c228

Learning WebSocket

Super quick demo setup

Key things

Server

Client

Medium tutorial

More links to learn from