php・mysql・javascriptを使ったチャットシステムの作り方を載せてみました。
名前と文章を入力して送信ボタンを押してください。
| 名前 | 投稿日時 | 文章 |
|---|---|---|
| 江 | 2018-09-24 17:17:35 | 映 |
| aaa | 2018-09-24 10:52:14 | s |
| aaa | 2018-09-24 10:51:30 | 更新できた？ |
| ｄｃｓｄ | 2018-09-23 16:24:33 | ｃｄｃｄｃ |
| あ | 2018-09-21 16:54:03 | い |
| あ | 2018-09-21 16:54:02 | い |
| あ | 2018-09-21 16:53:04 | い |
| aaa | 2018-09-20 17:08:15 | aa |
| aaa | 2018-09-20 17:08:15 | aa |
| あ | 2018-09-20 12:49:02 | あ |
| a | 2018-09-20 08:36:32 | s |
| 2018-09-20 02:45:15 | Test | |
| ああああ | 2018-09-19 23:08:13 | test |
| a | 2018-09-19 22:12:50 | a |
| あ | 2018-09-19 09:46:21 | あいいいいおおお |
| うんぽこ | 2018-09-17 19:21:47 | <div class="unnpoko">今日も快便</div> |
| 2018-09-14 15:52:17 | ♥♠♦♣ | |
| 2018-09-13 03:49:40 | <script>alert("hoge")</script> | |
| 2018-09-13 03:49:14 | <script>hoge</script> | |
| 2018-09-13 03:48:53 | <?php echo "hoge" ?> | |
| 2018-09-13 03:48:23 | <?php ?> | |
| 2018-09-13 03:48:13 | ||
| 2018-09-13 03:48:02 | ||
| テスト | 2018-09-11 23:09:05 | テスト文章 |
| あ | 2018-09-11 19:54:32 | ｈｔｍｌ |
| あ | 2018-09-10 00:31:32 | あ |
| test | 2018-09-09 13:17:29 | 11 |
| test | 2018-09-09 13:16:56 | test |
| あなた！ | 2018-09-09 10:46:36 | あああああああああああああ |
| admi | 2018-09-07 10:46:28 | adminitrator |
| 111 | 2018-09-07 07:30:17 | あ |
| 111 | 2018-09-07 07:29:50 | 111 |
| test | 2018-09-06 16:21:46 | test111 |
| wsws | 2018-09-06 15:41:43 | q1 |
| wsws | 2018-09-06 15:41:33 | ww |
| wsws | 2018-09-06 15:41:27 | aaaa |
| aa | 2018-09-05 19:02:54 | df |
| aaa | 2018-08-30 18:56:55 | aaaa |
| 浅原 | 2018-08-29 18:01:48 | I'll be back |
| 111 | 2018-08-28 18:47:22 | 111 |
| aaaa | 2018-08-27 18:07:20 | test |
| aaaa | 2018-08-27 17:55:42 | test |
| test | 2018-08-27 15:32:37 | test1 |
| test | 2018-08-27 15:32:36 | test2 |
| test | 2018-08-27 15:32:35 | test3 |
| test | 2018-08-27 15:28:11 | test4 |
| test | 2018-08-27 15:28:08 | test3 |
| test | 2018-08-27 15:28:06 | test2 |
| test | 2018-08-27 15:28:01 | test1 |
| a | 2018-08-25 13:50:35 | a |
| て | 2018-08-25 01:37:57 | すと |
| test | 2018-08-24 13:00:38 | HAHAHA |
| ああ | 2018-08-23 22:07:26 | こんばんは |
| aaa | 2018-08-23 19:56:02 | fff |
| test | 2018-08-23 15:16:48 | test |
| 麻原彰晃 | 2018-08-22 14:08:15 | 生き返りたい |
| 麻原彰晃 | 2018-08-22 14:07:21 | 生き返りたい |
| てすと | 2018-08-22 00:02:46 | てすと |
| Mi | 2018-08-21 09:12:37 | Hello World! |
| あdf | 2018-08-20 15:34:45 | あdf |
| ttt | 2018-08-18 14:43:40 | こんにちは |
| ごう | 2018-08-17 17:22:10 | こんにちは |
| ごう | 2018-08-17 15:17:03 | こんにちは |
| 名無し | 2018-08-16 21:48:52 | じゃ |
| アッラー | 2018-08-12 16:48:18 | a |
| アッラー | 2018-08-12 16:47:20 | a |
| aaa | 2018-08-12 16:35:38 | bbb |
| アッラー | 2018-08-12 15:19:32 | アクバル |
| 丸亀製麺 | 2018-08-11 18:55:35 | うどんおいしい |
| こ | 2018-08-11 13:22:52 | f*ck |
| 男 | 2018-08-10 02:02:13 | 娘 |
| 駅 | 2018-08-09 22:05:31 | いいんじゃない |
| a | 2018-08-09 15:06:13 | b |
| a | 2018-08-09 15:05:24 | すごE |
| a | 2018-08-09 15:04:59 | b |
| あ | 2018-08-09 09:41:17 | あ |
| あ | 2018-08-08 20:36:53 | aaaa |
| user | 2018-08-07 16:39:13 | •名前 を入力してください |
| お？ | 2018-08-06 17:47:23 | すごいな |
| zero | 2018-08-05 11:41:19 | a |
| てｓｔ | 2018-08-04 18:56:30 | 文章文章文章文章 |
| ｄｆ | 2018-08-04 12:52:27 | ｄふぇｆ |
| ｄｆ | 2018-08-04 12:52:18 | ｑｑ |
| あ | 2018-08-03 17:14:02 | あ |
| ああああ | 2018-08-02 11:46:57 | tset |
| www | 2018-08-01 20:13:22 | 草はえる |
| www | 2018-08-01 20:13:12 | 草はえる |
| test | 2018-07-31 17:45:30 | test |
| ななな | 2018-07-31 14:34:05 | hoge |
| hoge | 2018-07-31 14:32:24 | hoge |
| ななな | 2018-07-31 14:32:11 | っっｓ |
| で | 2018-07-30 23:42:15 | d |
| あ | 2018-07-27 16:03:59 | あｓｄじおｊ |
| ta | 2018-07-26 22:17:05 | hi |
| 草 | 2018-07-26 17:17:07 | 草 |
| hoge | 2018-07-26 12:39:55 | hoge |
| x | 2018-07-25 22:47:37 | ll |
| x | 2018-07-25 22:47:27 | x |
| test | 2018-07-25 11:13:00 | [text text-name] |
| ha | 2018-07-24 06:24:19 | fa |
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