XML.com

XML.com
  Home | Resources | FAQs |
    
  Resource Centers
Business
Databases
Graphics
Metadata
Mobile
Programming
Schemas
Style
Web
Web Services

   Essentials
XML คืออะไร?
XSLT คืออะไร?
XLink คืออะไร?
XML Schema คืออาไร?
RDF หละคืออาไร?
Web Services คืออาไร?

  Find
Search
Article Archive
FAQs

  Guides
XML Resources

Events Calendar






 

Down Load Source Code (5Kb)

ระบบ CHAT ด้วย XML ล้วนๆ โดยไม่ต้องใช้ DATA BASE (ASP)
ไปเจอ Source Code ที่คิดว่าน่าจะนำไปดัดแปลเพิ่มลูกเล่นสำหรับงานอื่นๆ ได้ นับว่าน่าสนใจและศึกษาการทำงานเป็นอย่างยิ่ง

 

<?xml version="1.0"?>
<chat>
<line>
<text>Welcome to the Chat Area. These are the last few messages</text>
<from>Author</from>
<style>says</style><colour>#000000</colour>
</line>

</chat>
โครงสร้างข้อมูล
  ทั้งนี้ในฝั่ง server ต้องเริ่มต้นด้วยการ initialize chat เพื่อ set ค่าต่างๆ ก่อน  
  <%@ Language=javascript %>
<%
//สร้าง Chat Object ใหม่ และใส่ค่าเริ่มต้น
xmldoc=new ActiveXObject("microsoft.xmldom");
xmldoc.async=false;
xmldoc.loadXML("<chat/>");

//เก็บ XML ไว้ใน APPlication object
Application("chatXML")=xmldoc.xml;
Application("lastCutOff")=99999;
%>
<HTML>
<BODY>
The chat room has been started.
<a href="chat.htm">Start chatting</a>
</BODY>
</HTML>

File: StartChat.asp
  ไฟล์ที่ ต้องแจกจ่าย ให้แต่ละคนเข้ามาร่วม Chat คือ file Chat.htm ซึ่งจะ ไปดึงข้อมูลมาทุกๆ 2 วินาที (ตั้งค่าได้)  
  <HTML>
<HEAD>
<TITLE>Chat</TITLE>
<style type="text/css">
<!--
.on { visibility: on;}
.off { visibility: hidden;}
-->
</style>
<SCRIPT language="Javascript">
var init=true;
var notLoadingChat=true;

function formatText(textstr){
//แปลง < ให้เป็น &lt;
return textstr.replace(/</g," ");

}


function getChat(){
//ใช้ HTTPRequest เพื่อไปดึง Chat ล่าสุด

if (notLoadingChat){
notLoadingChat=false;
objAsp= new ActiveXObject("MICROSOFT.XMLHTTP");
postXML= new ActiveXObject("MICROSOFT.XMLDOM");
postXML.async=false;

objAsp.onreadystatechange=checkIfLoaded;
//ส่งข้อมูลกรณีเป็นการ chat ข้อความแรก
var postXMLStr="<chat><firsttime>" +init +"</firsttime></chat>";
postXML.loadXML(postXMLStr);
init=false;
objAsp.open("POST", "getChat.asp", true); // ส่งไป
objAsp.send(postXMLStr);
}
}
function updateChat(){
//ใช้ HTTP Request เพื่อไป Update ข้อมูล XML ที่อยู่บน Server
colourSelected="000000";
//ถ้าไม่มีข้อมูล ก็ไม่ต้องส่ง
if (textmsg.value!=""){
// วน loop ตรวจสอบว่า เลือก สีอะไรไป
var textmessage=formatText(textmsg.value);
for (var j=0;j<5;j++){
if (colourSelect[j].checked){
if (colourSelect[j].value=="other"){
colourSelected=userColourCode.value;
}else{
colourSelected=colourSelect[j].value;
}
}
}
objAsp2= new ActiveXObject("MICROSOFT.XMLHTTP");
postXML= new ActiveXObject("MICROSOFT.XMLDOM");
postXML.async=false;
postXMLStr="<line><text>" +textmessage +"</text><from>" +username.value +"</from><style>" +style.value +"</style><colour>" +colourSelected +"</colour></line>";
postXML.loadXML(postXMLStr);
Address="updateChat.asp";
objAsp2.open("POST", Address, true); // ส่งข้อมูลไป update โดยส่งให้ file updateChat.asp
objAsp2.send(postXML);
textmsg.value="";
}
}

