Einleitung:
Mein erster einfacher Chatroom wurde in ASP 3.0 geschrieben. Es sind nichts weiter als zwei TextBoxen, sie senden Nachrichten an Programmvariablen und zeigen sie dann auf einer Seite an, die jede Sekunde aktualisiert wird. Damals musste ein echter Chatroom ein Java-Applet oder eine ActiveX-Steuerung verwenden. Aber all das änderte sich nach der Einführung von AJAX. AJAX ist ein asynchroner Kommunikationsmechanismus, der XML und JavaScript kombiniert. Jetzt können wir es nur mit Servercode und ein wenig JavaScript tun. In diesem Artikel wird erläutert, wie Sie mithilfe der AJAX-Technologie einen einfachen Chatroom erstellen.
Beispielprogramm
Das Beispielprogramm ist ein einzelner Mehrbenutzer-Chatroom. Es verwaltet intern eine Liste der angemeldeten Benutzer. Die Liste entfernt Benutzer mit abgelaufenen Sitzungen. Gleichzeitig werden auch einige Befehle unterstützt, z. B. /admin Clear zum Löschen des Chatrooms /nick [Name] zum Ändern des Benutzernamens.
Sie müssen auch wissen, dass
dieses Programm eine Klasse namens ChatEngine verwendet. Diese Klasse steuert alle Benutzer und Nachrichten. Benutzer werden in einer Hashtable gespeichert und Nachrichten werden in einer StringCollection gespeichert:
Hashtable users;StringCollection chat;
Eine globale Instanz von ChatEngine wird in Global.asax.cs platziert:
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
Eine JavaScript-Funktion wird verwendet, um die Daten in der globalen Variablen auf der Seite asynchron anzuzeigen:
function setTimers(){timeID = window.setTimeout( "updateAll()", restartRate );}
Verwenden Sie den von jedem Benutzer bereitgestellten Namen und die ID, um Benutzer zu identifizieren:
public void AddUser(string id, string user){//stellen Sie sicher, dass der Benutzername nicht bereits existiert.if(!UserExists(user)){//add user to user listusers. Add( id, user );//Anzeige einer Benachrichtigung für alle Benutzer chat.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}
Screenshots und Implementierungsschritte
Auf der Startseite werden die grundlegenden Informationen des Chatrooms angezeigt, z. B. wie viele Personen sich im Chatroom befinden und wie groß das ChatLog ist.
Um sich im Chatraum anmelden zu können, muss ein Name angegeben werden.
Wenn auf die Schaltfläche „Anmelden“ geklickt wird. Der folgende Code wird ausgeführt:
protected void Login( object sender, EventArgs e ){string user = txtUsername.Text;if( !ValidateNick( user ) ) return;if( Global.Engine.UserExists( user ) ){lblErrorMsg Text = „Ein Benutzer mit diesem „ +“Namen existiert bereits, versuchen Sie es erneut.“return;}Response.Redirect( „Server.aspx?action=Login&u=" + user );}
Nach einer gewissen Validierung wird der Benutzer zu einer anderen Seite weitergeleitet, die die AddUser-Funktion verwendet, um den Benutzer zur Benutzerliste hinzuzufügen. Wenn das alles erledigt ist. Der Benutzer wird zur Seite Chat.aspx weitergeleitet und die folgende JavaScript-Funktion wird auf dieser Seite ausgeführt:
<script type="text/javascript">sniffBrowserType();//Zeigt das Laden an.. screenshowLoadScreen();//Setzt den Javascript-Timer und //lädt Benutzerliste und Nachrichten setTimers();setFocus('mytext');< /script><input type="text" class="mytext"id="mytext" onkeydown="captureReturn(event)">
Wenn der Benutzer Text eingibt und die Eingabetaste drückt. Der folgende Code wird ausgeführt:
// Erfassen Sie die Eingabetaste im Eingabefeld und posten Sie die Nachrichtfunction captureReturn( event ){if(event.which || event.keyCode){if ((event.which == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//Textfeld löschen firstchatbox = getElement( "mytext" );chat = chatbox . value;chatbox.value = ""//Get User GUID from urluserid = location.search.substring( 1, location.search.length );//construct Ajax Server URLurl = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//Erstellen und legen Sie die Instanz //des entsprechenden XMLHTTP-Request-Objekts festreq = getAjax();//Seite mit neuer Nachricht aktualisierenreq.onreadystatechange = function( ) {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
Erledigt! Das ist alles. Nichts Besonderes, laden Sie das Beispielprogramm herunter und verstehen Sie den Code!
Originalautor: Dahan Abdo
Beispielprogramm zum Herunterladen
der Originalartikeladresse
von Yueue
:Lokaler
Codeproject
-Download