/sse

This project consists of a client developed in Next.js and a server developed in Nest.js. The purpose of this project is to learn how to interact with Server-Sent Events (SSE).

Primary LanguageTypeScript

SSE Client-Server Interaction

project main view

This project consists of a client developed in Next.js and a server developed in Nest.js. The purpose of this project is to learn how to interact with Server-Sent Events (SSE).

Overview

The SSE Client-Server Interaction Project is designed to demonstrate the communication between a client and a server using the SSE protocol. The client is built using Next.js, a popular React framework, while the server is implemented with Nest.js, a progressive Node.js framework.

Server-Sent Events (SSE) is a web technology that enables a unidirectional, long-lived connection between a client and a server. It allows the server to push data to the client over a single HTTP connection, providing real-time updates without the need for continuous client polling.

Features

  • SSE client implemented in Next.js
  • SSE server implemented in Nest.js
  • Server-side event broadcasting to connected clients
  • Client-side event handling and display of real-time updates

project preview

  1. Progress bar is updated via SSE
  2. Table information is filled via SSE, one event per row
  3. Toast messages are triggered with SSE

API Endpoints

The following table describes the API endpoints provided by the server:

Endpoint Method Description
/ GET Returns a greeting message from the server.
/sse/:client GET Establishes an SSE connection with a specific client.
/upload/:client POST Uploads a file and sends its contents as SSE events to a specific client.
/csv GET Generates a CSV file containing mock data.

Run project

  1. Install dependencies on both, server and client with npm install
  2. Run server with npm run start:dev
  3. Run client with npm run dev
  4. Use the file /server/data.csv

Libs

Frontend

NextJS TailwindCSS RadixUI ShadcnUI hookform uuid

Backend

NestJS Multer

Useful links