[Web Design] 5分鐘理解用AJAX做聊天室"傳訊"功能

張貼者： 日期：

簡介

本篇小專案記錄了如何運用所學的AJAX來做到聊天室的功能，這次專案我主要是Focus在”傳訊功能”上，至於聊天室其他的功能，像是登入系統、傳訊時間、傳訊人ID顯示等等，這些都不是本專案要做的重點，所以程式碼會顯得簡單一些，希望這樣大家也比較容易掌握到重點。建議讀者先看過我整理的AJAX課程筆記會比較快理解本篇的程式碼。


內文

那麼我們就先來看看HTML簡單的設計吧，如下: 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type = "text/javascript" src = "ChatRoom.js"></script>
</head>

<body onload="process()">
<div id = "ShowPanel" style="width:800; height:480; border-style: solid; border-width: 1px; overflow:scroll;" >
</div>

<input type="Text" placeholder="文字輸入欄" id = "TextInput" style="position:absolute; left:10; top:550;">
<input type="submit" value = "傳送" onclick = "sendprocess()" style="position:absolute; left:170; top:550;">

</body>

</html>

結果



接著，我們將所學課程的XML內文也稍微改了一下，如下: 

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

$text = $_GET['TextInput'];

$file = fopen('TextFileName.txt','a');
if(!empty($text)){
fwrite($file,$text." ");
}
fclose($file);

echo '<response>';

$read = file('TextFileName.txt');

foreach($read as $text){
if(!empty($text)){
    echo $text;
}
}

echo '</response>';
?>

簡單說明一下，XML的內文除了取得我們從TextInput欄位輸入的文字之外，也會寫入到我們自己新增的文字檔內(請新增一個文字檔在同一個目錄下，檔名可自行取名)，且每次新寫入的文字都以”(空格)”隔開。接著再讀取文字檔內的內文，將它供給JS取回顯示。

接著JS要處理的內容有哪些呢?主要分成兩個部分，一個是週期性的去取回文字檔內的寫入內容並顯示，另一個則是當按下傳送鈕時，只做一次性的處理(寫入並顯示)。那麼，我們就來看看JS的程式碼吧!如下: 

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
var xmlHttp;

if(window.ActiveXObject){ 
    try{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
        xmlHttp = false;
    }
}else{ 
    try{
        xmlHttp = new XMLHttpRequest();
    }catch(e){
        xmlHttp = false;
    }
}

if(!xmlHttp)
    alert("Cant create that object !")
else
    return xmlHttp;
}

function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
    xmlHttp.open("GET", "ChatXML.php",true);
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send(null);
}else{
    setTimeout('process()',1000);
}
}

function handleServerResponse(){
if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){    
        xmlResponse = xmlHttp.responseXML; 
        xmlDocumentElement = xmlResponse.documentElement;
        message = xmlDocumentElement.firstChild.data;
        message = message.replace(/ /g,"<br/>");
        document.getElementById("ShowPanel").innerHTML = message;
        setTimeout('process()', 1000);
    }
    else{
        alert('Someting went wrong !');
    }
}
}

function sendprocess(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
    text = encodeURIComponent(document.getElementById("TextInput").value);
    xmlHttp.open("GET", "ChatXML.php?TextInput="+text,true);
    xmlHttp.onreadystatechange = sendhandleServerResponse;
    xmlHttp.send(null);
}else{
    setTimeout('sendprocess()',1000);
}
}

function sendhandleServerResponse(){
if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){    
        xmlResponse = xmlHttp.responseXML; 
        xmlDocumentElement = xmlResponse.documentElement;
        message = xmlDocumentElement.firstChild.data;
        message = message.replace(/ /g,"<br/>");
        document.getElementById("ShowPanel").innerHTML = message;
    }
    else{
        alert('Someting went wrong !');
    }
}
}

process()函式是從課程筆記”[AJAX] Lesson 3 - 使用JS即時更新版面“修改而得，在這裡主要處理的就是週期性的去從XML取回文字檔內的內容，而handleServerResponse()函式就是把取得的資料顯示出來，這裡要注意的是.replace()，由於XML每次新寫入的文字都是以空格格開，因此必須用此函式來將空格用
(換行指令)來取代。至於傳送紐的觸發事件函式就是sendprocess()和sendhandleServerResponse()，其處理內容跟上述及課程筆記裡都可以輕易理解，我就不再多說明了。
點我看結果

參考

  1. [AJAX] Lesson 3 - 使用JS即時更新版面
  2. Bucky Roberts的Youtube教學影片

留言

張貼留言