In this WebSocket tutorial, Alex Booker from Ably (@CodeCast) 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 https://hubs.ly/Q028HG7S0
• Check out Spaces by Ably https://hubs.ly/Q028HG5Q0
• WebSocket handbook: https://hubs.ly/Q028HFK90
• Ably's diagram-based guide to WebSockets: https://hubs.ly/Q028HG5n0
• Tutorial source code on GitHub https://hubs.ly/Q028HHqV0
• How to scale WebSockets to millions of connections https://youtu.be/vXJsJ52vwAA

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 https://twitter.com/ablyrealtime
LinkedIn https://www.linkedin.com/company/ably-realtime