Ajax PHP JavaScript MySQL簡単なリフレッシュなしオンラインチャットルームを実現
33508 ワード
この2日間で学んだAjaxに関する知識をよりよく活用するために、簡単なオンラインチャットルームを作りました.
構想
チャットルームを実現するには、基本的にAjaxを通じてデータを伝達し、PHPにデータの差入と検索を実現させ、フロントエンドJavaScriptに渡してページの更新を実現し、インスタントチャットの機能を実現する.
メッセージ表示領域
メッセージ表示領域はDIVブロックで、Ajaxを使用してサーバ側の情報を取得した後、JavaScriptを使用してページを更新します.
<h3> </h3>
<div id="up">
</div>
<hr />メッセージを送る
メッセージモジュールは、実は、サーバにデータを挿入するプロセスであり、比較的簡単です.
<h3> </h3>
<div id="bottom">
<form action="./chatroom_insert.php">
<div id="chat_up">
<span> </span>
<input type="color" name="color"/>
<span> </span>
<select name="biaoqing">
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
<span> </span>
<select name="receiver">
<option value=""> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
</div>
<div id="chat_bottom">
<textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
<input type="button" value=" " onclick="send()" />
：<span id="result"></span>
</div>
</form>
</div>プレートプレート
次に、関連するビジネスロジックを実装するためにコードを使用します.
メッセージ表示
クライアントがサーバにリクエストを送信し、最新のデータをポーリングすることを考えています.
<script> function showmessage(){ var ajax = new XMLHttpRequest(); // ajax.onreadystatechange = function(){ if(ajax.readyState==4) { //alert(ajax.responseText); // eval('var data = '+ajax.responseText); // data ， var s = ""; for(var i = 0 ; i < data.length;i++){ data[i]; s += "("+data[i].add_time+") >>>"; s += "<p style='color:"+data[i].color+";'>"; s += data[i].sender +" " + data[i].receiver +" "+ data[i].biaoqing+" ：" + data[i].msg; s += "</p>"; } // var showmessage = document.getElementById("up"); showmessage.innerHTML += s; } } ajax.open('get','./chatroom.php'); ajax.send(null); } // window.onload = function(){ //showmessage(); // , setInterval("showmessage()",3000); } </script>里売弄が重要なのはsetInterval関数の使用であり,間隔的なトリガ要求イベントを実現することである.
メッセージ送信
メッセージ送信については、フォーム形式でサーバに送ればよい.ここでは現在のHtml 5の最新技術、FormDataを使用していますが、一般的に現在の主流の現代ブラウザはこの技術をサポートしています.FormDataを使用すると、フォームのデータを簡単に取得できます.
注意:FormDataはフォームデータを収集する際にキー値ペアで収集されるため、対応するフォームアイテムには必ずname属性が必要です.そうしないと、フォームはそのアイテムのデータ値を収集できません.
<script> function send(){ // var form = document.getElementsByTagName('form')[0]; var formdata = new FormData(form); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4) { //alert(xhr.resposneText); document.getElementById("result").innerHTML = xhr.responseText; setTimeout("hideresult()",2000); } } xhr.open('post','./chatroom_insert.php'); xhr.send(formdata); document.getElementById("msg").value=""; //return false; } // 2 function hideresult(){ document.getElementById('result').innerHTML = ""; } </script>興味深いことに、settimeout関数が実現する機能です.サーバ側からのフィードバック情報を得た後、送信ボタンの後ろにタイムリーに更新し、ユーザーに良い体験を与えます.
最適化
ここをやり終えると基本的にチャットが実現します.しかし、実現の効果は非常によくなく、主に以下の点があります.
重複しないデータの表示
重複性を示すデータについては、where文を使用していないため、毎回すべてのデータを取得しているようです.どうすれば最新のデータを手に入れることができるのか考えてみましょう.また、異なるクライアントに対しても配慮しなければならない.
ハリウッドの原則:私を探しに来ないでください.私はあなたを探しに行きます.これも多くのソフトウェア開発理念の一つの体現で、お客様にサーバーの棒で殺すのではなく、どんなデータを得るかを決めさせます.したがって、クライアントがデータ要求を送信する上で最適化する必要があります.
<script> // id ， var maxId = 0; function showmessage(){ var ajax = new XMLHttpRequest(); // ajax.onreadystatechange = function(){ if(ajax.readyState==4) { //alert(ajax.responseText); // eval('var data = '+ajax.responseText); // data ， var s = ""; for(var i = 0 ; i < data.length;i++){ data[i]; s += "("+data[i].add_time+") >>>"; s += "<p style='color:"+data[i].color+";'>"; s += data[i].sender +" " + data[i].receiver +" "+ data[i].biaoqing+" ：" + data[i].msg; s += "</p>"; // id maxId = data[i].id; } // var showmessage = document.getElementById("up"); showmessage.innerHTML += s; //showmessage.scrollTop div // divnode.scrollHeight div showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height; } } ajax.open('get','./chatroom.php?maxId='+maxId); ajax.send(null); } // window.onload = function(){ //showmessage(); // , setInterval("showmessage()",3000); } </script>表示の最適化
表示インタフェースの最適化は不可欠であり、データを送信した後、最新のメッセージを手動で表示することを許す人はいません.表示領域のdivを設定します.
スクロールバーを付ける
<style> #up { height:320px; width:100%; overflow:auto; } </style>毎回最新のメッセージが表示されます
はっきり言って、底のdivを永遠に最初に表示させます.
//showmessage.scrollTop div
// divnode.scrollHeight div
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;完全なコード
フロントエンドコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax </title>
<style> #up { height:320px; width:100%; overflow:auto; } </style>
<script> // id ， var maxId = 0; function showmessage(){ var ajax = new XMLHttpRequest(); // ajax.onreadystatechange = function(){ if(ajax.readyState==4) { //alert(ajax.responseText); // eval('var data = '+ajax.responseText); // data ， var s = ""; for(var i = 0 ; i < data.length;i++){ data[i]; s += "("+data[i].add_time+") >>>"; s += "<p style='color:"+data[i].color+";'>"; s += data[i].sender +" " + data[i].receiver +" "+ data[i].biaoqing+" ：" + data[i].msg; s += "</p>"; // id maxId = data[i].id; } // var showmessage = document.getElementById("up"); showmessage.innerHTML += s; //showmessage.scrollTop div // divnode.scrollHeight div showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height; } } ajax.open('get','./chatroom.php?maxId='+maxId); ajax.send(null); } // window.onload = function(){ //showmessage(); // , setInterval("showmessage()",3000); } </script>
</head>
<body style="background-color:silver">
<div id="main">
<h3> </h3>
<div id="up">
</div>
<hr />
<h3> </h3>
<div id="bottom">
<form action="./chatroom_insert.php">
<div id="chat_up">
<span> </span>
<input type="color" name="color"/>
<span> </span>
<select name="biaoqing">
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
<span> </span>
<select name="receiver">
<option value=""> </option>
<option value=" "> </option>
<option value=" "> </option>
<option value=" "> </option>
</select>
</div>
<div id="chat_bottom">
<script> function send(){ // var form = document.getElementsByTagName('form')[0]; var formdata = new FormData(form); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4) { //alert(xhr.resposneText); document.getElementById("result").innerHTML = xhr.responseText; setTimeout("hideresult()",2000); } } xhr.open('post','./chatroom_insert.php'); xhr.send(formdata); document.getElementById("msg").value=""; //return false; } // 2 function hideresult(){ document.getElementById('result').innerHTML = ""; } </script>
<textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
<input type="button" value=" " onclick="send()" />
：<span id="result"></span>
</div>
</form>
</div>
</div>
</body>
</html>
データベーステーブル構造
mysql> desc message; +----------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra | +----------+--------------+------+-----+---------+----------------+
| id | int(100) | NO | PRI | NULL | auto_increment | | msg | varchar(255) | NO | | NULL | | | sender | varchar(30) | NO | | NULL | | | receiver | varchar(30) | NO | | NULL | | | color | varchar(10) | YES | | NULL | | | biaoqing | varchar(10) | YES | | NULL | | | add_time | datetime | YES | | NULL | |
+----------+--------------+------+-----+---------+----------------+
7 rows in set (0.00 sec)サーバ側コード
<?php // $conn = mysql_connect('localhost','root','mysql'); mysql_select_db('test'); mysql_query('set names utf8'); $maxId = $_GET['maxId']; // ， id id $sql = "select * from message where id >"."'$maxId'"; $qry = mysql_query($sql); $info = array(); while($rst = mysql_fetch_assoc($qry)){ $info[] = $rst; } // json echo json_encode($info); ?>総括と展望
まとめ
完全な小さな例はこうです.振り返ってみると、今日の収穫は: