php・mysql・javascriptを使ったチャットシステムの作り方を載せてみました。
名前と文章を入力して送信ボタンを押してください。
| 名前 | 投稿日時 | 文章 |
|---|---|---|
| sen | 11-27 00:38:22 | test |
| ota shinta | 11-26 11:27:10 | あああああ |
| ass | 11-25 12:52:22 | yyyy |
| ああああ | 11-25 10:26:14 | こんにちは |
| サニタイズチェック | 11-24 11:51:42 | <script>location.href="http://google";</script> |
| ああ | 11-23 14:45:27 | ああ |
| aaa | 11-21 17:51:41 | sss |
| da | 11-20 10:01:38 | 12345678o |
| ds | 11-20 10:01:21 | qeewew |
| あああ | 11-19 23:47:01 | っゆゆゆ |
| ライザの | 11-19 16:01:33 | アトリエ |
| サンプル | 11-18 01:11:26 | サンプル |
| アプリ | 11-17 16:16:29 | あ |
| サンプルでも | 11-17 15:27:34 | こんにちわ |
| ghj | 11-17 15:13:55 | dfg |
| aaaaa | 11-17 14:13:08 | 12345 |
| jhg | 11-16 13:48:56 | みんな暇人ですね |
| jhg | 11-16 13:47:01 | 浮橋立うきは小学校 |
| 徳丸 | 11-13 10:49:17 | こんにちは |
| ｋｋｋ | 11-13 09:26:35 | ｋ |
| こｋも | 11-12 14:51:33 | もみみみ |
| こｋも | 11-12 14:51:23 | ｋｐ＠ｌ＠ｐｌ＠ｌ |
| aa | 11-09 14:16:31 | ああ |
| うんち | 11-09 11:43:06 | うんちくえ! |
| 一見民主党 | 11-07 18:23:00 | 総理!なぜ学術会議の任命を拒否したんですか!お答えください総理!(定期) |
| ｑどぁ | 11-06 12:54:52 | ｑどぁあヴぇｄｓ |
| test | 11-06 10:29:34 | test |
| 1111 | 11-05 20:14:30 | 1111 |
| 000 | 11-05 20:14:10 | 000 |
| 竈門炭二郎 | 11-04 13:32:22 | １ |
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>"; // チャット内容の取得 $_chat = array(); $rst = mysql_query("select * from chat order by date desc limit 30"); 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 onsubmit="sendChatData();return false"> <table summary="送信フォーム"> <tr><th style="width:150px">名前(10文字以内)</th><td><input type="text" name="name" value="<?=@$name?>" style="width:100%" maxlength="10" required /></td></tr> <tr><th>文章(50文字以内)</th><td><input type="text" name="text" value="" style="width:100%" maxlength="50" required /></td></tr> </table> <p><input type="submit" value="送信" class="button" /></p> </form> <table summary="チャット"> <tr><th style="width:150px">名前</th><th style="width:180px">投稿日時</th><th>文章</th></tr> <tbody id="board"> <?foreach($_chat as $val){?> <tr><td><?=htmlspecialchars($val["name"])?></td><td><?=substr($val["date"],5,14)?></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(); // xmlHttpObjectの作成 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; } } } return xmlHttpObject; } // チャットの内容の取得 function loadChatData(){ xmlHttpObject = createXMLHttpRequest(); xmlHttpObject.onreadystatechange = displayHtml; xmlHttpObject.open("GET","/loadChatData.php",true); xmlHttpObject.send(null); } // 新たな書き込みがあった場合に表示する function displayHtml(){ if((xmlHttpObject.readyState == 4) && (xmlHttpObject.status == 200) && xmlHttpObject.responseText){ document.getElementById("board").innerHTML = xmlHttpObject.responseText + document.getElementById("board").innerHTML; } } // チャットに書き込みをする function sendChatData(){ xmlHttpObject = createXMLHttpRequest(); xmlHttpObject.open("POST","/sendChatData.php",true); xmlHttpObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpObject.send("name="+encodeURIComponent(document.getElementsByName("name")[0].value)+"&text="+encodeURIComponent(document.getElementsByName("text")[0].value)); document.getElementsByName("text")[0].value = ""; loadChatData(); } // 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 30"); 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><?=substr($val["date"],5,14)?></td><td><?=htmlspecialchars($val["text"])?></td></tr> <?}?>
<? $name = isset($_POST["name"]) ? $_POST["name"] : "" ; $text = isset($_POST["text"]) ? $_POST["text"] : "" ; $err = array(); if(!$name) $err[] = "名前 を入力してください"; if(mb_strlen($name)>10) $err[] = "名前 は10文字以内で入力してください"; if(!$text) $err[] = "文章 を入力してください"; if(mb_strlen($text)>50) $err[] = "文章 は50文字以内で入力してください"; if(!count($err)){ mysql_query("insert into chat set date = now(), name = '".addslashes($name)."', text = '".addslashes($text)."'"); }else{ $msg = showerr($err); } ?>
Copyright(C) systemexpress.co.jp All Rights Reserved. Author Takayuki Yukawa