PHP　掲示板の投稿をリアルタイムで更新する機能を実装したい。

タイトル通りなのですが掲示板の投稿でスレッドを見ていたら新しい投稿が来たらその場でブラウザを更新せず下に追加してほしいのですがこれを実装するには何をするのが定番なのでしょうか？調べましたがAjax,javascirpt? などある見たいですがイマイチどれを使ったらいいかわかりません。この場合最適なものはどれなのでしょうか？

※提示コードはスレッドの投稿を列挙するソースコードです。

参考サイト: https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
参考サイト：　https://minagawa.design/blog/webdesign/js-php-date-realtime/#JavaScriptHTML

php
1<html lang=ja>
2<head>
3<meta charset="utf-8">
4
5<link rel="stylesheet" href="style.css">
6<title>send</title>
7</head>
8  <body>
9<?php
10session_cache_limiter('none');
11ini_set("display_errors",1);
12error_reporting(E_ALL);
13session_cache_limiter('none');
14session_start();       
15
16Require_once "renderer.php";
17Require_once "dataBase.php";
18$viewNum  = 10;
19
20$url = isset($_GET["title"]) ? $_GET["title"] : NULL; //
21if(isset($_GET["page"]) == false)
22{
23    
24    $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8';    
25    $dbh = new PDO($dsn,"root","Shigurechan7240");
26    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
27    $sql = 'SELECT * FROM Post WHERE thread_UUID=:id'; 
28    $stmt = $dbh->prepare($sql);
29    $stmt->bindValue(':id', $url, PDO::PARAM_STR);
30    $stmt->execute();
31    
32    $totalPageNum = ceil($stmt->rowCount() / $viewNum);
33    $pageNumber = $totalPageNum -1;
34
35    if($pageNumber < 0)
36    {
37        $pageNumber = 0;
38    }
39}
40else
41{
42       
43    $pageNumber = $_GET["page"];
44}
45   ?>
46
47
48<?php 
49try
50{
51    
52    $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8';    
53    $dbh = new PDO($dsn,"root","Shigurechan7240");
54    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 
55    
56    //post
57    $post = null;
58    $stmt = null;
59    if($pageNumber == NULL)
60    {        
61        $sql = 'SELECT * FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC'; 
62        $stmt = $dbh->prepare($sql);
63        $stmt->bindValue(':id', $url, PDO::PARAM_STR);       
64        $stmt->execute();
65        $post = $stmt->fetchAll();
66        
67        
68        $t = $stmt->rowCount() % $viewNum;
69        $r = 0;
70        if($t > 0)
71        {
72            $r = $stmt->rowCount() - $t;
73        }
74        else if($t == 0)
75        {
76            $r = $stmt->rowCount() - $viewNum;
77            if($r < 0)
78            {
79                $r = 0;
80            }
81                
82        }
83        else if($t < 0)
84        {
85            
86            $r = 0;
87        }
88
89        
90        $sql = 'SELECT * FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC LIMIT :limit OFFSET :offset '; 
91        $stmt = $dbh->prepare($sql);
92        $stmt->bindValue(':id', $url,PDO::PARAM_STR);
93        $stmt->bindValue(':limit', $viewNum, PDO::PARAM_INT);
94        $stmt->bindValue(':offset', $r, PDO::PARAM_INT);        
95        $stmt->execute();
96        $post = $stmt->fetchAll();
97        
98        $_SESSION["pageNumber"] = $r;
99        
100        $postNum = $stmt->rowCount(); //全部のページ数
101        $pageNum = $viewNum;               //１ページの表示件数
102        $totalPageNum = ceil($postNum / $pageNum);        
103    }
104    else
105    {
106        $sql = 'SELECT * FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC LIMIT :limit OFFSET :offset '; 
107        $stmt = $dbh->prepare($sql);
108        $stmt->bindValue(':id', $url,PDO::PARAM_STR);
109        $stmt->bindValue(':limit', $viewNum, PDO::PARAM_INT);
110        $stmt->bindValue(':offset', $pageNumber * $viewNum, PDO::PARAM_INT);
111        $_SESSION["pageNumber"] = $pageNumber;
112        $stmt->execute();
113        $post = $stmt->fetchAll();
114    }
115}
116catch(PDOException $e)
117{
118    die($e->getMessage());
119}
120?>
121
122
123<!-------------------------------- スレッドを列挙 -------------------------------->
124<?php
125    
126    
127Renderer_TopBar($post[0]);
128
129for($i = 0; $i <  $stmt->rowCount(); $i++)        
130{
131    
132    $sql = 'SELECT * FROM Account WHERE UUID =:id';  
133    $stmt2 = $dbh->prepare($sql);
134    $stmt2->bindValue(':id',$post[$i]["create_UUID"] , PDO::PARAM_STR);
135    $stmt2->execute();
136    $account = $stmt2->fetch();   
137
138            
139    if($post[$i]['enable'] == false)
140    {
141        //削除された投稿
142        Renderer_PostThread_Delete($post[$i]);
143    }
144    else if(isset($_SESSION["login"])  == true)
145    {
146        if(strcmp($_SESSION['UUID'],$account['UUID']) == 0)
147        {
148            //自分の投稿
149            Renderer_PostThread($post[$i]);
150        }                         
151        if(strcmp($_SESSION['UUID'],$account['UUID']) != 0)
152        {
153            //他人の投稿
154            Renderer_PostThread_Other($post[$i],$_SESSION['UUID']);
155        }
156    }
157    else
158    {
159        // ログインしていない時
160        Renderer_PostThread_Logout($post[$i]);            
161    }
162
163}
164?>    
165<br>
166<br>
167
168<?php
169
170
171
172$sql = 'SELECT * FROM Post WHERE thread_UUID=:id'; 
173$stmt = $dbh->prepare($sql);
174$stmt->bindValue(':id', $url, PDO::PARAM_STR);
175$stmt->execute();
176
177$postNum = $stmt->rowCount(); //全部のページ数
178$totalPageNum = ceil($postNum / $viewNum);
179$allPage = $totalPageNum;
180
181//print($totalPageNum);
182
183if((isset($_SESSION['login']) == true) && (($pageNumber == ($totalPageNum - 1)) || (($pageNumber == NULL))))
184{
185?>
186    <h3>投稿</h3>
187
188    <form action="submit.php" method="post">
189    <input type="hidden" name="title" value=<?php echo $url; ?> >
190    <input type="hidden" name="nowPage" value=<?php echo $pageNumber; ?> >
191                            
192    <p>文章</p>      
193    <textarea name="comment"></textarea > 
194    <br>
195    <p><button type="submit">送  信</p>
196        
197    </form> 
198
199<?php
200}
201else if( (isset($_SESSION['login']) == false) && ($pageNumber == $totalPageNum - 1 ) )
202{   
203?>
204    <h3>投稿するにはログインしてください。</h3>
205    
206<?php
207}    
208?>
209
210<?php
211
212for($i = 0; $i < $totalPageNum; $i++)
213{
214?>
215    
216    <a href="thread.php?title=<?=$url?>&page=<?=$i?>" > <?php echo $i ?></a>&nbsp &nbsp;
217<?php
218
219}
220?>
221    </body>  
222</html>
223

