How to use WebSockets with React and Node

Подписаться 2,1 тыс.

Просмотров 24 тыс.

50% 1

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

Опубликовано:

31 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 47

@robcataus 3 месяца назад

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

@AblyRealtime 3 месяца назад

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

@bookercodes 3 месяца назад

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

@gabrielvaz8083 3 месяца назад

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 8 месяцев назад

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 8 месяцев назад

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

@Cyandog 8 месяцев назад

@@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 7 месяцев назад

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

@ihateorangecat 6 месяцев назад

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!

@incidentallygeeks 6 месяцев назад

You the man!

@beingmyself3706 3 месяца назад

Extremely useful, easy to understand, perfect ^)

@StudioShop 3 месяца назад

Thanks for a great tutorial. Appreciate it.

@AblyRealtime 3 месяца назад

😁

@JohnMcclaned 8 месяцев назад

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

@AblyRealtime 8 месяцев назад

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

@nxone9903 4 месяца назад

Underrated channel.

@AblyRealtime 4 месяца назад

🙌

@kishankumar-ze5pf 2 месяца назад

thank u buddy for creating this awsm content , easy to understand thanks again

@AblyRealtime Месяц назад

Thanks for commenting!

@user-he5uv6ij7e 7 месяцев назад

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

@AblyRealtime 7 месяцев назад

Thanks for letting us know, a great suggestion!

@GriffynGould 7 месяцев назад

10/10

@AblyRealtime 7 месяцев назад

Thanks! Glad to hear you liked it!

@AbdurRahim-eu3zr 8 месяцев назад

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

@AblyRealtime 8 месяцев назад

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

@keyonlewis7574 8 месяцев назад

@@AblyRealtimeyes that would be nice

@wushupro 7 месяцев назад

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 7 месяцев назад

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

@hlibtumakov4367 8 месяцев назад

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 8 месяцев назад

Thanks, will feed this back to the team.

@justiceessiel6123 8 месяцев назад

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 8 месяцев назад

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

@rickshawty 3 месяца назад

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

@AblyRealtime 2 месяца назад

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

@nibunimu 7 месяцев назад

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

@AblyRealtime 7 месяцев назад

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 8 месяцев назад

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

@AblyRealtime 8 месяцев назад

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 8 месяцев назад

🎉 how to deploy properly ? in scalable way

@AblyRealtime 8 месяцев назад

Hello, we have another recent video called 'How to scale WebSockets to millions of connections' which you might find helpful: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vXJsJ52vwAA.html - let us know if you have any questions