jQueryを使ったシンプルなAjaxのチャットです。
実装にはjQueryと1つのプラグイン、そしてsqliteのデータベースが必要です。下記に必要なものを全てまとめたファイルがあるので、サーバーにアップするだけですぐ使えます。
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
ご自由に利用・カスタマイズ・再配布OKです。連絡やコピーライト(入ってないけど)もなくてだいじょぶです。
データベース(Sqlite)もまるごとファイルに含まれているので、ほんとサーバーにあげてすぐ使えます。サーバーのPHPの設定が変じゃないかぎり。
こんな感じにデータベースごとファイルにまとめられるのが軽量で使い勝手のいいSqliteの強みですね。
今回は今までよりちょっとだけ凝った作りになってますので、概要だけご紹介します。
主要なファイルは下記です。
【HTMLファイル】
index.html ・・・基本となるファイル。他のスクリプトを呼び出す。
【PHPファイル】
action.php ・・・コメントを送信されたときに実行されるファイル
read.php ・・・既にデータベースに登録されているコメントを表示するファイル
【Javascript】
jquery.js ・・・すばらしいライブラリ。無論私が作ったものではない。
jquery.easing.js ・・・いい感じにアニメーションさせるためのプラグイン。私が作ったものではない。
jquery.ajaxchat.js ・・・必要に応じてaction.phpとread.phpを呼び出すファイル。これでAjaxを実現してまする。
では具体的なスクリプトを。長くてやんなっちゃうかもしれませんが、一応ね。
<html> <head> <title>シンプルなAjaxチャット</title> <link href="css/recet.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/layout.css" rel="stylesheet" type="text/css" media="all" /> <script src="js/jquery.js"></script> <script src="js/jquery.easing.js" type="text/javascript"></script> <script src="js/jquery.ajaxchat.js"></script> </head> <body> <div> <textarea name="message" id="message"></textarea> <p name="button" id="button">送信</p> </div> <div id="results"></div> </body> </html>
必要なファイルをhead内で読み込んでいます。bodyにはコメントデータを送信するフォーム、データを表示するスペースの3つだけがあります。
index.htmlから呼び出された「jquery.ajaxchat.js」が今回核となるファイルで、内容は下記のようになってます。
$(function(){ //データ抽出用PHPの呼び出し $.post("./read.php", {default_val : 1}, function(data){ if (data.length>0){ $("#results").html(data); } }) //コメント送信時のアクションを呼び出す $("#button").click(function(e){ $("#results").prepend("<div class='loading'><img src='img/loading.gif'></div>"); var t = setTimeout(ajax_send, 500); }); }); //コメント送信時のアクション function ajax_send(){ //送信されたデータを変数に格納 var comment_val = $("#message").val(); //データ投稿用PHPの呼び出し $.post("./action.php", {message : comment_val}, function(data){ if (data.length > 0){ $(".loading").remove(); $("#results").prepend(data); $("#results div:first-child").animate({'opacity':'0'}, 0); $("#results div:first-child").animate({'opacity':'1'}, 1000); } else{ $(".loading").remove(); } }) }
まず最初に既にデータベースに登録されているデータを表示するため、表示するPHPプログラム「read.php」にアクセスし、受け取ったデータを表示します。
次に、コメントのボタンがクリックされた時のアクションajax_send関数を呼び出しています。ajax_send関数で、実際にコメントデータをデータベースに登録してAjaxで表示するための「action.php」にアクセスし、受け取ったデータを表示します。
では次にread.php
<?php mb_internal_encoding("UTF-8"); //DB接続 $dbname = "sql/bbs"; $conn = sqlite_open($dbname) or die ("データベースに接続できませんぜよ"); $comment = ''; //データの抽出 if($_POST['default_val'] == 1){ $sql = "SELECT * FROM comment ORDER BY id DESC;"; $res = sqlite_unbuffered_query($sql,$conn) or die ("データベースを接続できませんぜ"); while ($row = sqlite_fetch_array($res, SQLITE_ASSOC)){ $message .= "<div>" . nl2br(htmlentities($row["message"], ENT_QUOTES, "UTF-8")) . "</div>"; } } else{ $message = "Hey You! What are you doing?"; } //データを書き出し echo $message; ?>
特に変わったことはしていないと思うので(たぶん、たぶんね!)、説明は省いちゃいます。
次にaction.phpです。
<?php mb_internal_encoding("UTF-8"); //DB接続 $dbname = "sql/bbs"; $conn = sqlite_open($dbname) or die ("データベースに接続できませんぜよ"); //データの投稿 if(($_POST['message'] != "") and (!mb_ereg_match("^(\s| )+$", $_POST['message']))){ //エスケープ $message = htmlentities($_POST['message'], ENT_QUOTES, "UTF-8"); $message = sqlite_escape_string($message); //データベースに追加 $sql = "INSERT INTO comment (message) VALUES ('$message') "; $res = sqlite_unbuffered_query($sql,$conn) or die ('$error'); $message = "<div>" . nl2br($message) . "</div>"; echo $message; } ?>
半角スペースだけ、および全角スペースだけの場合は送信できないように、正規表現(!mb_ereg_match(“^(\s| )+$”, $_POST[‘message’])の部分)で制御しました。
ぶっちゃけ正規表現をしっかり理解していないので、ここはどっかから拾ってきました。シェイシェイ!!
Twitterみたいにしっかりしたものを作りたいですけれども、それはまだ先のようですなぁ。。。そもそも、JQuery使わないと作れない時点でこまったちゃんですね。
どこかで時間を作って、通常のJavaScriptだけで作るバージョンを試してみようかと思います。
僕がまだピカピカの新卒だったころ、Gmailが誰でも使えるようになって(それまで確か招待制だった)使ってAjaxすげーってなって、なんか「Ajaxって新技術がすごい!」みたいな雰囲気になってましたが、今ではどこでも見かけるようになりましたね。
もっともっとがんばりまってちゃんとしたの作れるようになりまっしょい。目指せGmailとかGoogleスケジュール。
なお、このブログで公開してるプログラムなどに「ここ、おかしくない?」や、「ここはこうした方が効率いいのに知らないの?ププ・・・」などのアドバイスをいただけると非常にうれしいですので、ぜひぜひお気軽にドシドシ教えてください。
さぁ、ピルクルを飲んで寝ようっと。
こいつぁ~すごい!!
ボタン押下後の表示がtwitterみたいだww
ひゃっはーーーーーーー 。+゚((ヾ(o・ω・)ノ ))。+゚
ヒャッハー!コメントありがとうございますん。
もうちょっと改良して、実際の利用に耐える内容にして再度公開しまする。
グルグル回るのは見た目かっこいいけれど、実際ただのGIFアニメなんだな。
Glad I’ve finally found somehting I agree with!
@Turk
I’m glad too. Thank you for use!