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.
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