Back to Browse

How I implement Server-Sent Events in TypeScript & React

4.6K views
May 2, 2025
21:53

👉 Enroll to Practical Effect here: https://lucasbarake.com/ Buy me a coffee! https://buymeacoffee.com/lucasbarake Repository: https://github.com/lucas-barake/effect-monorepo 00:00:00 Intro & Demo Application 00:00:39 Tech Stack: Effect Framework 00:01:31 SSE Endpoint & Connection Cleanup Challenge 00:02:37 Solving Cleanup with Effect Finalizers 00:04:22 Implementing the Keep-Alive Stream 00:05:28 Setting Stream Response Headers 00:06:50 Creating the SSE Manager Service 00:07:29 SSE Manager: Register & Unregister Methods 00:10:12 SSE Manager: Notify User Method & Encoding 00:11:32 Controller Integration & Cleanup Finalizer 00:12:14 Testing the Notification Endpoint 00:13:07 Frontend Integration: React App Intro 00:14:23 Frontend: Establishing SSE Connection 00:16:29 Frontend: Decoding & Sharing the Stream 00:17:10 Frontend: Handling Keep-Alive & Data Events 00:18:30 Frontend: Merging Streams & Retry Logic 00:20:32 Frontend: Consuming Events (Todos Example) 00:21:15 Conclusion & Code Repository

Download

1 formats

Video Formats

360pmp419.2 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

How I implement Server-Sent Events in TypeScript & React | NatokHD