WebSocket は持続的な双方向メッセージチャネルを提供します。SSE は HTTP 応答内でテキストイベントを送信します。両者ともサーバーからのプッシュが可能ですが、選択の鍵となるのは「誰がプッシュできるか」ではなく、双方向性の方向性、メッセージの種類、リカバリセマンティクス、およびインフラストラクチャのサポートです。
例えば、注文ページは主に状態変化を受信するためのもので、クライアントが注文を変更する場合は通常の HTTP を使用します。このようなケースでは SSE で要件を満たせます。一方、共同編集では頻繁な双方向操作とカスタムメッセージプロトコルが必要となるため、WebSocket の方が自然です。どちらを選択した場合でも、切断後のリカバリとスローコンシューマーの処理はアプリケーション設計に依存します。
| 問題 | 参照ポイント |
| WebSocket は必ず 101 を返すか | HTTP/1.1 Upgrade と h2/h3 拡張 CONNECT |
| send 1回 = 1つのネットワークパケットか | メッセージ、フレーム、転送セグメンテーション |
| mask は秘密を保護できるか | マスクは暗号化ではない。機密性は TLS などに依存 |
| Pong はアプリケーションタスクの健全性を証明するか | プロトコルスタックの生存とビジネス処理は分離される |
| SSE 再接続でイベントの欠落が保証されないか | ID、サーバーログ、消費確認 |
| ページが重くなり、メモリが増加する | 送信キュー、バックプレッシャー、メッセージのマージ |
WebSocket 接続確立:プロトコルを確認してからメッセージを送信
HTTP/1.1 のハンドシェイクでは、GET、Upgrade、Connection フィールドが使用され、クライアントはランダムな 16 バイト値の base64 形式を Sec-WebSocket-Key として提供します。サーバーは 101 と正しい Sec-WebSocket-Accept を返します。サブプロトコルは、クライアントが提供した候補の中から選択する必要があります。
Accept の計算は、Key フィールドのテキスト値と規定の GUID を連結し、SHA1 と base64 を実行します。Key を 16 バイトにデコードしてから連結するわけではありません。これは、サーバーがこのプロトコルアップグレードを理解していることを証明するものであり、証明書の認証や機密性の保証は行いません。
import base64
import hashlib
key = 'dGhlIHNhbXBsZSBub25jZQ=='
guid = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
assert len(base64.b64decode(key)) == 16
accept = base64.b64encode(hashlib.sha1((key + guid).encode('ascii')).digest()).decode('ascii')
assert accept == 's3pPLMBiTxaQ9kYGzzhZRbK+xOo='
wrong = base64.b64encode(hashlib.sha1(base64.b64decode(key) + guid.encode('ascii')).digest()).decode('ascii')
assert accept != wrong
print('RFC ハンドシェイクベクトル通過:', accept)
HTTP/2、HTTP/3 では、双方がサポートする場合、拡張 CONNECT を使用して WebSocket を確立することもできます。成功した応答は、HTTP/1.1 の 101 アップグレードではなく、対応する 2xx になります。これは単一の HTTP ストリームを伝達するものであり、マルチプレクスト接続全体を WebSocket に変更するものではありません。RFC 8441、RFC 9220
メッセージ、フレーム、およびマスク
基本フレームヘッダーには、FIN、拡張保持ビット、opcode、MASK、および長さエンコーディングが含まれます。長さが 0 から 125 の場合は直接表現でき、126 の場合は後に 16 ビットの長さが続き、127 の場合は後に 64 ビットの長さが続き、最上位ビットは 0 である必要があります。マスクが存在する場合は、さらに 4 バイトのキーが続きます。
クライアントからサーバーへのフレームはマスクする必要があります。サーバーから送信されるフレームはマスクしてはならず、TLS 内の WebSocket フレームでもこのルールに従います。各フレームには、新規かつ予測不可能なマスクキーが必要です。以下の例の固定キーは、標準的な教育用ベクトルを再現するためだけに使用されます。
payload = b'Hello'
mask = bytes.fromhex('37fa213d')
masked = bytes(v ^ mask[i % 4] for i, v in enumerate(payload))
wire = bytes([0x81, 0x80 | len(payload)]) + mask + masked
assert wire.hex() == '818537fa213d7f9f4d5158'
assert bytes(v ^ mask[i % 4] for i, v in enumerate(masked)) == payload
assert len(wire) == 11 assert 2 + len(payload) == 7 print('クライアント / サーバー 短フレームバイト:', len(wire), 2 + len(payload))
XOR マスクは、傍受者が内容を復元するのを防ぐものではありません。これは特定のインフラストラクチャ攻撃からの保護のために使用され、機密性は wss などの転送保護に依存します。FIN はメッセージフラグメントシーケンスの終了を示し、制御フレームはその間に挿入できます。制御フレームはフラグメント化できず、ペイロードは 125 バイト以下です。テキストメッセージの UTF-8 有効性は、再構築セマンティクス下でチェックされ、各フラグメントが文字境界で正確に終了することを要求されるわけではありません。RFC 6455:フレームとフラグメント
ハートビート、クローズ、およびビジネス確認
Ping/Pong は、プロトコルチャネルが応答を持っているかどうかを確認します。Pong は要求に応じて Ping データに応答しますが、WebSocket ライブラリはアプリケーションスレッドがビジーの場合でも独立して処理できるため、Pong はデータベースの利用可能性、ルームサブスクリプションの有効性、またはビジネスメッセージの送信完了を保証するものではありません。
ブラウザの WebSocket API には、プロトコル Ping を直接送信する JavaScript メソッドは提供されていません。アプリケーションハートビートが必要な場合は、シーケンス番号と時刻を含むビジネスメッセージを定義し、アプリケーション側で処理して応答します。JSON 文字列を「ping」と呼ぶからといって、それが opcode 9 の制御フレームであると誤解しないでください。WebSockets API
クローズハンドシェイクでは Close フレームを使用します。ステータスコードがある場合は、ネットワークバイトオーダーで 2 バイトを書き込み、その後に任意の UTF-8 理由が続きます。1000 は正常なクローズを示し、1006 はローカルでの異常クローズを表すために使用されますが、Close フレームのステータスコードとしてオンラインで送信することはできません。クローズ理由が、特定のビジネスメッセージの最終結果と等しいわけではありません。
アプリケーション確認には、独立したメッセージ ID、送信結果、または処理済みシーケンス番号を使用する必要があります。例えば、「操作 17 は受信済み」と「操作 17 は永続的にコミット済み」は異なる確認ポイントです。接続が切断された後、最後の send が返されたかどうかだけでなく、操作 ID に基づいて照会またはリプレイする必要があります。
SSE はイベント形式であり、chunked に依存しない
SSE 応答は Content-Type: text/event-stream を使用し、コンテンツは UTF-8 テキストです。フィールド行と空行がイベントを形成します。HTTP/1.1 では chunked を使用して伝達できますが、HTTP/2/3 では対応する DATA ストリームによって伝達されます。「HTTP chunked を使用する必要がある」と定義することはできません。
| 行 | 意味 |
data: ... | イベントデータ。複数行は改行で連結 |
event: alert | イベントタイプ。指定しない場合は message |
id: 42 | イベント ID の更新。リカバリ位置に使用 |
retry: 3000 | ミリ秒単位で再接続時間を設定 |
: keepalive | コメント。ビジネスイベントはディスパッチされない |
| 空行 | 完全なイベントのディスパッチ処理をトリガー |
以下は、2 つの data 行を持つイベントと 1 つのコメントハートビートを生成します。イベント形式の空行は、TCP 接続の終了で代用できません。最後に区切り文字が完了していないコンテンツは、完全なイベントとして自動的に配信されません。
wire = ('id: 42\nevent: alert\ndata: first line\ndata: second line\n\n'
': keepalive\n\n').encode('utf-8')
first, heartbeat, trailing = wire.decode('utf-8').split('\n\n')
fields = {}
values = []
for line in first.splitlines():
name, value = line.split(':', 1)
value = value[1:] if value.startswith(' ') else value
if name == 'data':
values.append(value)
else:
fields[name] = value
assert fields == {'id': '42', 'event': 'alert'}
assert '\n'.join(values) == 'first line\nsecond line'
assert heartbeat.startswith(':') and trailing == ''
print('イベントタイプ / ID / 複数行データ:', fields['event'], fields['id'], repr('\n'.join(values)))
この例は、LF 形式とフィールド連結のみを検証するものであり、完全な EventSource パーサーではありません。実際の形式では、CRLF/CR、空の id、未知のフィールド、および NUL などの処理ルールも定義されています。HTML:イベントストリームの解析
再接続とリカバリ:ID は自動的に履歴ログを生成しない
EventSource は、回復可能な切断後に再接続を試み、記録された Last-Event-ID を添付します。サーバーは ID に基づいたリプレイ機能を実装する必要があります。ログが 1 時間しか保持されていない場合、クライアントが 2 時間オフラインだった場合は、最新のイベントから静かに開始するのではなく、スナップショットの再取得とサブスクライブ継続の明確なプロセスを提供する必要があります。
ブラウザがイベントをディスパッチして位置を更新することは、ビジネスコンシューマーが永続的にコミットしたことを意味しません。ページのクラッシュ、重複リプレイ、処理の失敗などにより、アプリケーションでの重複排除とチェックポイントが必要になる場合があります。EventSource のみに依存して、exactly-once のビジネス配信を提供することはできません。EventSource オブジェクトを再作成しても、旧オブジェクトのリカバリ状態は自動的に保持されません。
SSE コメントはリンクのアクティビティを提供できますが、自動再接続自体はハートビートではありません。サーバーは 204 で再接続意図を終了することもでき、クライアントは close を呼び出すこともできます。アプリケーションは、一時的なネットワーク切断と資格情報の無効化、サービスの永久停止などの条件を区別する必要があります。HTML:EventSource
Last-Event-ID があるのに、なぜスナップショットを再取得するのか?
まず、カーソルを保持起点の 2 つ手前に置くと、金色のイベントはログから取得できなくなります。カーソルを起点の 1 つ手前に移動すると、次のイベントはちょうどログ内にあり、完全なリプレイ条件を満たします。実際のシステムでは、イベント消費とスナップショットサブスクリプションの一貫性も解決する必要があります。
図を準備しています
Last-Event-ID があるのに、なぜスナップショットを再取得するのか?カーソルは単なるリカバリ位置であり、リプレイ機能は実際に保持されたログに由来する。欠落したセグメントが期限切れになった場合、最も古い利用可能なイベントから静かに続行すると、変更を見逃す可能性がある。
{"id":"sse-replay-retention","title":"Last-Event-ID があるのに、なぜスナップショットを再取得するのか?","summary":"カーソルは単なるリカバリ位置であり、リプレイ機能は実際に保持されたログに由来する。欠落したセグメントが期限切れになった場合、最も古い利用可能なイベントから静かに続行すると、変更を見逃す可能性がある。","height":1000,"html":"<h2 data-i18n=\"heading\"></h2><p class=\"intro\" data-i18n=\"intro\"></p><div class=\"control\"><label for=\"cursor\" data-i18n=\"cursor\"></label><output for=\"cursor\" id=\"cursor-value\"></output><input id=\"cursor\" type=\"range\" min=\"0\" max=\"12\" value=\"4\" step=\"1\"></div><div class=\"control\"><label for=\"oldest\" data-i18n=\"oldest\"></label><output for=\"oldest\" id=\"oldest-value\"></output><input id=\"oldest\" type=\"range\" min=\"1\" max=\"12\" value=\"6\" step=\"1\"></div><div class=\"track-row\"><span data-i18n=\"log\"></span><div id=\"log\" class=\"track\"></div></div><div class=\"metrics\"><div><span data-i18n=\"result\"></span><strong id=\"result\"></strong></div></div><p id=\"ranges\" class=\"message\"></p><details class=\"scope\"><summary data-i18n=\"scopeLabel\"></summary><p data-i18n=\"scope\"></p></details>","css":".intro{margin:8px 0 18px;color:var(--muted);font-size:14px}.caption,.hint{font-size:12px;color:var(--muted);margin-top:12px}.control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;margin:14px 0;font-size:13px}.control label{font-size:13px}.control output{color:var(--accent);min-width:5em;text-align:right;font-variant-numeric:tabular-nums}.control input{grid-column:1/-1;width:100%;margin:0}.presets{display:flex;gap:4px;align-items:stretch}.presets button{flex:1 1 0;min-width:0;overflow-wrap:anywhere;font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.actions button{flex:1;min-width:0;font-size:13px;min-height:42px}.copy{display:grid;font-size:14px;margin:16px 0}.copy>*{grid-area:1/1;margin:0}.reserve{visibility:hidden}.scope{margin-top:14px;color:var(--muted);font-size:12px}.scope summary{padding:8px 0;cursor:pointer}.scope p{margin-top:10px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.card{border:1px solid var(--rule);border-radius:9px;padding:14px;min-width:0}.card header{font-size:14px;font-weight:600;margin-bottom:10px}.card button{font-size:12px;width:100%;min-width:0}.card small{display:block;font-size:12px;color:var(--muted)}.card code{font-size:12px;overflow-wrap:anywhere}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.metrics>div{border-left:2px solid var(--accent);padding-left:10px;min-width:0}.metrics span{display:block;min-height:3.2em;color:var(--muted);font-size:12px}.metrics strong{font-size:23px;display:block;font-weight:500;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.formula{border-top:1px solid var(--rule);padding-top:12px;margin-top:14px;font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.value{font:500 20px var(--viz-font-ui)}.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin:12px 0}.legend span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:6px}.legend .second:before{background:var(--second)}.check{display:flex;align-items:center;gap:8px;font-size:13px;margin:12px 0}.check input{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}select,input[type=text],input[type=number]{background:var(--paper);color:var(--ink);font:inherit;font-size:13px;padding:10px;border:1px solid var(--rule);border-radius:7px;max-width:100%;min-width:0}select{width:100%;min-height:42px}.band{height:20px;display:flex;background:var(--surface);border-radius:4px;overflow:hidden}.band i{height:100%;display:block;background:var(--accent);transition:width .25s}.band i.second{background:var(--second)}button:disabled{cursor:default}.status{font-size:13px;min-height:4.8em}.mono{font-family:var(--viz-font-mono);font-variant-numeric:tabular-nums}.muted{color:var(--muted)}\n@media(max-width:480px){.two{gap:8px}.card{padding:12px 9px}.actions button,.presets button{font-size:12px}.metrics strong{font-size:20px}.metrics{gap:8px}}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}\n.track-row{margin:16px 0}.track-row>span{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}.track{display:flex;gap:5px;min-width:0}.cell{flex:1;min-width:0;min-height:48px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);display:flex;align-items:center;justify-content:center;text-align:center;padding:5px 3px;font-size:12px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.cell.on{background:var(--accent-soft);border-color:var(--accent)}.cell.gold{background:var(--second-soft);border-color:var(--second)}.cell.empty{border-style:dashed;color:var(--muted)}.cell.error{border-color:var(--second);text-decoration:line-through}.choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0}.choices button{min-width:0;padding:10px 4px;font-size:12px;overflow-wrap:anywhere}.choices button[aria-current=true]{border-color:var(--accent);background:var(--accent-soft)}.relation{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:6px;margin:12px 0}.relation .cell{min-height:72px}.relation>i{text-align:center;font-style:normal;color:var(--accent)}.readout{font-size:13px;white-space:pre-line;min-height:6.4em;overflow-wrap:anywhere}.plot{position:relative;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0;margin:18px 0}.plot-row{height:28px;position:relative;margin:4px 0;background:var(--surface)}.plot-row i{position:absolute;inset-block:5px;background:var(--accent);min-width:2px;transition:width .2s,left .2s}.plot-row b{position:relative;padding:4px 6px;font:11px/28px var(--viz-font-ui);background:var(--paper);border-radius:3px}.axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}\n\n/* Action labels must remain readable across locales and narrow embeds. */\n.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}\n.actions button{overflow-wrap:anywhere;white-space:normal;min-height:58px;padding:8px}\nbutton{overflow-wrap:anywhere}\n@media(min-width:640px){.actions{grid-template-columns:repeat(3,minmax(0,1fr))}}\n\n.metrics span{overflow-wrap:anywhere}\n.panel{border:1px solid var(--rule);border-radius:9px;padding:12px;margin:14px 0;min-width:0}.panel h3{font-size:13px;margin:0 0 10px;color:var(--muted)}.source{font:13px/1.8 var(--viz-font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0}.source mark{background:var(--accent-soft);color:var(--ink);border-bottom:2px solid var(--accent)}.source .fault{background:var(--second-soft);border-color:var(--second)}.diagram{display:block;width:100%;height:auto;max-height:320px;margin:14px 0;overflow:visible}.diagram text{fill:var(--ink);font:12px var(--viz-font-ui)}.diagram .edge{stroke:var(--muted);stroke-width:1.5;fill:none}.diagram .edge.on{stroke:var(--accent);stroke-width:3}.diagram .node{fill:var(--surface);stroke:var(--rule);stroke-width:1.5}.diagram .node.on{fill:var(--accent-soft);stroke:var(--accent)}.diagram .node.gold{fill:var(--second-soft);stroke:var(--second)}.log{font:12px/1.8 var(--viz-font-mono);white-space:pre-line;overflow-wrap:anywhere;min-height:7.2em}.table{display:grid;gap:5px;margin:14px 0}.table .tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.table .tr>*{padding:8px 5px;background:var(--surface);border-radius:4px;min-width:0;overflow-wrap:anywhere;font-size:12px}.table .tr .on{background:var(--accent-soft)}.table .tr .gold{background:var(--second-soft)}.choices button{min-height:44px}.metrics strong{min-height:1.6em}.code-line{display:block}.code-line.on{background:var(--accent-soft);border-left:2px solid var(--accent);padding-left:6px}.status-badge{font-size:12px;color:var(--accent)}.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tile-grid .cell{min-height:40px}.actions button{min-height:48px}.form-field{display:grid;gap:8px;margin:14px 0;font-size:13px}.form-field input{width:100%;font-family:var(--viz-font-ui)}.metrics.three{grid-template-columns:repeat(3,minmax(0,1fr))}.formula{min-height:3.2em}.presets{flex-wrap:wrap}.presets button{flex-basis:25%;min-height:44px}\n\n.budget{display:flex;height:28px;margin:16px 0;background:var(--surface);border-radius:5px;overflow:hidden}.budget i{display:block;background:var(--accent);transition:width .2s}.budget i.gold{background:var(--second)}.intervals{margin:16px 0}.interval{position:relative;height:36px;background:var(--surface);margin:6px 0;border-radius:4px;overflow:hidden}.interval i{position:absolute;height:100%;background:var(--accent-soft);border-left:2px solid var(--accent)}.interval i.gold{background:var(--second-soft);border-color:var(--second)}.interval span{position:relative;z-index:1;font:12px/36px var(--viz-font-ui);padding-left:7px}.table .tr>*{min-height:4.8em}.formula{white-space:pre-line;min-height:7.2em}.actions:has(>button:only-child){grid-template-columns:1fr}.metrics strong{min-height:3.2em}.rangegrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin:14px 0}.rangegrid .cell{min-height:30px;padding:3px 1px;font-size:10px}.message{min-height:7.2em;white-space:pre-line;font:13px/1.8 var(--viz-font-ui);overflow-wrap:anywhere}\n/* Allow CJK hanging punctuation without overflowing a metric's border box. */\n.metrics>div{padding-right:4px}.metrics span{line-break:anywhere}\n\n#log{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.metrics strong{font-size:17px}","js":"const $=s=>document.querySelector(s);const set=(id,v)=>$('#'+id).textContent=v;const t=k=>viz.t(k);function cells(id,values){$('#'+id).replaceChildren(...values.map(v=>{const e=document.createElement('div');e.className='cell '+(v.cls||'');e.textContent=v.text;e.title=v.title||v.text;return e;}));}function pressed(mode){document.querySelectorAll('[data-mode]').forEach(e=>e.setAttribute('aria-pressed',String(e.dataset.mode===mode)));}const esc=s=>String(s).replace(/[&<>\"']/g,c=>({'&':'&','<':'<','>':'>','\"':'"',\"'\":'''}[c]));const fmt=s=>'{'+[...s].sort().join(', ')+'}';function graph(id,nodes,edges){const el=$('#'+id);el.setAttribute('viewBox','0 0 360 200');el.innerHTML='<defs><marker id=\"arrow-'+id+'\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"5\" markerHeight=\"5\" orient=\"auto-start-reverse\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"var(--muted)\"/></marker></defs>'+edges.map(e=>{const a=nodes[e[0]],b=nodes[e[1]],dx=b.x-a.x,dy=b.y-a.y,d=Math.hypot(dx,dy)||1;if(edges.some(r=>r[0]===e[1]&&r[1]===e[0])){const nx=-dy/d,ny=dx/d;return '<path class=\"edge '+(e[2]?'on':'')+'\" d=\"M '+(a.x+dx/d*22+nx*12)+' '+(a.y+dy/d*22+ny*12)+' Q '+((a.x+b.x)/2+nx*38)+' '+((a.y+b.y)/2+ny*38)+' '+(b.x-dx/d*25+nx*12)+' '+(b.y-dy/d*25+ny*12)+'\" marker-end=\"url(#arrow-'+id+')\"/>';}return '<line class=\"edge '+(e[2]?'on':'')+'\" x1=\"'+(a.x+dx/d*25)+'\" y1=\"'+(a.y+dy/d*25)+'\" x2=\"'+(b.x-dx/d*28)+'\" y2=\"'+(b.y-dy/d*28)+'\" marker-end=\"url(#arrow-'+id+')\"/>';}).join('')+nodes.map(n=>'<g><circle class=\"node '+(n.cls||'')+'\" cx=\"'+n.x+'\" cy=\"'+n.y+'\" r=\"25\"/><text x=\"'+n.x+'\" y=\"'+(n.y+4)+'\" text-anchor=\"middle\">'+esc(n.name)+'</text>'+(n.sub?'<text x=\"'+n.x+'\" y=\"'+(n.y+43)+'\" text-anchor=\"middle\">'+esc(n.sub)+'</text>':'')+'</g>').join('');}function table(id,rows){$('#'+id).classList.add('table');$('#'+id).replaceChildren(...rows.map(r=>{const row=document.createElement('div');row.className='tr';r.forEach(x=>{const c=document.createElement('div');if(typeof x==='object'){c.textContent=x.text;c.className=x.cls||'';}else c.textContent=x;row.append(c)});return row;}));}function band(id,parts,total){$('#'+id).replaceChildren(...parts.map((p,i)=>{const e=document.createElement('i');e.style.width=(100*p.value/total)+'%';e.className=i%2?'gold':'on';e.title=p.name+': '+p.value;return e}));}function intervals(id,items,total){$('#'+id).replaceChildren(...items.map(p=>{const row=document.createElement('div');row.className='interval';const bar=document.createElement('i');bar.style.left=(100*p.start/total)+'%';bar.style.width=(100*(p.end-p.start)/total)+'%';bar.className=p.cls||'';const label=document.createElement('span');label.textContent=p.label;row.append(bar,label);return row;}));}function draw(){const c=+$('#cursor').value,o=+$('#oldest').value,missing=c<o-1;set('cursor-value',c);set('oldest-value',o);cells('log',Array.from({length:12},(_,i)=>({text:i+1,cls:i+1<=c?'':i+1<o?'gold':'on'})));set('result',t(missing?'snapshot':'replay'));set('ranges','missing: '+(missing?'['+(c+1)+','+o+')':'∅')+'\\nreplay: '+(c<12?'['+Math.max(c+1,o)+',13)':'∅'));$('#result').dataset.gap=String(missing);}document.querySelectorAll('input').forEach(e=>e.oninput=draw);draw();","audio":false,"strings":{"cursor":"クライアント Last-Event-ID","heading":"Last-Event-ID があるのに、なぜスナップショットを再取得するのか?","intro":"クライアントカーソルとサーバー側保持起点を変更し、連続イベントを完全に補完できるか確認する。","log":"ログ(青:リプレイ必要;金:欠落)","oldest":"サーバー側 最古保持 ID","replay":"ログで完全リプレイ可能","reset":"リセット","result":"リカバリ方法","scope":"イベント ID は連続する整数 1…12。Last-Event-ID はディスパッチ済み位置を表し、ビジネスコミットとは異なる。後続はすべてリプレイ可能と仮定。フィルタリング/空 ID/新しい EventSource オブジェクト状態なし。","scopeLabel":"モデル範囲と規約","snapshot":"スナップショットまたは明確な補償が必要"}}
ブラウザ認証とソースチェック
ブラウザの WebSocket コンストラクタとネイティブ EventSource は、任意のカスタムリクエストヘッダーインターフェースを提供しないため、Authorization を直接追加できるかのように見せかけることはできません。EventSource は適用可能な Cookie と withCredentials 設定を使用できます。クロスオリジン読み取りは CORS に従います。fetch を使用してイベントストリームを自分で読み取る場合、解析、リカバリ、再接続もコードで処理する必要があります。
WebSocket ハンドシェイクは、通常の CORS 許可ヘッダーを使用してソースを認証するものではありません。ブラウザ Cookie を使用して認証する場合、サーバーは Origin とビジネス権限を検証して、他のサイトがユーザー資格情報を借用して接続を確立するのを防ぐ必要があります。ブラウザ以外のクライアントは Origin を自己申告するため、これもユーザー認証に代わるものではありません。
資格情報が期限切れになった後、既存の長寿命接続をどのように処理するかは、プロトコルの合意によるものです:再認証、切断後の再接続、またはメッセージごとの権限検証。ハンドシェイク時に一度だけチェックして接続を無限に存続させると、アイデンティティの取り消しと権限の更新が適用されにくくなります。
バックプレッシャーとプロキシ:プッシュできるからといって無限にキューに入れられるわけではない
古典的な WebSocket API の send は送信キューに追加され、bufferedAmount は未送信データを観察するのに役立ちますが、ビジネスプロデューサーに完全な待機可能なバックプレッシャープロトコルを自動的に提供するわけではありません。受信側でも、メッセージサイズと消費キューを制限して、低速な処理によるメモリ増加を防ぐ必要があります。
例えば、ダッシュボードは 1 秒間に 100 回更新されるが最新状態のみを表示する必要がある場合、キーに基づいて中間更新をマージできます。監査イベントは随意に破棄できないため、キューの上限、永続ログ、およびスローコンシューマーのリカバリプロセスを設定する必要があります。2 つのニーズに同じ「キューがいっぱいなら破棄」という戦略を使用すべきではありません。
プロキシのバッファリングにより、SSE がバッチ処理されてから配信される可能性があります。アイドルタイムアウトにより、データのない長寿命接続が閉じられる可能性があります。ハートビート周期は、フルチェーンの最短アイドル制限とネットワークのジッターを考慮して決定する必要があり、15 秒を固定してコピーするべきではありません。デプロイメントの排空では、最大待機時間と再接続のバックオフを定義し、同時再起動による再接続ストームを避ける必要があります。
permessage-deflate は WebSocket テキストのサイズを削減できますが、CPU、状態、および圧縮情報漏洩のトレードオフが増加します。コンテキストテイクオーバーがメッセージ間で履歴を保持するかどうかは、ネゴシエーションによって決定され、「圧縮を有効にする」ことを無条件の利益として扱うべきではありません。RFC 7692
選択基準
| 要件 | WebSocket | SSE |
| クライアントとサーバー間の頻繁な双方向メッセージ交換 | 直接双方向チャネル | クライアント操作は通常 HTTP を経由 |
| 生バイナリコンテンツ | バイナリメッセージをサポート | テキスト形式。別途エンコードまたはダウンロードが必要 |
| ブラウザのリカバリサポート | アプリケーション側で再接続とリカバリを実装 | ネイティブ再接続と Last-Event-ID。リプレイはサーバー側で実装 |
| インフラ要件 | 実際の Upgrade/CONNECT 伝達をサポート | 長寿命応答とタイムリーなリフレッシュをサポート |
| ビジネス信頼性 | カスタム ACK、重複排除、リプレイ | 消費セマンティクス、重複排除、およびログも必要 |
小規模で低頻度の更新にはポーリングを使用することもあります。サーバープッシュの要件があるからといって、自動的に WebSocket が選択されるわけではありません。まず、レイテンシ、メッセージの方向、損失許容度、およびリカバリコストを明確にしてから、伝達方式を選択します。
継続的な参照