接續上一篇文章寫到關於 SSE ( Server-Sent Events ) ,在實作上我們很常會遇到,不同的人要給他不同的資訊
今天我們來簡單實做這一點,主要我會用 cookie 實務上也方便讓你可以使用 JWT 來做到身分判斷..
這邊我會用兩個按鈕,分別會寫入到 cookie 中 key 為 login_user ,然後在 server 端去判斷
不同的 user 給予不同的訊息
前端 javascript ( 切換身分 + 建立 SSE)
<button onclick="loginAs('donma')">切換為 Donma</button>
<button onclick="loginAs('alice')">切換為 Alice</button>
<script>
let evt = null;
function loginAs(user) {
// 寫入 Cookie
document.cookie = `login_user=${user}; path=/;`;
console.log("切換身分為:" + user);
// 關閉舊的 SSE
if (evt) evt.close();
// 建立新的 SSE
evt = new EventSource("/events");
evt.onmessage = (e) => {
console.log("收到伺服器事件:", e.data);
};
}
</script>
這段程式碼做了幾件事 Cookie 寫入 login_user=donma/alice、SSE 建立後會自動把 Cookie 帶回後端、換身份 = 重建 SSE 連線
接下來就是後端處理的部分
在 Program.cs 中
app.MapGet("/events", async context =>
{
context.Response.Headers.Append("Content-Type", "text/event-stream; charset=utf-8");
context.Features.Get()?.DisableBuffering();
// Cookie 帶入的使用者資料
var user = context.Request.Cookies["login_user"] ?? "訪客";
var timer = new PeriodicTimer(TimeSpan.FromSeconds(1));
while (await timer.WaitForNextTickAsync())
{
await context.Response.WriteAsync(
$"data: 您好 {user},這是您專屬的 SSE 訊息:{DateTime.Now}\n\n"
);
await context.Response.Body.FlushAsync();
}
});
這段程式碼做了幾件事 SSE header 設好、關閉 buffer → 資料馬上送出、從 Cookie 抓使用者、每秒推一筆專屬訊息
沒有複雜架構、也沒有 third-party。
結果
切換身分為:donma
收到伺服器事件: 您好 donma,這是您專屬的 SSE 訊息:2025/08/13 上午 11:29:40
收到伺服器事件: 您好 donma,這是您專屬的 SSE 訊息:2025/08/13 上午 11:29:41
切換身分為:alice
收到伺服器事件: 您好 alice,這是您專屬的 SSE 訊息:2025/08/13 上午 11:29:43
收到伺服器事件: 您好 alice,這是您專屬的 SSE 訊息:2025/08/13 上午 11:29:44
結論 -
這篇主要想示範的是:SSE 其實能做到 "不同使用者拿到不同訊息"
在真實系統裡,通常會用 JWT、資料庫查詢、使用者權限等方式來決定每個人能收到什麼資料
但為了讓概念更清楚,我把整個流程簡化成用 Cookie 來切換身分
重點不在 Cookie,而是在於 SSE 本身就能依照每個使用者的狀態回傳不同內容,不需要 SignalR 或 WebSocket,也不需要複雜框架
你把 Cookie 換成 JWT,把判斷寫進資料庫或驗證流程,一樣能做到真正的 per-user 即時推播
這篇的目的就是先讓你理解核心概念,實務延伸可以再往上去加東西。