Q&A
結局データはファイルで保持するわけではない？
そうなると多人数間でのコミュニケーションにならないような・・
また最新の３行を常に提案するというのは結構非効率です。
結局毎回３行分のデータを取ってこないと行けないので、それならsetIntervalで取りに行っても同じでしょう？
php
1●サーバー側（sse.php） 2<?php 3header('Content-Type: text/event-stream'); 4header('Cache-Control: no-cache'); 5 6$count=5; 7$roop_kaisuu=3; 8if($count >= $roop_kaisuu){ 9 $max_count=$count - $roop_kaisuu; 10}else{ 11 $max_count=0; 12} 13 14$id = array(51, 52, 53, 54, 55); 15$chat = array('チャット51', 'チャット52', 'チャット53', 'チャット54', 'チャット55最新'); 16 17while(true){ 18 //3行表示------------------------------------------ 19 for($i= $count-1 ; $i >= $max_count; $i--) { 20 print "data:＜{$id[$i]}＞{$chat[$i]}\n\n"; 21 } 22 23 ob_flush(); 24 flush(); 25 26 sleep(3); 27 //3行表示------------------------------------------ 28} 29?>
html
1●クライアント側（index.html） 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>SSE</title> 8</head> 9<body> 10 <h1>SSE</h1> 11 <div id="result"></div> 12 13 <script> 14 if (!!window.EventSource) { 15 var source = new EventSource('sse.php'); 16 17 source.onmessage = function(event) { 18 var resultDiv = document.getElementById('result'); 19 resultDiv.innerHTML += event.data + '<br>'; 20 }; 21 22 source.onerror = function(event) { 23 console.error("EventSource failed:", event); 24 }; 25 } else { 26 console.log("Your browser doesn't support SSE."); 27 } 28 </script> 29</body> 30</html>
データはmysqlで保存しています。ajaxはたまに失敗して、空データが上書きされてしますので画面が真っ白になりフリーズしてしまいます。それを回避したかったのです。SSEは失敗しにくいと聞きます。
SSEでやる場合は、特定のタイミング以降のデータを出力してトラフィックが少量ですむわけです。
毎回３行表示するとなると結局常にトラフィックが流れてくるのでSSEではあまり効率的になりません。
この質問は解決済みなのでしょうか？
まず、したいことが破綻なくプログラムに落とし込めるように、システム的にみて新しい三行だとか、古い行だとかが実際にユニークな意味で何かというのをはっきりさせないとプログラムは難しいのではないかと思いますよ
回答1件
0
RDBで管理する場合
まず、テーブルから最後の３行を取得して表示 $prev=データ数をカウント while(true){ $current=データ数をカウント if($current>$prev){ テーブルから最後の３行を取得して表示 } $prev=$current; sleep(適当な間隔) }
みたいなフローになるのでは？
投稿2025/05/30 03:37
編集2025/05/30 03:37総合スコア117817
SSEを試行錯誤して実装しましたが、
ボタンを押した時に画面遷移しなくなったので、
window.addEventListener('beforeunload', function(){
source.close();
});
を入れました。するとsleep(2)で2秒間遷移が遅れますが
遷移するようになりました。
ボタンを押した時に発動していたjavascroptの関数が
全て発動しなくなりましたので発動させるように検討中です。
それとAjaxは失敗しやすいのでSSEを試したのですが、
自分の作ったそのコードをchatGPTにコピペすると、間違えていた場合は
正しいコードを出力してくれますので、それを自分のにコピペしたら失敗しにくくなりました。
Ajaxが失敗しやすいのではなく、自分のコードが不完全だったのもあると思います。
あなたの回答
tips
プレビュー
