https://github.com/danillofratta/app-server-sent-events
Server-Sent Events (SSE) provide a simple way for a server to push real-time updates to the browser over HTTP. Unlike WebSockets, SSE is one-way (server → client) and built into modern browsers via the EventSource API.
https://github.com/danillofratta/app-server-sent-events
angular dotnet event-sourcing nextjs
Last synced: 2 months ago
JSON representation
Server-Sent Events (SSE) provide a simple way for a server to push real-time updates to the browser over HTTP. Unlike WebSockets, SSE is one-way (server → client) and built into modern browsers via the EventSource API.
- Host: GitHub
- URL: https://github.com/danillofratta/app-server-sent-events
- Owner: danillofratta
- Created: 2025-10-20T21:18:23.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-21T12:35:47.000Z (8 months ago)
- Last Synced: 2025-10-31T23:11:57.236Z (8 months ago)
- Topics: angular, dotnet, event-sourcing, nextjs
- Language: TypeScript
- Homepage:
- Size: 1.21 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Server-Sent Events (SSE) Client in Angular and Next.js
This project demonstrates how to consume **Server-Sent Events (SSE)**
from a `.NET` backend using two different front-end clients: **Angular**
and **Next.js**.
## 📌 Overview
Server-Sent Events (SSE) provide a simple way for a server to push
real-time updates to the browser over HTTP. Unlike WebSockets, SSE is
one-way (server → client) and built into modern browsers via the
`EventSource` API.
In this repository, we have: - **Backend (.NET)** → SSE endpoint
streaming notifications - **Frontend (Angular)** → SSE client that
listens and displays messages - **Frontend (Next.js)** → SSE client that
listens and displays messages
------------------------------------------------------------------------
## ⚙️ Technologies Used
- **.NET 8 API** with SSE
- **Angular 17** for the first client
- **Next.js 14 (React)** for the second client
- **TypeScript** in both frontends
------------------------------------------------------------------------
## 🚀 How to Run the Backend (.NET)
1. Navigate to the backend folder
2. Run:
``` bash
dotnet restore
dotnet run
```
3. Your SSE endpoint should be available at:
https://localhost:7073/api/v1/Notifications/getstream
Ensure **CORS** is enabled in `.NET` so clients can connect:
``` csharp
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAll", b =>
{
b.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
});
});
app.UseCors("AllowAll");
```
------------------------------------------------------------------------
## 🎨 Angular Client Setup
1. Go to the Angular project folder:
``` bash
cd angular-client
```
2. Install dependencies:
``` bash
npm install
```
3. Start the dev server:
``` bash
ng serve
```
4. Open:
http://localhost:4200
Angular `NotificationService` example:
``` typescript
getServerEvents() {
const source = new EventSource('https://localhost:7073/api/v1/Notifications/getstream');
source.onmessage = event => {
this.messages.push(event.data);
};
source.onerror = error => {
console.error('SSE Error:', error);
source.close();
};
}
```
------------------------------------------------------------------------
## 🎨 Next.js Client Setup
1. Go to the Next.js project folder:
``` bash
cd nextjs-client
```
2. Install dependencies:
``` bash
npm install
```
3. Start the dev server:
``` bash
npm run dev
```
4. Open:
http://localhost:3000
Next.js SSE example (`app/page.tsx`):
``` tsx
"use client";
import { useEffect, useState } from "react";
export default function Home() {
const [messages, setMessages] = useState([]);
useEffect(() => {
const source = new EventSource("https://localhost:7073/api/v1/Notifications/getstream");
source.onmessage = (event) => {
setMessages((prev) => [...prev, event.data]);
};
source.onerror = (err) => {
console.error("SSE error:", err);
source.close();
};
return () => {
source.close();
};
}, []);
return (
Notificações
{messages.map((msg, index) => (
{msg}
))}
);
}
```
------------------------------------------------------------------------
## 📷 SSE Flow Diagram
------------------------------------------------------------------------
## 📜 License
This project is licensed under the MIT License.