php・mysql・javascriptを使ったチャットシステムの作り方を載せてみました。
名前と文章を入力して送信ボタンを押してください。
| 名前 | 投稿日時 | 文章 |
|---|---|---|
| ee1 | 2018-11-20 14:09:53 | uu |
| あいうえ | 2018-11-19 13:57:27 | 弁財天 |
| ｋ | 2018-11-19 11:13:52 | ｋ |
| は | 2018-11-17 19:47:44 | あああ「 |
| ha | 2018-11-15 14:35:06 | aaaaaa |
| ha | 2018-11-15 14:33:50 | aaaaaa |
| た | 2018-11-14 12:09:49 | あ |
| あああ | 2018-11-13 23:28:05 | まま |
| あああ | 2018-11-13 23:26:36 | ｓｓｓ |
| あああ | 2018-11-13 23:23:54 | いいい |
| あああ | 2018-11-13 23:21:26 | ｓｓｓ |
| aa | 2018-11-13 18:04:31 | aa |
| aa | 2018-11-13 17:59:06 | aa |
| aa | 2018-11-13 17:59:04 | aa |
| ファsf | 2018-11-13 14:24:41 | fas |
| いいいい | 2018-11-13 14:18:50 | なんでも |
| ファsf | 2018-11-13 14:16:38 | ファファ |
| あ | 2018-11-13 12:23:56 | 説明会 |
| kint | 2018-11-13 06:00:16 | あああ |
| test | 2018-11-12 14:21:50 | very good |
| test | 2018-11-12 14:21:39 | hogehoge |
| dfdf | 2018-11-11 01:47:12 | dfdf |
| ある | 2018-11-09 12:29:58 | ちわっす |
| aaa | 2018-11-08 16:58:01 | </html> |
| bbb | 2018-11-08 16:56:19 | a |
| bbb | 2018-11-08 16:56:03 | あの... |
| aaa | 2018-11-08 16:55:06 | atares |
| bbb | 2018-11-08 16:54:19 | お～い |
| bbb | 2018-11-08 16:54:14 | 実名書いちゃうぞ |
| bbb | 2018-11-08 16:53:50 | こんにちは |
| aaa | 2018-11-08 16:53:31 | こんにちは |
| aaa | 2018-11-08 15:00:48 | 000000000. |
| aaa | 2018-11-08 15:00:16 | 7879879879879 |
| aaa | 2018-11-08 14:59:45 | 11111111111111 |
| aaa | 2018-11-08 14:59:43 | sdfsafddf |
| aaa | 2018-11-08 14:59:41 | sfsafsfdsadf |
| zzz | 2018-11-08 14:41:28 | aaaaa |
| lala | 2018-11-07 14:38:18 | blah blah blah |
| え | 2018-11-07 07:59:24 | え |
| え | 2018-11-07 07:59:22 | え |
| あ | 2018-11-06 16:49:23 | あ |
| ara | 2018-11-06 15:47:54 | ufufu |
| １ | 2018-11-05 14:10:25 | １ |
| aaa | 2018-11-05 10:16:50 | ddd |
| あああ | 2018-11-04 00:49:02 | あああ |
| あ | 2018-11-02 14:51:06 | ふふふ |
| soi | 2018-11-02 14:11:17 | so-su |
| あ | 2018-11-02 09:40:41 | ふふふ |
| Y | 2018-11-01 22:22:54 | R |
| ににに | 2018-11-01 17:27:47 | abd |
| あ | 2018-11-01 13:49:35 | てすと |
| aaa | 2018-10-31 16:34:27 | aaaaaaaaaa |
| ああああ | 2018-10-30 13:02:14 | ああああ |
| くりる | 2018-10-27 19:28:54 | <b>www</b> |
| ああ | 2018-10-26 16:11:54 | iii |
| がｈｑｊ | 2018-10-25 19:36:37 | ははっははっは |
| ケイン | 2018-10-25 14:42:46 | <script> alert("aaa")</script> |
| ケイン | 2018-10-25 14:42:41 | <script> alert("aaa")</script> |
| ケイン | 2018-10-25 11:50:22 | <script> alert("aaa")</script> |
| ケイン | 2018-10-25 11:49:36 | こうたんよ |
| ああああ | 2018-10-25 10:45:28 | ああああああああああああああああああああああああああああああああああああああああ |
| ｇ | 2018-10-24 23:18:09 | ｇ |
| ｇ | 2018-10-24 23:16:48 | ｇ |
| ore | 2018-10-24 20:03:51 | ore |
| あ | 2018-10-24 12:14:33 | あ |
| a | 2018-10-23 14:22:40 | 弔 |
| a | 2018-10-23 14:22:02 | a |
| テスト | 2018-10-22 00:31:05 | テスト |
| test | 2018-10-21 20:54:36 | test |
| ああｗｗ | 2018-10-21 16:05:19 | あいうえおの音楽 |
| hoge | 2018-10-21 15:08:03 | test |
| hoge | 2018-10-21 15:07:45 | test |
| hoge | 2018-10-21 15:07:13 | test |
| test | 2018-10-20 07:55:16 | hogehoge |
| テスト | 2018-10-19 21:02:55 | これはテストです。 |
| test | 2018-10-19 12:12:21 | 1 |
| えええ | 2018-10-18 17:53:01 | わああ |
| えええ | 2018-10-18 17:51:53 | ひゃひゃはやひゃはやはｙ |
| あああ | 2018-10-18 16:42:02 | aaあいうえお かきくけこ なにぬねの さしすせと たちつえて |
| えええ | 2018-10-18 15:33:41 | うううう |
| えええ | 2018-10-18 15:33:31 | あああ |
| あああ | 2018-10-18 15:33:27 | あいうえ |
| あああ | 2018-10-18 15:33:18 | えええ |
| あああ | 2018-10-18 15:33:12 | ああああ |
| test | 2018-10-18 01:45:14 | test |
| taku | 2018-10-17 10:23:54 | aiueo |
| おなら | 2018-10-17 00:29:02 | ぶー |
| おなら | 2018-10-17 00:28:10 | ぶー |
| ええええ | 2018-10-16 15:46:50 | あああああ |
| d | 2018-10-16 14:31:53 | d |
| aaa | 2018-10-16 01:13:17 | aaa |
| あ | 2018-10-15 20:25:49 | い |
| テスト | 2018-10-15 18:36:12 | テスト |
| TEST | 2018-10-14 20:40:31 | TEST |
| TEST | 2018-10-14 20:40:12 | HELLO! |
| ロウッチ | 2018-10-13 14:49:20 | うおお |
| 金欠マン | 2018-10-12 19:13:31 | あ |
| 金欠マン | 2018-10-12 19:12:50 | てｓｔ |
| ｓｓｓ | 2018-10-11 17:10:35 | 使えない |
| user | 2018-10-11 17:05:12 | aiueo |
CREATE TABLE `chat` ( `chid` int(10) unsigned auto_increment, `name` varchar(255), `text` text, `date` datetime, PRIMARY KEY (`chid`) ) AUTO_INCREMENT=1000000001
<? if(!isset($_SESSION)) session_start(); $msg = "<p>名前と文章を入力して送信ボタンを押してください。</p>"; $name = isset($_SESSION["name"]) ? $_SESSION["name"] : "" ; $name = isset($_POST["name"]) ? $_POST["name"] : $name ; $text = isset($_POST["text"]) ? $_POST["text"] : "" ; if($action){ if(!$name) $err[] = "名前 を入力してください"; if(mb_strlen($name)>4) $err[] = "名前 は4文字以内で入力してください"; if(!$text) $err[] = "文章 を入力してください"; if(mb_strlen($text)>50) $err[] = "文章 は50文字以内で入力してください"; if(!count($err)){ // セッションに名前を登録 $_SESSION["name"] = $name; mysql_query("insert into chat set date = now(), name = '".addslashes($name)."', text = '".addslashes($text)."'"); }else{ $msg = showerr($err); } } // チャット内容の取得 $_chat = array(); $rst = mysql_query("select * from chat order by date desc limit 100"); while($col=mysql_fetch_assoc($rst)) $_chat[$col["chid"]] = $col; mysql_free_result($rst); // 直近のIDをセッションに登録 $_SESSION["max_chid"] = count($_chat) ? max(array_keys($_chat)) : 0 ; ?>
<?=$msg?> <form action="/php/chat.html" method="post"> <table summary="送信フォーム"> <tr><th>名前</th><td><?if($name){?><?=$name?><?}else{?><input type="text" name="name" style="width:100%" /><?}?></td></tr> <tr><th>文章</th><td><input type="text" name="text" style="width:100%" /></td></tr> </table> <p><input type="submit" value="送信" class="button" /></p> <input type="hidden" name="action" value="1" /> </form> <table summary="チャット"> <tr><th style="width:100px">名前</th><th style="width:180px">投稿日時</th><th>文章</th></tr> <tbody id="board"> <?foreach($_chat as $val){?> <tr><td><?=htmlspecialchars($val["name"])?></td><td><?=$val["date"]?></td><td><?=htmlspecialchars($val["text"])?></td></tr> <?}?> </tbody> </table>
<script type="text/javascript"> // 名前か文章にカーソルをフォーカス if(document.getElementsByName("text")[0]) document.getElementsByName("text")[0].focus(); if(document.getElementsByName("name")[0]) document.getElementsByName("name")[0].focus(); function createXMLHttpRequest(){ var xmlHttpObject = null; if(window.XMLHttpRequest){ xmlHttpObject = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ return null; } } } if(xmlHttpObject) xmlHttpObject.onreadystatechange = displayHtml; return xmlHttpObject; } function loadchatdata(){ httpObj = createXMLHttpRequest(); if(httpObj){ httpObj.open("GET","/loadchatdata.php",true); httpObj.send(null); } } function displayHtml(){ if((httpObj.readyState == 4) && (httpObj.status == 200) && httpObj.responseText){ document.getElementById("board").innerHTML = httpObj.responseText + document.getElementById("board").innerHTML; } } // 2秒ごとにチャットの内容を取りに行く setInterval('loadchatdata()',2000); </script>
<? if(!isset($_SESSION)) session_start(); // キャッシュを取らないように header("Expires: Thu, 01 Dec 1994 16:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0",false); header("Pragma: no-cache"); header("Content-type: text/html; charset=utf-8"); $max_chid = isset($_SESSION["max_chid"]) ? $_SESSION["max_chid"] : 0 ; // チャットの内容の取得 $_chat = array(); $rst = mysql_query("select * from chat where chid > {$max_chid} order by date desc limit 10"); while($col=mysql_fetch_assoc($rst)) $_chat[$col["chid"]] = $col; mysql_free_result($rst); // 直近のID $_SESSION["max_chid"] = count($_chat) ? max(array_keys($_chat)) : $max_chid ; // チャットデータの書き出し foreach($_chat as $val){?> <tr><td><?=htmlspecialchars($val["name"])?></td><td><?=$val["date"]?></td><td><?=htmlspecialchars($val["text"])?></td></tr> <?}?>
Copyright(C) systemexpress.co.jp All Rights Reserved. Author Takayuki Yukawa check for html