チャットをSSEでやってみようと思っていますが、SSEは下に繰り返し追加されてしまいます。

Question

チャットをAjaxで実装しましたが、失敗する時があるのでSSEでやってみようと思っていますが、Ajaxはチャットが上書きされますが、SSEは下に繰り返し追加されます。

同じチャットは1回出力されればよくて、新しいチャットが2行分追加されたらそれのみ追加で出力したいです。その時古いチャット2行分は表示されなくなる。チャットは直近の18行のみ表示したいです。

●サーバー側
while (true) {
$curDate = date(DATE_ISO8601);
echo "data: The server time is: {$curDate}\n\n";
echo "data: Random number: {$counter}\n\n";
$counter++;

ob_flush();
flush();

sleep(3);

}

●クライアント側
source.onmessage = function(event) {
var resultDiv = document.getElementById('result');
resultDiv.innerHTML += event.data + '<br>';
};

Comments

[yambejp]

チャットの仕様がわからないので何をどう実装すべきか提示できないですね。チャットのデータ保存方法はRDBですかファイルですか？個々の文書にはIDをつける想定ですか？
ちなみにSSEはPHP（もしくはその他サーバーサイドアプリ）側の処理なのでタグにPHPは入れておいてください

[utm.]

全件取得して常に全て上書きすれば簡単なのでは？

[yambejp]

chatとして動作する内容を追記しておきました

Answer 1

簡単なSSEの実装

sseapi.php

<?PHP
header("Cache-Control: no-store");
header("Content-Type: text/event-stream");
date_default_timezone_set("Asia/Tokyo");
while (true) {
  $t=date("Y-m-d H:i:s");
  print "data:{\"event\":\"message\",\"time\":\"$t\"}".PHP_EOL.PHP_EOL;
  ob_end_flush(); 
  flush();
  if ( connection_aborted() ) break;
  sleep(1);
}

上記を利用してjsでこう呼び出す

<script>
const evtSource = new EventSource("sseapi.php",);
evtSource.onmessage = function (event) {
console.log(event.data );
};
</script>

chatの実装

だいぶ端折ってますが最低限動く範囲で実装しておきます
chat.html

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const box=document.querySelector('#box');
  const message=document.querySelector('#message');
  const send=document.querySelector('#send');
  send.addEventListener('click',e=>{
    const usp=new URLSearchParams();
    if(message.value){
      usp.append('m',message.value);
      fetch('sendapi.php?'+usp);
      message.value='';
    }
  });
  message.addEventListener('keydown',e=>{
    if(e.key=="Enter"){
      send.click();
    }
  });
});
const evtSource = new EventSource("sseapi.php",);
evtSource.onmessage = function (event) {
  const json=JSON.parse(event.data);
  box.appendChild(Object.assign(document.createElement('div'),{textContent:json.message}));
  box.scrollTop = box.scrollHeight;
};
</script>
<style>
#box{
width:500px;
height:300px;
background-Color:lightgray;
overflow-Y:scroll;
}
</style>
<div id="box">
</div>
<input id="message"><input type="button" id="send" value="send">

sendapi.php

<?PHP
$m=filter_input(INPUT_GET,"m");
if($m){
  $filename="chat.txt";
  $file = new SplFileObject($filename, "a+");
  $file->fwrite('['.microtime(true).']'.$m.PHP_EOL);
}

sseapi.php

<?PHP
header("Cache-Control: no-store");
header("Content-Type: text/event-stream");
date_default_timezone_set("Asia/Tokyo");
$mt=microtime(true);
while (true) {
  $filename="chat.txt";
  $file = new SplFileObject($filename, "r");
  foreach ($file as $line) {
    if(preg_match("/^\[([\d\.]+)\](.+?)$/",$line,$match)){
      if($match[1]-$mt > 0){
        print "data:{\"message\":".json_encode($match[2])."}".PHP_EOL.PHP_EOL;
      }
    }
    ob_end_flush();
    flush();
  }
  if ( connection_aborted() ) break;
  $mt=microtime(true);
  sleep(1);
}

Comments

[system-r]

チャット日時 5時23分：チャット1
チャット日時 5時21分：チャット2
チャット日時 5時16分：チャット3

ファイルを開いた時に上記の3行分を一度に表示して、
その後
5時25分：チャット0が追加されたら

チャット日時 5時25分：チャット0
チャット日時 5時23分：チャット1
チャット日時 5時21分：チャット2
の3行を表示したいです。

前に出力したチャットを消すことが出来れば
できるのではないかと思いますが。