PHPでServer Sent Eventを簡単に試してみる


これを読んでるとやたらと楽しそうかつ簡単に導入できそうだったので試してみる。

参考:https://developer.mozilla.org/ja/docs/Server-sent_events/Using_server-sent_events

see_test1.php

<?php
header("Content-Type: text/event-stream\n\n");

$counter = rand(1, 10);
while (1) {
  // "ping" イベントを毎秒送信
  
  echo "event: ping\n";
  $curDate = date(DATE_ISO8601);
  echo 'data: {"time": "' . $curDate . '"}';
  echo "\n\n";
  
  // シンプルなメッセージをランダムな間隔で送信
  
  $counter--;
  
  if (!$counter) {
    echo 'data: This is a message at time ' . $curDate . "\n\n";
    $counter = rand(1, 10);
  }
  
  ob_flush();
  flush();
  sleep(1);
}

index.html

<html>
    <head>
        <title>Server Sent Event テスト</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>
            window.onload = function() {
                var evtSource = new EventSource("sse_test1.php");
                var eventList = document.getElementById("log");
                
                evtSource.onmessage = function(e) {
                    var newElement = document.createElement("li");

                    newElement.innerHTML = "message: " + e.data;
                    eventList.appendChild(newElement);
                }
                evtSource.addEventListener("ping", function(e) {
                    var newElement = document.createElement("li");

                    var obj = JSON.parse(e.data);
                    newElement.innerHTML = "ping at " + obj.time;
                    eventList.appendChild(newElement);
                }, false);
            }
        </script>

    </head>
    <body>
        <div>TODO write content</div>

        <div id ="log"></div>
    </body>
</html>

これで、index.htmlにアクセスしてみるとずらずらとテキストストリームが表示される。


投稿者: しんじ

ベトナムでオフショア開発会社経営中 www.bit-vietnam.com 。サービス開発が趣味。web系は主にPHPで、スマホアプリはswiftで。最近はエンジニア向けの英語勉強webアプリ エングリッシュ e-lish.io を作りました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)