function checkIfLoaded(){

//ใช้ HTTP Request ไปดึงข้อมูลมาแสดงผล โดยตรวจสอบด้วยว่า ข้อมูล XML มีข้อผิดพลาดหรือไม่
if (objAsp.readystate==4){
notLoadingChat=true;
if (objAsp.responseXML.xml!=""){
var newChatXML=objAsp.responseXML;
var lineXML=newChatXML.documentElement.selectNodes("line");
for (var i=0;i<lineXML.length;i++){ // วน loop แสดงผล
lineNodes=lineXML(i);
chatText=lineNodes.selectSingleNode("text");
chatFrom=lineNodes.selectSingleNode("from");
chatStyle=lineNodes.selectSingleNode("style");
chatColour=lineNodes.selectSingleNode("colour");
ChatArea.innerHTML=ChatArea.innerHTML +"<FONT color=" +chatColour.text +"><B>" +chatFrom.text +"</B> " +chatStyle.text +" " +chatText.text +"</FONT><BR/><BR/>";
ChatArea.scrollIntoView(false);
}
}
}
}

</SCRIPT>
<SCRIPT for="window" event="onLoad">
// ตั้งเวลาให้ไป ดึงข้อมูล ทุกๆ 2 วินาที
window.setInterval(getChat,2000);
</SCRIPT>
</HEAD>
<BODY bgcolor="#009999">
<xml id="chatXML" src="getChat.asp?last=0"></xml>
<div align="center"><font face="Georgia, Times New Roman, Times, serif"><b>CHAT WITH XML :: THAIXML.COM</b></font><br>
</div>
<table width="90%" border="0" align="center" cellspacing="0" cellpadding="1" bgcolor="#000000">
<tr>
<td>
<table bgcolor="#CCCC99" width="100%" cellspacing="5">
<tr>
<td width="11%">Name</td>
<td width="89%">
<input id="username" type="textbox" value="guest" name="textbox"/>
</td>
</tr>
<tr>
<td width="11%">Speech style</td>
<td width="89%">
<input id="style" type="textbox" value="says" name="textbox2"/>
</td>
</tr>
<tr>
<td width="11%">Message</td>
<td width="89%">
<textarea id ="textmsg" cols="60" rows="3" STYLE="overflow:hidden" name="textbox2"></textarea>
</td>
</tr>
<tr>
<td width="11%">
<input type="button" value="submit" onClick="updateChat()"/ id=button1 name=button1>
</td>
<td valign="center" width="89%" bgcolor="#FFFFCC">
<input name="colourSelect" type="radio" value="000000" onClick="userColour.className='off'" checked>Black
<input name="colourSelect" type="radio" value="000099" onClick="userColour.className='off'"><font color="#000099">Blue</font>
<input name="colourSelect" type="radio" value="CC0000" onClick="userColour.className='off'"><font color="#CC0000">Red</font>
<input name="colourSelect" type="radio" value="009900" onClick="userColour.className='off'"><font color="#009900">Green</font>
<input name="colourSelect" type="radio" value="other" onClick="userColour.className='on'">other
<SPAN ID="userColour" class="off">- Colour Code:#<input id="userColourCode" type="textbox"/></SPAN>
</td>
</tr>
</table>
</td>
</tr>
</table>
<DIV align="center">
<DIV align="left" STYLE="overflow-y:scroll;width=90%;height=50%;background-color=#FFFFD0;">
<DIV id="ChatArea"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>

 
 

สำหรับ อีก 2 ไฟล์ที่ เป็น ASP นั้นอยู่ใน Source code

 

ที่มา : TOPXML.COM

 
 




 
Contact Us | Our Mission | Privacy Policy | Advertise With Us | Site Help
Copyright © 2002 Copy เค้ามาจาก www.xml.com จะได้ดูเหมือนๆกัน