php・mysql・javascriptを使ったチャットシステムの作り方を載せてみました。
名前と文章を入力して送信ボタンを押してください。
| 名前 | 投稿日時 | 文章 |
|---|---|---|
| ベイベ | 2018-05-20 16:19:29 | みんなー！！見てるー？？ |
| aaaa | 2018-05-20 13:55:00 | aaaaaa |
| aaaa | 2018-05-20 13:45:33 | tokyo japan |
| grog | 2018-05-20 00:17:17 | ｂｇｔｙ |
| あ | 2018-05-19 13:42:04 | あ |
| あ | 2018-05-19 13:40:26 | あ |
| test | 2018-05-18 17:57:54 | ききき7 |
| aa | 2018-05-18 17:19:09 | aa |
| あ | 2018-05-18 14:34:44 | あ |
| ｑ | 2018-05-18 14:25:12 | ｑ |
| aaa | 2018-05-18 14:16:45 | 1111 |
| aa | 2018-05-17 13:54:38 | テスト |
| aa | 2018-05-17 13:53:39 | aaa |
| あ | 2018-05-16 21:39:54 | あ |
| あaあ | 2018-05-16 17:20:46 | sss |
| あaあ | 2018-05-16 17:20:41 | sasa |
| ああああ | 2018-05-15 22:25:15 | ああああ |
| 神 | 2018-05-15 20:53:47 | 神 |
| いいいい | 2018-05-15 16:47:46 | てすと |
| あああ | 2018-05-15 15:45:49 | SELECT * FROM chat |
| あああ | 2018-05-15 11:14:56 | "DROP TABLE chat; |
| あああ | 2018-05-15 11:13:41 | DROP TABLE chat |
| あああ | 2018-05-15 11:12:44 | サムワン |
| あか | 2018-05-12 19:10:16 | さに |
| Judi | 2018-05-12 05:41:48 | 58Y9hA |
| あっき | 2018-05-11 22:04:47 | test |
| dsds | 2018-05-10 17:35:32 | www |
| てｓ | 2018-05-10 16:32:01 | はい |
| 駄目です | 2018-05-07 14:49:23 | リッピング |
| ｗｗｗ | 2018-05-07 12:33:52 | test |
| a | 2018-05-07 10:23:28 | サンプル |
| たかた | 2018-05-03 22:41:29 | 高かった |
| ４字以内 | 2018-05-03 16:23:42 | リアルタイム更新かな |
| ４字以内 | 2018-05-03 16:22:56 | 454547314 |
| ４字以内 | 2018-05-03 16:22:31 | あああああああああんあああああああああんあああああああああんあああああああああんあああああああああん |
| ４字以内 | 2018-05-03 16:21:25 | あああああああああああああああああああああああああああああああああああああああ |
| ４字以内 | 2018-05-03 16:10:47 | <script>alert("シューマイ");</script> |
| あ | 2018-05-03 14:26:33 | あ |
| あ | 2018-05-02 23:35:04 | いうえお |
| てすてす | 2018-05-02 16:48:31 | てすてす |
| あああ | 2018-04-28 22:55:57 | 45668 |
| a | 2018-04-28 13:07:18 | a |
| ysd | 2018-04-27 17:38:36 | aaaaaaaaaaaaa |
| あ | 2018-04-27 14:28:43 | ｄ |
| つだ | 2018-04-23 15:02:42 | かｋｌｆ |
| つだ | 2018-04-23 15:02:38 | がｊかｊ |
| ｔｅｓｔ | 2018-04-23 13:35:37 | test |
| ｓ | 2018-04-21 20:56:04 | ｓｄ |
| ｓ | 2018-04-21 20:55:59 | ｓ |
| Bob | 2018-04-20 17:53:55 | test |
| うううう | 2018-04-20 14:32:55 | っっっっっっっっっっf |
| ごりら | 2018-04-20 13:01:17 | hogehoge |
| あｓｆ | 2018-04-19 20:44:06 | さｆ |
| ああ | 2018-04-19 16:39:00 | あああ |
| テスト | 2018-04-18 19:11:00 | 文章 |
| Saka | 2018-04-18 13:42:09 | ---- |
| test | 2018-04-18 13:41:51 | --- |
| test | 2018-04-18 13:41:47 | AAP |
| Test | 2018-04-18 07:38:39 | test |
| Test | 2018-04-18 07:38:34 | Test |
| a | 2018-04-16 16:50:27 | a |
| hoge | 2018-04-16 16:11:42 | testtesthoge |
| yuki | 2018-04-14 23:04:04 | test |
| ft | 2018-04-13 17:12:41 | ああ |
| ft | 2018-04-13 16:33:50 | ああ |
| x | 2018-04-13 13:21:33 | ｘ |
| aaa | 2018-04-11 20:55:45 | <script>alert('aaa')</script> |
| ああ | 2018-04-11 10:16:04 | ああ |
| Test | 2018-04-09 15:09:59 | 対策されてるし使えそう |
| Test | 2018-04-09 15:09:44 | "><script>alert('aaa')</script><" |
| Test | 2018-04-09 15:07:51 | Test |
| test | 2018-04-09 14:47:33 | test |
| あああ | 2018-04-09 12:01:54 | かかか |
| あああ | 2018-04-09 11:59:03 | かかか |
| よし | 2018-04-08 16:04:39 | テスト |
| SSS | 2018-04-07 19:45:04 | テストテスト |
| RRR | 2018-04-07 19:44:36 | テストテストテスト |
| あ | 2018-04-05 12:43:16 | う |
| たかし | 2018-04-05 12:03:48 | こ |
| あああ | 2018-04-04 22:20:12 | あああ |
| ｓｓ | 2018-04-02 11:34:14 | ｓｓっさああ |
| まふゆ | 2018-04-01 15:13:35 | あああ |
| まふゆ | 2018-04-01 15:13:30 | あああ |
| まふゆ | 2018-04-01 15:13:17 | あああ |
| ｑ | 2018-03-30 13:38:12 | ｗｗｗ |
| yyy | 2018-03-30 13:30:05 | ttt |
| Tak | 2018-03-30 11:57:10 | こんにちは |
| vv | 2018-03-28 23:31:19 | test |
| ふふふ | 2018-03-28 12:00:51 | OK OK ???? ???? ???? ???? ???? |
| 9999 | 2018-03-28 01:05:11 | 4444 |
| 正 | 2018-03-28 00:25:46 | 試験 |
| あ | 2018-03-27 12:44:27 | いうえお |
| aaa | 2018-03-27 11:12:18 | aaa |
| 俺も | 2018-03-27 00:09:26 | 書き込んじゃう！ |
| 1234 | 2018-03-26 15:44:02 | 1111 |
| aaa | 2018-03-26 10:14:16 | aaa |
| い | 2018-03-25 22:46:44 | あ |
| rdg | 2018-03-24 00:41:36 | wrgwへh |
| あｆ | 2018-03-23 23:03:09 | あふぁｆ |
| おっさん | 2018-03-23 07:47:38 | チャットしたい！ |
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