How I Handle WebSockets in Web Apps | React, TypeScript & Effect

Buy me a coffee! https://buymeacoffee.com/lucasbarake

Learn how to effectively manage WebSocket connections in web applications through a practical example using AWS AppSync Events API. We'll build a robust subscriptions service that handles real-time data streams, connection management, and cleanup. The tutorial covers everything from setting up the initial contract to implementing retry policies, with a special focus on creating maintainable and production-ready code.

Code: https://gist.github.com/lucas-barake/d80e87c3532d6a3cafe48a65c9441682

00:00 Introduction
04:23 Contract Example
07:40 Defining the Runtime Schemas
12:04 Scaffolding the Subscriptions Service
13:13 Using Scopes & Finalizers for Cleanup
16:22 Creating the Source Stream
20:20 Handling the "Connection_Ack" Event
23:51 Turning the Source into a PubSub
24:49 Setting Up the Remaining Streams
26:18 Defining the EventHandler API
27:52 Creating the SubscriptionManager Service
34:21 Consuming the SubscriptionManager
35:07 Registering the Handlers
38:23 Retry Policy for the Setup Computation
39:35 Consuming the Subscriptions Service in React
40:49 Bonus: Network Monitor