Awesome
Learning WebSocket
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.
Key things
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
More links to learn from
"WebSockets in 100 seconds": https://www.youtube.com/watch?v=1BfCnjr_Vjg (and socket.io and beyond: WebRTC and WebTransport)
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers