php・mysql・javascriptを使ったチャットシステムの作り方を載せてみました。
名前と文章を入力して送信ボタンを押してください。
| 名前 | 投稿日時 | 文章 |
|---|---|---|
| asdf | 2019-04-19 23:57:32 | asdfasdfasdf |
| b | 2019-04-19 20:39:41 | w |
| テスト | 2019-04-19 00:31:36 | テスト |
| テスト | 2019-04-19 00:31:05 | テスト |
| テスト | 2019-04-19 00:20:52 | テスト |
| あ | 2019-04-18 11:29:19 | 2 |
| a | 2019-04-17 23:57:48 | test |
| a | 2019-04-15 10:22:23 | a |
| テスト | 2019-04-15 06:22:50 | テスト |
| c | 2019-04-12 12:15:09 | ああ |
| ka | 2019-04-12 11:27:35 | test |
| 焙煙 | 2019-04-11 02:30:21 | hoge |
| 焙煙 | 2019-04-11 02:26:26 | おはよー |
| 焙煙 | 2019-04-11 02:25:20 | おはよー |
| ベンチ | 2019-04-10 13:55:55 | Hello World |
| い | 2019-04-09 11:45:50 | はあ |
| dsgs | 2019-04-06 17:00:28 | （´‐ι_‐｀） |
| dsgs | 2019-04-06 16:59:33 | sdfsd |
| テスト | 2019-04-05 17:47:04 | テスト |
| たなか | 2019-04-05 12:53:35 | たろう |
| たか | 2019-04-04 15:28:40 | たな |
| asdf | 2019-04-03 20:46:09 | asdf |
| aas | 2019-03-30 14:49:54 | よろしくー |
| たみお | 2019-03-30 06:18:13 | hoge |
| あ | 2019-03-22 20:26:14 | あ |
| っs | 2019-03-19 23:05:30 | っw |
| っs | 2019-03-19 23:05:12 | っw |
| っs | 2019-03-19 23:01:49 | っw |
| aaaa | 2019-03-19 18:04:52 | tesuto |
| あ | 2019-03-18 19:15:25 | test |
| あああ | 2019-03-18 18:09:53 | あああああ |
| ｗｄｓだ | 2019-03-18 15:16:08 | あｓだｓｄ |
| あ | 2019-03-17 00:54:58 | あ |
| 汗 | 2019-03-15 13:21:19 | 汗 |
| ああああ | 2019-03-14 15:53:20 | いいいいい |
| あ | 2019-03-13 20:34:12 | あ |
| ああああ | 2019-03-10 16:57:21 | おぱい |
| ああああ | 2019-03-10 16:56:50 | あああ |
| あああ | 2019-03-09 19:36:22 | あああ |
| saki | 2019-03-08 21:30:16 | おはー |
| っっk | 2019-03-08 20:03:26 | っっk |
| っっk | 2019-03-08 19:51:58 | っっk |
| ああああ | 2019-03-06 22:42:40 | あああああああああああ |
| ai | 2019-03-06 16:03:40 | おおー |
| あああ | 2019-03-03 17:16:34 | ああああ |
| どうも | 2019-03-03 02:54:25 | よろ |
| たくと | 2019-02-27 06:55:47 | あはよう |
| ぽぽお | 2019-02-26 17:54:46 | ぽーん |
| どなた？ | 2019-02-24 13:38:12 | 前田 |
| ああいう | 2019-02-20 16:00:01 | むむむ |
| sawa | 2019-02-19 01:53:18 | あっちむくお |
| u | 2019-02-19 01:52:02 | こっちみんな |
| sawa | 2019-02-19 01:50:56 | あっちむくお |
| u | 2019-02-19 01:50:51 | こっちみんな |
| sawa | 2019-02-19 01:50:45 | 見てるお |
| u | 2019-02-19 01:50:45 | ｗ |
| u | 2019-02-19 01:50:40 | りーる見てるかー！ガチでコメントしてやったぞー！！ｗｗｗｗｗｗ |
| sawa | 2019-02-19 01:50:23 | prpr |
| u | 2019-02-19 01:50:10 | w |
| んｋ | 2019-02-17 21:46:52 | ｋｌｌｍｌ |
| 3 | 2019-02-16 18:14:22 | <s>O</s> |
| 3 | 2019-02-16 18:13:54 | <<script>alert(document.cookie);//<</script> |
| 3 | 2019-02-16 18:13:35 | javascript:alert(document.cookie) |
| 3 | 2019-02-16 18:12:50 | <script>alert('あ');</script> |
| 3 | 2019-02-16 18:12:00 | <h1>あ</h1> |
| 3 | 2019-02-16 18:11:48 | 3 |
| 3 | 2019-02-16 18:11:17 | 3 |
| eee | 2019-02-13 10:33:02 | あああああ |
| test | 2019-02-10 12:47:28 | アイウエオ |
| てすと | 2019-02-05 18:05:26 | あ |
| a | 2019-02-05 16:14:52 | a |
| てすと2 | 2019-02-03 16:04:54 | てすと |
| あ | 2019-02-01 22:41:30 | A |
| あ | 2019-02-01 22:40:05 | A |
| ま | 2019-02-01 19:19:27 | かあなま |
| A | 2019-02-01 11:06:08 | ありがとうございます。 |
| aa | 2019-01-31 20:37:41 | TEST |
| aa | 2019-01-31 20:37:11 | aa |
| あかさ | 2019-01-31 10:21:18 | いいいいい |
| あかさ | 2019-01-31 10:21:02 | あああああ |
| お試し | 2019-01-30 14:10:39 | 宜しく |
| あかさ | 2019-01-28 17:12:45 | あか |
| あかさ | 2019-01-28 17:11:08 | たあ |
| あかさ | 2019-01-28 17:09:21 | たあ |
| ２２２ | 2019-01-25 18:42:30 | ３３３ |
| bbb | 2019-01-25 15:51:38 | bbb |
| 田中 | 2019-01-24 23:37:22 | テストかなぁ |
| aaaa | 2019-01-22 02:57:49 | aa |
| ｚｚｚ | 2019-01-22 02:27:46 | あｓｄｆｈｊｋｌｌ； |
| 吉田弘和 | 2019-01-21 18:16:38 | ハッハッハッハッハッハッハッハッハッ |
| aaa | 2019-01-21 13:56:11 | aaa |
| aaa | 2019-01-21 13:55:53 | aaa |
| abc | 2019-01-21 12:07:06 | this is a pen. |
| abc | 2019-01-21 12:06:13 | this is a pen. |
| あ | 2019-01-18 13:47:28 | さ |
| aaa | 2019-01-18 13:03:34 | あいうえお |
| aaa | 2019-01-18 13:03:24 | bbb |
| aa | 2019-01-16 21:46:02 | 8888 |
| 井上 | 2019-01-15 23:47:53 | これ良いね！ |
| さえき | 2019-01-12 20:13:32 | 下痢 |
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