This demo shows how to setup messaging between a Socket.io server running on the backend in ExpressJS and a React frontend.
// BACKEND setup
npm i socket.io // install socket io in Express
import express from "express";
const app = express();
import { Server } from "socket.io";
const PORT = process.env.PORT || 4001;
const httpServer = app.listen( PORT );
// configure for usage from React
const io = new Server( httpServer, {
cors: { // configure CORS
origin: "*"
}
})
// FRONTEND setup
npm i socket.io-client // install Socket IO client for React
import socketIOClient from "socket.io-client";
const MESSAGE_SERVER_URL = "http://localhost:5000";
// connect on load...
const socketRef = useRef()
useEffect(() => {
socketRef.current = socketIOClient(MESSAGE_SERVER_URL);
return () => socketRef.current && socketRef.current.disconnect() // close socket when browser tab is closed
}, []);
// register socket message listener
// if listener depends on any state data => re-create listener every time to prevent stale closure (=> with outdated state)
useEffect(() => {
socketRef.current.on("message", msg => {
setMessages([...messages, msg]); // push response data into state
});
return () => socketRef.current && socketRef.current.off("message") // remove event listener after any messages state update and re-create it
}, [messages])