Pendahuluan:
Ruang Obrolan sederhana pertama saya ditulis dalam ASP 3.0. Ini tidak lebih dari dua Kotak Teks, mereka mengirim pesan ke variabel program dan kemudian menampilkannya pada halaman yang disegarkan setiap detik. Di era itu, ruang obrolan sebenarnya harus menggunakan kontrol Java Applet atau ActiveX. Namun semua itu berubah setelah kedatangan AJAX. AJAX adalah mekanisme komunikasi asynchronous yang menggabungkan XML dan JavaScript. Sekarang kita bisa melakukannya hanya dengan kode server dan sedikit JavaScript. Artikel ini memperkenalkan cara menggunakan teknologi AJAX untuk membangun ruang obrolan sederhana.
Contoh Program
Contoh program adalah ruang obrolan multi-pengguna tunggal. Itu memelihara daftar pengguna yang masuk secara internal. Daftar tersebut akan menghapus pengguna dengan sesi kedaluwarsa. Pada saat yang sama, ini juga mendukung beberapa perintah seperti /admin Clear untuk menghapus ruang obrolan /nick [Name] untuk mengubah nama pengguna.
Perlu Anda ketahui juga bahwa
program ini menggunakan kelas bernama ChatEngine. Kelas ini mengontrol semua pengguna dan pesan. Pengguna disimpan dalam Hashtable, dan pesan disimpan dalam StringCollection:
Pengguna Hashtable;Obrolan StringCollection;
Contoh global ChatEngine ditempatkan di Global.asax.cs:
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
Fungsi JavaScript digunakan untuk menampilkan data dalam variabel global pada halaman secara asinkron:
function setTimers(){timeID = window.setTimeout( "updateAll()", refreshRate );}
Gunakan nama dan ID yang diberikan oleh setiap pengguna untuk mengidentifikasi pengguna:
public void AddUser(string id, string user){//pastikan nama pengguna belum adaif(!UserExists(user)){//tambahkan pengguna ke daftar penggunapengguna. Tambahkan( id, pengguna );//tampilkan pesan notifikasi ke semua pengguna obrolan.Tambahkan( this.MakeServerMessage(string.Format(joinedfmt, pengguna ) ));}}
Tangkapan layar dan langkah implementasi
Halaman beranda menampilkan informasi dasar ruang obrolan, seperti berapa banyak orang di ruang obrolan dan ukuran ChatLog.
Untuk dapat masuk ke ruang obrolan, nama harus diberikan.
Ketika tombol Login diklik. Kode berikut akan dieksekusi:
protected void Login( pengirim objek, EventArgs e ){string user = txtUsername.Text;if( !ValidateNick( user ) ) return;if( Global.Engine.UserExists( user ) ){lblErrorMsg = "Pengguna dengan nama " +"ini sudah ada, coba lagi."return;}Response.Redirect( "Server.aspx?action=Login&u=" + pengguna );}
Setelah beberapa validasi, pengguna diarahkan ke halaman lain yang menggunakan fungsi AddUser untuk menambahkan pengguna ke daftar pengguna. Ketika semua ini selesai. Pengguna akan diarahkan ke halaman Chat.aspx, dan fungsi JavaScript berikut akan dijalankan di halaman ini:
<script type="text/javascript">sniffBrowserType();//Menampilkan pemuatan.. screenshowLoadScreen();//Setel pengatur waktu javascript dan //muat daftar pengguna dan pesan setTimers();setFocus('mytext');< /skrip><input type="text" class="mytext"id="mytext" onkeydown="captureReturn(event)">
Saat pengguna memasukkan teks dan menekan Enter. Kode berikut akan dieksekusi:
// Tangkap tombol enter pada kotak input dan posting messagefunction captureReturn( event ){if(event.which || event.keyCode){if ((event.which == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}fungsi postText(){rnd++;//Kosongkan kotak teks firstchatbox = getElement( "mytext" );chat = chatbox . value;chatbox.value = ""//dapatkan GUID pengguna dari urluserid = location.search.substring( 1, location.search.length );//membangun Ajax Server URLurl = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//Buat dan atur instance //Objek Permintaan XMLHTTP yang sesuai = getAjax();//Perbarui halaman dengan messagereq.onreadystatechange = function( ) baru {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
Selesai! Itu saja. Tidak ada yang istimewa, unduh contoh program dan pahami kodenya!
Penulis asliDahan Abdo
Program contoh unduhan
alamat artikel asli
yueue yang diterjemahkan
:unduhan lokal
codeproject