SSE
Server Sent Events_
serverとの接続を確立し続け、clientへデータを送り続けられる
WebSocketと異なり、serverからclientへの一方向のみである
使うのはかなり簡単
Next.jsでのSSEの例
参考
/mrsekut-book-4873119235/236 (6.3 SSE (Server Sent Events))
ChatGPTをぬるぬるにする🐌Server-Sent Eventsの基礎知識
#WIP
https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events
An Introduction to Streaming on the Web – Vercel
https://apidog.com/jp/blog/differences-between-sse-and-websocket/
WebSocketとの違い
eventsource-parser
https://github.com/rexxars/eventsource-parser
ここでみた
server
code:app/sample/route.ts
export async function GET(_req: NextRequest) {
...
return new NextResponse(stream.readable, {
headers: {
'Content-Type': 'text/event-stream',
},
});
Content-typeをtext/event-streamにする
メッセージに含められるフィールド
data
SSE によって送信したいデータ
id
eventのid
EventSource APIのinstanceに保持され、再接続のために使う
再接続時にLast-Event-ID headerに指定される
event
event名
clientで、eventSource.addEventListenerする際にこのevent名を指定する
デフォルトでは「message」というevent名になる
retry
切断に伴う再接続を行うまでの時間
未指定でもブラウザの実装に応じてある程度の間隔で再接続される
client
EventSource APIを使ってAPIにアクセスする