チャットシステムの作り方

投稿日:2017-03-06 カテゴリ:php この記事を編集

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

Warning: Cannot modify header information - headers already sent by (output started at /home/users/2/genjin/web/systemexpress.co.jp/www/inc/head.inc:1) in /home/users/2/genjin/web/systemexpress.co.jp/www/inc/chat.php on line 17

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

サンプルデモ

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

名前(10文字以内)
文章(50文字以内)

名前	投稿日時	文章
フォーロンペー	03-15 22:52:44	バイバイキーン
あさり	03-15 22:52:37	おやすみ
フォーロンペー	03-15 22:52:31	また明日話そうぜ
フォーロンペー	03-15 22:52:19	寝るか
あさり	03-15 22:52:13	やばい眠い
フォーロンペー	03-15 22:51:14	消えてないんじゃない
あさり	03-15 22:50:58	消えた?
フォーロンペー	03-15 22:49:00	プロキシ聞きに来るだけじゃなくて、話しにこいよ　少年
フォーロンペー	03-15 22:48:26	俺は、大体のパターン頭に入っとる
あさり	03-15 22:47:10	俺は独学でやったぞ
あさり	03-15 22:46:36	https://karaseee.f5.si/
プロシキ	03-15 22:46:20	使い方
あさり	03-15 22:46:18	シャドでいいか
プロシキ	03-15 22:46:17	わかんない
あさり	03-15 22:45:37	ほんまヤン
フォーロンペー	03-15 22:45:21	被ったヤン
フォーロンペー	03-15 22:45:11	なとこ押せばいい
あさり	03-15 22:45:03	https://topic.know.ticpu.net/
フォトロンペー	03-15 22:44:41	https://topic.know.ticpu.net/にリンク載せてシェアのとこ押して←→みたい
あさり	03-15 22:44:37	とりまゆとでいい?
プロシキ	03-15 22:44:04	まあくれ
フォトロンペー	03-15 22:43:49	プロキシのことプロシキていう人初めて見た
プロシキ	03-15 22:43:30	かゲーム
プロシキ	03-15 22:43:22	YouTube
あさり	03-15 22:43:15	なんの？
プロシキ	03-15 22:42:54	ください
フォトロンペー	03-15 22:42:41	おるんかい
あさり	03-15 22:42:34	おるで
フォトロンペー	03-15 22:42:23	もうねてまったか？
フォトロンペー	03-15 22:41:41	ただいま

ソース

mysql table 作成

CREATE TABLE `chat` ( `chid` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL, `text` mediumtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin, `date` datetime DEFAULT NULL, `ip` varchar(255) DEFAULT NULL, `id` char(32) DEFAULT NULL, PRIMARY KEY (`chid`) ) ENGINE=MyISAM AUTO_INCREMENT=1000000001 DEFAULT CHARSET=utf8mb4

chat.php

<? 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 ; // 本人を特定するＩＤ $id = isset($_COOKIE["id"]) ? $_COOKIE["id"] : 0 ; if(!$id) setcookie("id",md5(rand()),time()+10*365*24*60*60,"/","systemexpress.co.jp"); // 名前クッキーがあればクッキーをポストされればポストを $name = isset($_COOKIE["name"]) ? $_COOKIE["name"] : "" ; $name = isset($_POST["name"]) ? $_POST["name"] : $name ;

chat.html

<?=$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="チャット" id="chat"> <tr id="thead"><th style="width:150px">名前</th><th style="width:180px">投稿日時</th><th>文章</th></tr> <tbody id="board"> <?foreach($_chat as $val){?> <tr class="chat<?=$val["id"]?>"><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(); } // 1秒ごとにチャットの内容を取りに行く setInterval('loadChatData()',1000); </script> <style> table#chat{ background-color:#8dabd8; padding:0 1% 10px; } table#chat tr#thead{ display:none; } table#chat td{ display:block; border:none; float:left; padding:10px; } table#chat td:nth-of-type(1){ font-weight:bold; font-size:13px; padding-bottom:0; } table#chat td:nth-of-type(2){ color:#333333; font-size:13px; padding-bottom:0; } table#chat td:nth-of-type(3){ clear:both; width:80%; background-color:white; border-radius:20px; } <?// 本人の書き込みを右詰にする if(@$id){?> table#chat tr.chat<?=$id?> td{ float:right; } table#chat tr.chat<?=$id?> td:nth-of-type(3){ background-color:#6fe67a; } <?}?> </style>

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 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 class="chat<?=$val["id"]?>"><td><?=htmlspecialchars($val["name"])?></td><td><?=substr($val["date"],5,14)?></td><td><?=htmlspecialchars($val["text"])?></td></tr> <?}?>

sendChatData.php

<? // 本人を特定するＩＤ $id = isset($_COOKIE["id"]) ? $_COOKIE["id"] : 0 ; if(!$id) setcookie("id",md5(rand()),time()+10*365*24*60*60,"/","systemexpress.co.jp"); $name = isset($_POST["name"]) ? preg_replace("/^\s+|\s+$/u","",$_POST["name"]) : "" ; $text = isset($_POST["text"]) ? preg_replace("/^\s+|\s+$/u","",$_POST["text"]) : "" ; $err = array(); if(!$name) $err[] = "名前を入力してください"; if(mb_strlen($name)>10) $err[] = "名前は10文字以内で入力してください"; if(!$text) $err[] = "文章を入力してください"; if(mb_strlen($text)>50) $err[] = "文章は50文字以内で入力してください"; // 名前をクッキーに登録 setcookie("name",$name,time()+10*365*24*60*60,"/","systemexpress.co.jp"); if(!count($err)){ mysql_query("insert into chat set date = now(), name = '".addslashes($name)."', text = '".addslashes($text)."', ip = '".$_SERVER["REMOTE_ADDR"]."', id = '".$id."'"); }else{ $msg = showerr($err); }

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