I have an SSE Server that has the following settings/requirements:
On the other side (client) I have an Browser with JavaScript
The problem:
If I try to use curl, then I receive the header. Then after a short period of time the cached packets (many packets). But I think the cache is full and I see the cache.
Here is the C# SSE Server code:
using System;
using System.Collections.Generic;
using System.Net;
using System.Text;
using System.Threading.Tasks;
using System.Timers;
class Program
{
private static readonly List<HttpListenerContext> clients = new List<HttpListenerContext>();
private static readonly object lockObject = new object();
private static System.Timers.Timer? messageTimer;
static async Task Main(string[] args)
{
string url = "http://+:5000/";
HttpListener listener = new HttpListener();
listener.Prefixes.Add(url);
listener.Start();
Console.WriteLine($"Server runs on {url}");
// Timer
messageTimer = new System.Timers.Timer(1000);
messageTimer.Elapsed += SendPeriodicMessages;
messageTimer.AutoReset = true;
messageTimer.Enabled = true;
while (true)
{
HttpListenerContext context = await listener.GetContextAsync();
HandleClient(context);
}
}
private static void HandleClient(HttpListenerContext context)
{
HttpListenerRequest request = context.Request;
HttpListenerResponse response = context.Response;
response.Headers.Add("Access-Control-Allow-Origin", "*");
response.Headers.Add("Access-Control-Allow-Methods", "GET, OPTIONS");
response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
if (request.HttpMethod == "OPTIONS")
{
response.Headers.Add("Access-Control-Allow-Origin", "*");
response.Headers.Add("Access-Control-Allow-Methods", "GET, OPTIONS");
response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
response.StatusCode = (int)HttpStatusCode.OK;
response.OutputStream.Close();
return;
}
response.Headers.Add("Content-Type", "text/event-stream");
response.Headers.Add("Cache-Control", "no-cache");
response.Headers.Add("Connection", "keep-alive");
AddClient(context);
}
private static void AddClient(HttpListenerContext context)
{
lock (lockObject)
{
clients.Add(context);
var clientIp = context.Request.RemoteEndPoint.Address.ToString();
var clientPort = context.Request.RemoteEndPoint.Port;
Console.WriteLine($"Client connected: IP = {clientIp}, Port = {clientPort}");
}
}
static int TimerCounter = 0;
private static void SendPeriodicMessages(object? sender, ElapsedEventArgs e)
{
Console.WriteLine("TimerTick " + TimerCounter);
SendMessagesToClients("data: " + TimerCounter++ + "\\n\\n");
}
private static void SendMessagesToClients(string message)
{
Task.Run(async () =>
{
byte[] buffer = Encoding.UTF8.GetBytes(message);
List<Task> sendTasks = new List<Task>();
List<HttpListenerContext> removeList = new ();
lock (lockObject)
{
Console.WriteLine("Number of Clients: " + clients.Count);
foreach (var client in clients)
{
sendTasks.Add(Task.Run(() =>
{
try
{
HttpListenerRequest request = client.Request;
HttpListenerResponse response = client.Response;
var clientIp = client.Request.RemoteEndPoint.Address.ToString();
var clientPort = client.Request.RemoteEndPoint.Port;
Console.WriteLine($"Sending Data ({buffer.Length}) to {clientIp}:{clientPort}");
response.OutputStream.Write(buffer, 0, buffer.Length);
response.OutputStream.Flush();
}
catch (Exception ex)
{
Console.WriteLine($"Error - Cant send data to Client: {ex.Message}");
removeList.Add(client);
}
}));
}
}
await Task.WhenAll(sendTasks);
lock (lockObject)
{
while (removeList.Count > 0)
{
clients.Remove(removeList.First());
removeList.RemoveAt(0);
}
}
});
}
}
And the JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
</head>
<body>
<h1>
Server Send Event
</h1>
<div id="messages"></div>
<script>
const eventSource = new EventSource('http://192.168.56.245:5000/');
eventSource.onmessage = function(event) {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML += `<p>${event.data}</p>`;
console.log(event.data);
};
eventSource.onerror = function(event) {
console.error("Error receiving messages from SSE:", event);
eventSource.close();
};
</script>
</body>
</html>
Here is the reply from the curl:
* Trying 192.168.56.245:5000...
* Connected to 192.168.56.245 (192.168.56.245) port 5000
> GET / HTTP/1.1
> Host: 192.168.56.245:5000
> User-Agent: curl/8.5.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, OPTIONS
< Access-Control-Allow-Headers: Content-Type
< Content-Type: text/event-stream
< Cache-Control: no-cache
< Connection: keep-alive
< Server: Microsoft-NetCore/2.0
< Date: Mon, 02 Jun 2025 07:32:14 GMT
< Transfer-Encoding: chunked
<
data: 351\n\ndata: 352\n\ndata: 353\n\ndata: 354\n\ndata: 355\n\ndata: 356\n\ndata: 357\n\ndata: 358\n\ndata: 359\n\ndata: 360\n\ndata: 361\n\ndata: 362\n\ndata: 363\n\ndata: 364\n\ndata: 365\n\ndata: 366\n\ndata: 367\n\ndata: 368\n\ndata: 369\n\ndata: 370\n\ndata: 371\n\ndata: 372\n\ndata: 373\n\ndata: 374\n\ndata: 375\n\ndata: 376\n\ndata: 377\n\ndata: 378\n\ndata: 379\n\ndata: 380\n\ndata: 381\n\ndata: 382\n\ndata: 383\n\ndata: 384\n\ndata: 385\n\ndata: 386\n\ndata: 387\n\ndata: 388\n\ndata: 389\n\ndata: 390\n\ndata: 391\n\ndata: 392\n\ndata: 393\n\ndata: 394\n\ndata: 395\n\ndata: 396\n\ndata: 397\n\ndata: 398\n\ndata: 399\n\ndata: 400\n\ndata: 401\n\ndata: 402\n\ndata: 403\n\ndata: 404\n\ndata: 405\n\ndata: 406\n\ndata: 407\n\ndata: 408\n\ndata: 409\n\ndata: 410\n\ndata: 411\n\ndata: 412\n\ndata: 413\n\ndata: 414\n\ndata: 415\n\ndata: 416\n\ndata: 417\n\ndata: 418\n\ndata: 419\n\ndata: 420\n\ndata: 421\n\ndata: 422\n\ndata: 423\n\ndata: 424\n\ndata: 425\n\ndata: 426\n\ndata: 427\n\ndata: 428\n\ndata: 429\
I have solved it! I have done it in ASP and I have had the same Issue.
The Error was here:
SendMessagesToClients("data: " + TimerCounter++ + "\\n\\n");
The Escaping was wrong and I replayed it.
The Solution is:
SendMessagesToClients($"data: {TimerCounter++}\n\n");
The prototyp works now.