頑張れ！ServerSentEvents

がんばれServerSentEvents！！！

そもそもServerSentEventsとはなんでしょうか？と言う疑問があるのではないかと思います。
と言うことで
MDN Web Docsさんの情報から…

Server-Sent Events を使用する Web アプリケーションの開発は、とても簡単です。Web アプリケーションへイベントを送り込む、わずかなコードがサーバ上で必要になりますが、Web アプリケーション側は他の種類のイベントを扱うものとほぼ同じ動作になります。

これと類似した技術には以下のものがあります。

1. WebSocket
2. COMET
3. ポーリング

それぞれに一長一短があり、どれが一番いいんだろうかというのは、Webサービス次第になります。

私がおすすめなのはやはりSSE（ServerSentEvents）です！
リアルタイムにサーバとブラウザが通信してデータが流れるさまを見るのは、楽しいですよ。

なぜにおすすめなのか

お勧めする理由は、色々なんですが実装がまず簡単である（比較的簡単である）こと。
Apacheなどの既存のサーバにおんぶにだっこっである程度できることが大きいです。

WebSocketも考えましたが、サーバーのプロトコルまで実装する気になれず（爆
そして、このWebSocket関連で多い実装方法は
NodeJSとJavaのようです。一部Pythonなどもありましたが、圧倒的な数で「NodeJSによる実装」が大半です。
たしかに、NodeJSの仕組み上、WebSocketとは相性がいいようです。

と…話はずれましたが、おすすめはSSE！SSEです。

IE問題

IE関連、edgeブラウザも含めてこのServerSentEventsには標準対応していません。
そこで、IE、edgeブラウザでも動作するようにラップしてくれる機能が、GitHubなので公開されておりますので
ご利用をお勧めいたします。何で標準で対応しないだよと言う文句はありますが（ぶつぶつ

さぁ始めましょう。
サーバサイドのスクリプトのほうはちょっと割愛して…
では、ローカルのJavaScriptを見ていきましょう。
まず、ServerSentEventsをやり取りするためのオブジェクトを「New」しなければいけません。

var es = new EventSource('/serversentevents.php');

始まりのスクリプトはこうなります。
オブジェクト生成時のデフォルト引数として「サーバサイドスクリプト」へのURLパスを与えます。

その後のデータ受け取りの処理は

es.onmessage = function(e) {
var jdata = JSON.parse(e.data)
}

こんな感じで受け取ります。
サーバサードは、JSONに変換したデータを
dataというものの中に突っ込んで送信することになります。
サーバサイドからは

retry:1000
data: {JSONData}

補足

サーバサイドについて少々補足を。
サーバサードのHead要素としては、以下が必要になります。

Content-Type: text/event-stream
Cache-Control: no-cache