m.ts10806

2022/02/20 09:54

まずやってみてください。何度も言ってますが「最適」とかないんで。それに、これまでの感じから普通の掲示板もまともに作れてるとは思えませんが。

m.ts10806

2022/02/20 09:55

無駄にコードだけバッと全部出して「作ってください」という作業依頼ですか？このコードと要件との関連性は何ですか？赤の他人しか見ないので、読んだだけで全部が繋がるような説明する義務を果たしてください。

kawax

2022/02/20 10:30

算数の勉強してる小学生がいきなり高校レベルの数学できるわけがない。何事も順番。

退会済みユーザー

2022/02/20 12:37

webブラウザのプッシュ通知とかロングポーリングとかWebSocketってわかる？これらの用語について一定の説明ができるくらいに下調べしてほしいです。手取り足取り教えるほど暇な人はいないと思うので。

行動規範の内容に同意します

回答1件

こんな感じです。

・サーバ側：あらかじめコメント一覧を返す API を用意しておく (パラメータで日時を受け取る)
・ブラウザ側：Javascript + Ajax で、N秒おきに最新コメントを取得する API を叩く (パラメータは前回取得したタイムスタンプ。例: /foo/bar/getmessage?last_timestamp=20220220-112233
・サーバ側：パラメータでタイムスタンプ以降に追加されたコメントを返す (JSON などで)
・ブラウザ側：受け取った JSON に従い、DOM でごりごり画面を更新する (新着コメントを追加する)。

定番と言うなら React・Vue・Promise 等がいまどきですが、最初からそれをやっても多分わからないと思うので↑を先にやったほうがよいでしょう。

投稿2022/02/20 10:18