Server-Sent Events

Introduction

This repository showcases how Server-Sent Events can be used to power a real-time delivery tracking application. Server-Sent Events is a server push technology that can be used for real-time, one-way communication between a server and a client. Browsers can subscribe to a stream of events generated by a server using the HTML EventSource API. This is an alternative mechanism to Polling where clients make regular requests to a server with the chance that no updates have occurred. It is also an alternative to WebSockets which is a more complex real-time, two-way communication mechanism.

Example use cases where Server-Sent Events are applicable:

• Visualising real-time tracking information from IoT devices.
• Price or value updates as fluctuations occur within a market.
• News tickers with infrequent updates from live news or sports.

Below are some notable differences between Server-Sent Events and WebSockets:

Server-Sent Events	WebSockets
Unidirectional communication between server and client	Bidirectional communication between server and client
Streamed over HTTP	Connects via TCP
Transfers textual data	Transfers textual and binary data

While the real purpose of this repository is to demonstrate Server-Sent Events, there are some other notable tools being used that make development easier:

• pnpm for more efficient package management and quicker install speeds.
• Turborepo used to house the API and UI applications within a monorepo.
• Shared internal packages with common base files that can be overridden per application.
• Shared types between client and server enforced via Zod on both requests and responses.
• Environment variable enforcement via Zod in both API and UI applications.

Instructions

These instructions assume you are running a version of NodeJS equal to or greater than the version mentioned in the .nvmrc file and have pnpm installed:

1. Install dependencies across all packages and applications in the monorepo

pnpm install

2. Start the service and UI

pnpm dev

3. Run the script which simulates the truck travelling a route

./scripts/route.sh

Further Reading

Server-Sent Events

• Server-Sent Events
• A Primer on Server-Sent Events (SSE)
• WebSockets vs Server-Sent Events
• How To Use Server-Sent Events in Node.js to Build a Realtime App
• Using WebSockets with React Query

Zod Validation

• Schema Validation with Zod and Express.js
• Validate Environment Variables With Zod
• End-to-end Typesafe APIs with TypeScript and shared Zod schemas
• Typing API Responses With Zod