システムエクスプレス株式会社

php・mysql・javascriptを使ったチャットシステムの作り方を載せてみました。

※ソースコードは下のほうです。

サンプルデモ

名前と文章を入力して送信ボタンを押してください。

名前
文章

名前	投稿日時	文章
age	2020-03-28 19:12:06	age
age	2020-03-28 19:11:24	age
test	2020-03-27 15:12:16	test
てｓｔ	2020-03-27 05:49:26	<>
てｓｔ	2020-03-27 05:49:18	てｓｔ
as	2020-03-26 08:59:14	a
SSC	2020-03-26 07:09:26	手簀戸
test	2020-03-24 15:44:38	aaa
test	2020-03-24 15:44:03	tetete
vvv	2020-03-24 10:44:30	bvbv
ｓｑｗｓ	2020-03-23 20:05:50	ｙｄ
っっっt	2020-03-20 18:05:33	9999
ｃｄｓ	2020-03-20 09:22:59	＠＠＠
ｃｄｓ	2020-03-20 09:21:13	ｃｄｓｃｃｃｃ
a	2020-03-19 15:06:12	test
あ	2020-03-17 20:15:35	っっっk
あ	2020-03-17 20:15:29	あ
AI	2020-03-17 10:13:16	Hello World
あ	2020-03-16 23:22:57	あ
ああ	2020-03-15 09:42:55	ああああ
たーばー	2020-03-14 15:40:42	3333
たーばー	2020-03-14 15:40:38	6666
たーばー	2020-03-14 15:40:08	テストの価格は
ss	2020-03-13 15:05:11	sdvsd
ななし	2020-03-11 20:09:56	かかし
桜の花	2020-03-08 11:00:51	あいたい
aaa	2020-03-07 16:15:53	aaaaaefeaeaf
すすす	2020-03-06 17:12:02	素晴らしい
XSS	2020-03-06 15:55:00	大丈夫！
XSS	2020-03-06 15:54:41	<h1>a</h1>
留守番電	2020-03-05 16:15:25	テストーお
さいてょ	2020-03-05 13:27:37	みゃんみゃんみんみ
M氏	2020-03-05 12:14:11	M.A.R.I.O.
할룽	2020-03-03 05:10:12	및인놈
할룽	2020-03-03 05:09:49	할룽
あ	2020-03-02 20:45:55	さ
あべし	2020-02-27 15:13:18	田中氏
kom	2020-02-26 17:24:01	nenenenenenmuiiii
gfds	2020-02-26 12:48:58	adfa
田中	2020-02-25 00:01:41	ｌｌｌ
たーばー	2020-02-24 12:18:36	テストの価格は
aaa	2020-02-19 10:57:38	aaaaaa
aaa	2020-02-19 10:57:33	aaaaaaaaaaaa
ukon	2020-02-17 17:36:54	うんちょこちょこビーム・・・・・
あたま	2020-02-17 06:49:49	価格は?
sde	2020-02-15 16:52:20	ew
なに	2020-02-15 15:12:18	うん
ああああ	2020-02-14 11:05:14	いいいいいいいいい
ああああ	2020-02-14 11:05:08	dfdfdfd
ああああ	2020-02-14 11:05:02	dfdfdfd
ああああ	2020-02-14 11:04:56	dfdfdfd
ああああ	2020-02-14 11:04:45	いいいいいいいいい
ああああ	2020-02-14 10:56:01	dfdfdfd
ああああ	2020-02-14 10:55:35	fdfsdfdsafds
ああああ	2020-02-14 10:55:33	fdsfdsfdsfdsaf
ああああ	2020-02-14 10:55:31	efdfdsfdsafdsaf
ああああ	2020-02-14 10:42:34	ｆｄｓｆｄｆｓｆｄｓｆ
123	2020-02-12 16:40:29	あいうえお
Foo	2020-02-11 22:03:16	ことよろ
多板橋権	2020-02-09 19:32:55	あけましておめでとうございます。
こうし	2020-02-07 14:55:53	a
こうし	2020-02-07 14:47:54	a
あわわ	2020-02-07 09:06:06	あわわ
ああ	2020-02-05 18:37:23	ああああ
ｄｓｄｓ	2020-02-03 22:50:34	ヘロートゥーザワールド
ｄｓｄｓ	2020-02-03 22:50:14	ｇｇｇｆ
abc	2020-02-03 11:55:57	abc
abc	2020-02-03 11:55:46	abc
abc	2020-02-03 11:55:42	abc
きた	2020-02-02 15:26:40	かあ
あ	2020-01-31 20:57:17	あ
a	2020-01-30 21:13:16	e
承太郎	2020-01-29 09:40:35	やれやれだぜ
承太郎	2020-01-29 09:40:26	記憶喪失だと？
810	2020-01-28 14:30:21	testよ.....どうか私を助けてくれ........
810	2020-01-28 14:20:50	testよ.....どうか私を助けてくれ........
810	2020-01-28 14:20:09	世界に挨拶とは...よっぽどの偉人とみた....
test	2020-01-28 11:11:14	"Hello World!!"
test	2020-01-28 11:11:08	"Hello World!!"
test	2020-01-28 11:09:02	"Hello World!!"
810	2020-01-28 09:23:37	連絡手段がここしかないのだ.....助けてくれるものよ。連絡を待っている
810	2020-01-28 09:22:16	男に襲われ目隠しをされどこかに連れていかれたのは覚えている.....
810	2020-01-28 09:21:26	誰か私の助けになってくれ....
810	2020-01-28 09:20:57	これまでの記憶がないんだ.......
810	2020-01-28 09:20:25	わたしは....何者なのだ......
810	2020-01-28 09:19:40	ここは.....どこだ........
4545	2020-01-28 09:15:12	test
222	2020-01-25 23:28:29	111
ああああ	2020-01-24 23:29:09	いけてますね
ああああ	2020-01-24 12:46:44	いけてるね
ああああ	2020-01-24 12:46:13	ああああ
ああああ	2020-01-22 22:41:30	ああああ
あああ	2020-01-22 16:27:52	あああああああ
7575	2020-01-22 11:35:45	urtururururyt
test	2020-01-22 09:58:23	test
aaaa	2020-01-21 09:37:08	bbbb
bbbb	2020-01-21 09:36:55	abc
aaaa	2020-01-21 09:36:52	aaaa
ちこ	2020-01-20 16:41:28	そのやりかたもしりたいーー
ちこ	2020-01-20 16:40:43	したい

ソース

mysql table 作成

CREATE TABLE `chat` ( `chid` int(10) unsigned auto_increment, `name` varchar(255), `text` text, `date` datetime, PRIMARY KEY (`chid`) ) AUTO_INCREMENT=1000000001

chat.php

<? 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 ; ?>

chat.html

<?=$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>

javascriptの部分

<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>

loadchatdata.php

<? 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> <?}?>