บทนำ:
ห้องสนทนาธรรมดาห้องแรกของฉันเขียนด้วย ASP 3.0 ไม่มีอะไรมากไปกว่ากล่องข้อความสองกล่อง โดยจะส่งข้อความไปยังตัวแปรโปรแกรมแล้วแสดงบนหน้าเว็บที่รีเฟรชทุกวินาที ในยุคนั้น ห้องสนทนาจริงต้องใช้ Java Applet หรือ ActiveX control แต่ทั้งหมดนี้เปลี่ยนไปหลังจากการมาถึงของ AJAX AJAX เป็นกลไกการสื่อสารแบบอะซิงโครนัสที่รวม XML และ JavaScript ตอนนี้เราสามารถทำได้โดยใช้เพียงโค้ดเซิร์ฟเวอร์และ JavaScript เพียงเล็กน้อย บทความนี้จะแนะนำวิธีการใช้เทคโนโลยี AJAX เพื่อสร้างห้องสนทนาแบบง่ายๆ
โปรแกรมตัวอย่าง
โปรแกรมตัวอย่างคือห้องสนทนาที่มีผู้ใช้หลายรายห้องเดียว จะเก็บรายชื่อผู้ใช้ที่เข้าสู่ระบบไว้ภายใน รายการจะลบผู้ใช้ที่มีเซสชันที่หมดอายุ ขณะเดียวกันยังรองรับคำสั่งบางคำสั่ง เช่น /admin Clear เพื่อเคลียร์ห้องสนทนา /nick [Name] เพื่อเปลี่ยนชื่อผู้ใช้งาน
คุณต้องรู้ด้วยว่า
โปรแกรมนี้ใช้คลาสที่เรียกว่า ChatEngine คลาสนี้ควบคุมผู้ใช้และข้อความทั้งหมด ผู้ใช้จะถูกจัดเก็บไว้ใน Hashtable และข้อความจะถูกจัดเก็บไว้ใน StringCollection:
ผู้ใช้ Hashtable; การแชท StringCollection;
อินสแตนซ์ส่วนกลางของ ChatEngine ถูกวางไว้ใน Global.asax.cs:
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
ฟังก์ชัน JavaScript ใช้เพื่อแสดงข้อมูลในตัวแปรร่วมบนเพจแบบอะซิงโครนัส:
ฟังก์ชัน setTimers(){timeID = window.setTimeout( "updateAll()", RefreshRate );}
ใช้ชื่อและ ID ที่ผู้ใช้แต่ละคนให้มาเพื่อระบุผู้ใช้:
public void AddUser(string id, string user){//ตรวจสอบให้แน่ใจว่าไม่มีชื่อผู้ใช้อยู่แล้ว if(!UserExists(user)){//add user to users listusers เพิ่ม( id, ผู้ใช้ );//แสดงข้อความแจ้งเตือนไปยังผู้ใช้ทุกคน chat.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}
ภาพหน้าจอและขั้นตอนการใช้งาน
หน้าแรกจะแสดงข้อมูลพื้นฐานของห้องสนทนา เช่น จำนวนคนในห้องสนทนา และขนาดของ ChatLog
เพื่อให้สามารถเข้าสู่ระบบห้องสนทนาได้ จะต้องระบุชื่อ
เมื่อคลิกปุ่มเข้าสู่ระบบแล้ว รหัสต่อไปนี้จะถูกดำเนินการ:
protected void Login( object sender, EventArgs e ){string user = txtUsername.Text;if( !ValidateNick( user ) ) return;if( Global.Engine.UserExists( user ) ){lblErrorMsg = "มีผู้ใช้ที่มีชื่อ " +" นี้อยู่แล้ว ลองอีกครั้ง"return;}Response.Redirect( "Server.aspx?action=Login&u=" + user );}
หลังจากการตรวจสอบความถูกต้อง ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังเพจอื่นที่ใช้ฟังก์ชัน AddUser เพื่อเพิ่มผู้ใช้ลงในรายชื่อผู้ใช้ เมื่อทั้งหมดนี้เสร็จสิ้น ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้า Chat.aspx และฟังก์ชัน JavaScript ต่อไปนี้จะถูกดำเนินการบนหน้านี้:
<script type="text/javascript">sniffBrowserType();//แสดงการโหลด.. screenshowLoadScreen();//ตั้งค่าตัวจับเวลา javascript และ //โหลดรายชื่อผู้ใช้และข้อความ setTimers();setFocus('mytext');< /script><input type="text" class="mytext"id="mytext" onkeydown="captureReturn(event)">
เมื่อผู้ใช้กรอกข้อความแล้วกด Enter รหัสต่อไปนี้จะถูกดำเนินการ:
// จับคีย์ Enter บนกล่องอินพุตและโพสต์ฟังก์ชันข้อความ captureReturn( event ){if(event. ซึ่ง || event.keyCode){if ((event.ซึ่ง == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}ฟังก์ชัน postText(){rnd++;//ล้างกล่องข้อความ firstchatbox = getElement( "mytext" );chat = chatbox value;chatbox.value = ""//รับ GUID ผู้ใช้จาก urluserid = location.search.substring (1, location.search.length );//สร้าง Ajax Server URLurl = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//สร้างและตั้งค่าอินสแตนซ์ // ของคำขอ XMLHTTP ที่เหมาะสม objectreq = getAjax();//อัปเดตหน้าด้วย new messagereq.onreadystatechange = function( ) {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
เสร็จแล้ว! นั่นคือทั้งหมดที่ ไม่มีอะไรพิเศษ ดาวน์โหลดโปรแกรมตัวอย่างและทำความเข้าใจโค้ด!
ผู้เขียนต้นฉบับ ดาฮาน อับโด
แปลที่อยู่บทความ
ต้นฉบับ yueue
ดาวน์โหลดโปรแกรมตัวอย่าง:
ดาวน์โหลดcodeproject
ท้องถิ่น