{"id":32664142,"url":"https://github.com/danillofratta/app-server-sent-events","last_synced_at":"2026-04-29T20:35:25.976Z","repository":{"id":319916399,"uuid":"1080091448","full_name":"danillofratta/app-server-sent-events","owner":"danillofratta","description":"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.","archived":false,"fork":false,"pushed_at":"2025-10-21T12:35:47.000Z","size":1265,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-31T23:11:57.236Z","etag":null,"topics":["angular","dotnet","event-sourcing","nextjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danillofratta.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-20T21:18:23.000Z","updated_at":"2025-10-21T12:35:50.000Z","dependencies_parsed_at":"2025-10-20T23:31:22.946Z","dependency_job_id":"33eae7ad-a7f3-41e1-be90-68c2756e0d4a","html_url":"https://github.com/danillofratta/app-server-sent-events","commit_stats":null,"previous_names":["danillofratta/app-server-sent-events"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danillofratta/app-server-sent-events","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danillofratta%2Fapp-server-sent-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danillofratta%2Fapp-server-sent-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danillofratta%2Fapp-server-sent-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danillofratta%2Fapp-server-sent-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danillofratta","download_url":"https://codeload.github.com/danillofratta/app-server-sent-events/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danillofratta%2Fapp-server-sent-events/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32443565,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T20:22:27.477Z","status":"ssl_error","status_checked_at":"2026-04-29T20:22:26.507Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dotnet","event-sourcing","nextjs"],"created_at":"2025-10-31T23:01:26.587Z","updated_at":"2026-04-29T20:35:25.950Z","avatar_url":"https://github.com/danillofratta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Server-Sent Events (SSE) Client in Angular and Next.js\n\nThis project demonstrates how to consume **Server-Sent Events (SSE)**\nfrom a `.NET` backend using two different front-end clients: **Angular**\nand **Next.js**.\n\n## 📌 Overview\n\nServer-Sent Events (SSE) provide a simple way for a server to push\nreal-time updates to the browser over HTTP. Unlike WebSockets, SSE is\none-way (server → client) and built into modern browsers via the\n`EventSource` API.\n\nIn this repository, we have: - **Backend (.NET)** → SSE endpoint\nstreaming notifications - **Frontend (Angular)** → SSE client that\nlistens and displays messages - **Frontend (Next.js)** → SSE client that\nlistens and displays messages\n\n------------------------------------------------------------------------\n\n## ⚙️ Technologies Used\n\n-   **.NET 8 API** with SSE\n-   **Angular 17** for the first client\n-   **Next.js 14 (React)** for the second client\n-   **TypeScript** in both frontends\n\n------------------------------------------------------------------------\n\n## 🚀 How to Run the Backend (.NET)\n\n1.  Navigate to the backend folder\n\n2.  Run:\n\n    ``` bash\n    dotnet restore\n    dotnet run\n    ```\n\n3.  Your SSE endpoint should be available at:\n\n        https://localhost:7073/api/v1/Notifications/getstream\n\nEnsure **CORS** is enabled in `.NET` so clients can connect:\n\n``` csharp\nbuilder.Services.AddCors(options =\u003e\n{\n    options.AddPolicy(\"AllowAll\", b =\u003e\n    {\n        b.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();\n    });\n});\napp.UseCors(\"AllowAll\");\n```\n\n------------------------------------------------------------------------\n\n## 🎨 Angular Client Setup\n\n1.  Go to the Angular project folder:\n\n    ``` bash\n    cd angular-client\n    ```\n\n2.  Install dependencies:\n\n    ``` bash\n    npm install\n    ```\n\n3.  Start the dev server:\n\n    ``` bash\n    ng serve\n    ```\n\n4.  Open:\n\n        http://localhost:4200\n\nAngular `NotificationService` example:\n\n``` typescript\ngetServerEvents() {\n  const source = new EventSource('https://localhost:7073/api/v1/Notifications/getstream');\n  source.onmessage = event =\u003e {\n    this.messages.push(event.data);\n  };\n  source.onerror = error =\u003e {\n    console.error('SSE Error:', error);\n    source.close();\n  };\n}\n```\n\n------------------------------------------------------------------------\n\n## 🎨 Next.js Client Setup\n\n1.  Go to the Next.js project folder:\n\n    ``` bash\n    cd nextjs-client\n    ```\n\n2.  Install dependencies:\n\n    ``` bash\n    npm install\n    ```\n\n3.  Start the dev server:\n\n    ``` bash\n    npm run dev\n    ```\n\n4.  Open:\n\n        http://localhost:3000\n\nNext.js SSE example (`app/page.tsx`):\n\n``` tsx\n\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport default function Home() {\n  const [messages, setMessages] = useState\u003cstring[]\u003e([]);\n\n  useEffect(() =\u003e {\n    const source = new EventSource(\"https://localhost:7073/api/v1/Notifications/getstream\");\n\n    source.onmessage = (event) =\u003e {\n      setMessages((prev) =\u003e [...prev, event.data]);\n    };\n\n    source.onerror = (err) =\u003e {\n      console.error(\"SSE error:\", err);\n      source.close();\n    };\n\n    return () =\u003e {\n      source.close();\n    };\n  }, []);\n\n  return (\n    \u003cdiv style={{ color: \"#000\", background: \"#fff\", padding: \"1rem\" }}\u003e\n      \u003ch2\u003eNotificações\u003c/h2\u003e\n      {messages.map((msg, index) =\u003e (\n        \u003cdiv key={index}\u003e{msg}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n```\n\n------------------------------------------------------------------------\n\n## 📷 SSE Flow Diagram\n\n![SSE Flow](A_flowchart_in_the_image_illustrates_a_Server-Sent.png)\n\n------------------------------------------------------------------------\n\n## 📜 License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanillofratta%2Fapp-server-sent-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanillofratta%2Fapp-server-sent-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanillofratta%2Fapp-server-sent-events/lists"}