How to use WebSockets with React and Node

In this WebSocket tutorial, Alex Booker (@bookercodes) from Ably teaches you how to implement realtime updates in your React applications. Here, we use React on the frontend and Node on the back to build a live cursors feature from scratch, but the fundamental WebSocket lessons can be applied to any manner of realtime application.
WebSockets are a bidirectional full-duplex communication protocol used to enable realtime updates such as chat, multiplayer collaboration, notifications, and other live updates in your React applications.
Compared to the other humdrum WebSocket videos out there, in this video, you will learn WebSockets by *doing*.
Follow along as we build something awesome. In doing so, you'll learn WebSockets well enough at a fundamental level to apply them in any project now, or in the future.
TIMESTAMPS ⏰
00:00 Introduction
01:12 WebSockets vs HTTP
03:08 3 things you need to know about WebSockets
05:52 What you'll build
07:41 WebSockets with Node
39:28 WebSockets with React
01:08:47 Conclusion
LINKS MENTIONED 🔗
- Check out Ably hubs.ly/Q028HG7S0
- Check out Spaces by Ably hubs.ly/Q028HG5Q0
- WebSocket handbook: hubs.ly/Q028HFK90
- Ably's diagram-based guide to WebSockets: hubs.ly/Q028HG5n0
- Tutorial source code on GitHub hubs.ly/Q028HHqV0
- How to scale WebSockets to millions of connections • How to scale WebSocket...
ABOUT ABLY 👋
Ably is an enterprise-grade pub/sub messaging platform. We make it easy to efficiently design, quickly ship, and seamlessly scale critical realtime functionality delivered directly to end-users. Every day, we deliver billions of realtime messages to millions of users for thousands of companies.
ABLY ON SOCIAL
Twitter / ablyrealtime
LinkedIn / ably-realtime

[@robcataus]

I’m the author of react-use-websocket, and stumbled on this video. Your kind words made my weekend!❤

[@AblyRealtime]

Great to hear from you, and thanks for commenting ❤️

[@bookercodes]

Haha, no way, amazing to see you here! Great work on react-use-websocket!

[@gabrielvaz8083]

This is HIGH-level content, 10/10 quality, 10/10 content, I'm shocked by the low viewership, I wish you all the best on your journey as a content creator

[@Cyandog]

This video is just so good. EXTREMELY high quality content. Thank you very much! This is the type of video that not only adds value to other people but make them remember you and your business. Will recommend this to anyone looking to learn about WS! Wish you the utmost success!

[@AblyRealtime]

Thanks for the kind words! Glad to hear you like the video.

[@Cyandog]

​@@AblyRealtimei got a few questions if possible. Could you make just one users object and put the connections there? Also, the on message handler needs to be inside the on connection one?

[@AblyRealtime]

​@@Cyandog You can structure the code that way if you prefer! There's no implication on functionality or performance, so it really comes down to your preference and what you find most logical to follow. Regarding the message handler - yep, that's right! - Alex

[@luciano_romano1]

You the man!

[@beingmyself3706]

Extremely useful, easy to understand, perfect ^)

[@54peace]

Such a quality content there! 👍 Websocket has been overwhelming for me as a socket io user, and this expalins a very decent way love it. I really hope to see more educational contents like this from this channel and alst but not least Ably looks really interesting to give a try too!

[@StudioShop]

Thanks for a great tutorial. Appreciate it.

[@AblyRealtime]

😁

[@JohnMcclaned]

Thanks for the interesting video, would be great to also see how to use Ably in my projects too.

[@AblyRealtime]

Thanks for the kind words John, we're working on more videos so stay tuned 😎

[@nxone9903]

Underrated channel.

[@AblyRealtime]

🙌

[@user-he5uv6ij7e]

Many thanks ! Would also love to see how to implement Ably websockets in a Next.JS app :)

[@AblyRealtime]

Thanks for letting us know, a great suggestion!

[@hlibtumakov4367]

Since Node v.15.6.0 you don't need to install `uuid` from npm. There is a Node's native module called 'node:crypto' which exports 'randomUUID` (UUID v4) function.

[@AblyRealtime]

Thanks, will feed this back to the team.

[@wushupro]

Awesome tutorial! I think I’m missing something. You’ve added useref to stop it rerendering but why does it re render so much in the first place? I thought react components only re render if state or props change?

[@AblyRealtime]

React useWebSocket forces a render when lastJsonMessage is updated. In other words, the component renders every time a new WebSocket message is received - Alex

[@AbdurRahim-eu3zr]

Using light theme is like bringing a flashlight to a laser show - let's keep it dark and mysterious, shall we?

[@AblyRealtime]

Thanks for your feedback, we will keep it in mind for future videos.

[@keyonlewis7574]

​@@AblyRealtimeyes that would be nice

[@justiceessiel6123]

Are the hackthon projects repos available want to do sth close to uber so if there is a blog on that as well or a video that be created with react or react native that would be great

[@AblyRealtime]

Hello, you can find the hackathon project gallery at ably.devpost.com/project-gallery but the repos may not be public.

[@GriffynGould]

10/10

[@AblyRealtime]

Thanks! Glad to hear you liked it!

[@rickshawty]

Thanks for the tutorial, I really appreciate the effort. One q tho, r u rly using white mode in vs code?

[@AblyRealtime]

Alex is just a VS code white-mode kinda guy 😎

[@nibunimu]

Why do we use useRef and not useCallback at 57:00?

[@AblyRealtime]

Good question. To the best of my understanding, useRef is equivalent to useCallback with an empty dependencies array. They both accomplish the same thing, which is to reference a variable between re-renders - Alex

[@Goku-xm1gq]

You said brodcasting using loop ? but that aint feasible right ? when user count is high

[@AblyRealtime]

Correct - when the user count is extremely high, broadcasting a message to every single client using a loop can lead to performance issues. In such cases, more complex solutions such as pub/sub models or a Message Queue system might be needed. These solutions allow the server to handle a much larger number of connections simultaneously. - Alex

[@milon27]

🎉 how to deploy properly ? in scalable way

[@AblyRealtime]

Hello, we have another recent video called 'How to scale WebSockets to millions of connections' which you might find helpful: kzbin.info/www/bejne/rImtpH1rZ9uqd6M - let us know if you have any questions

[@sandipsarkar1702]

could you please use dark theme! 😅

[@AblyRealtime]

we will next time 🥰

[@eddieaguilar4878]

Awesome thing but my eyes are crying with this light IDE 😂

[@arifulislamleeton]

Hi I'm Ariful Islam leeton im software developer and website developer and co founder open A. I

[@NoNamePerson18]

This guy is a monster, a psychopath, he uses light theme,

[@AblyRealtime]

🫣