The accompanying source code for our tutorial and video tutorial on how to use WebSockets with React and Node.

• 📝 Read the complete guide to WebSockest with React (including tutorial) here and follow along.
• 📹 Alternatively, we recorded the same tutorial as a video here.

In the tutorial, we build an realtime multiplayer cursor feature using React useWebSocket and perfect-cursors on the frontend, and ws on the back.

The final product looks like this:

Follow along using your preferred tutorial medium above, browse and learn from the code here on GitHub, or get hands-on and run the demo by following the instructions included below.

Running the demo

Want to run the demo and check it out? No problem!

First, download the repository with Git:

git clone https://github.com/ably-labs/react-websockets-tutorial
cd react-websockets-tutorial

To run the server, run:

cd server
npm install
npm run

To run the client simultaneously, open a new terminal shell, and run:

cd client
npm install
npm run dev