React: Socket.IO - 401-advanced-javascript-jv/seattle-javascript-401d30 GitHub Wiki

React's quick update capabilities lend themselves well to the use of Socket.IO to enable near-realtime transmittal of information between clients and the server. They enable a server to propagate a received message to a destination chosen by some logic.

The basic functioning of this system is a socket.io server and a React app which uses socket.io-client to subscribe to the server.

On the server, you would npm i socket.io and use it in the server.js, const socketIoServer = require('socket.io');, then set up the server to listen on a port. You would then, inside the callback of the .on method for the server, have the server listen for a specific event, then perform some logic with the payload to determine how to re-emit the message.

On the client, you would npm i socket.io-client and import it into app, import socketIoClient from 'socket.io-client';. Then you would subscribe to the socket.io server, const clientSocket = socketIoClient(<socket.io server url>);. Then client could then emit events via clientSocket.emit('event', payload) or listen for events clientSocket.on('event', callback);.