Server-Sent Events に光を

採用機会がなかなかやってこない Server-Sent Events (以下SSE) を使用してみたときのメモです。
想定している環境は nginx + php-fpm です。

SSE を利用すると、サーバーからウェブページにメッセージをプッシュ送信できます。

ここに下手な説明を書くよりも翻訳済みの MDN を見ていただいた方が何万倍も分かりやすいはず。

Server-sent events – Web API | MDN

https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events

SSE API を利用すると、SSE を簡単に扱うことができます。

今回は、オンラインゲームのログテキストっぽいものをサーバーから受信し、ページに表示するページを作成してみます。

ログテキストの内容は架空のものです。

ログっぽいものを表示するページ

上記で作成した HTML と PHP をブラウザで表示するとこうなります。

やっていること

index.html でやっていることは、「読込」ボタンを押すとサーバーからのメッセージを待機する状態になります。

サーバーからメッセージを受信する度に onmessage イベントが発火し、ログが追加されていきます。

メッセージを待つ間はサーバーとの接続が維持され、10件受信すると接続を解除します。

イベントは “event:%s\n” の形式で色々作れます。

ここでは control、invite、system を イベントとして addEventListener に登録し、ログの色を変えたり接続を切ったりさせています。

はまったこと

地味にはまったのが、nginx で出力がバッファリングされてしまいリアルタイムとは程遠いタイミングでしかメッセージを受信できなかったこと。

その場合は X-Accel-Buffering: no を指定することでバッファリングさせないようにできます。

header(‘X-Accel-Buffering: no’);

MS Edge 非対応がつらい

一方通行ではありますが、非常に簡単に実装できる SSE 。

Web アプリケーション として実装するには MS Edge の非対応がやっぱつらいわ…です。

MS的には WebSocket でいいじゃんってことなんでしょうか。

SSE だけで完結することはなかなかないと思いますが、便利なものは積極的に使いたい。

SSE に光を。

星に電力を (暑いので)