Introduction :
Mon premier salon de discussion simple a été écrit en ASP 3.0. Ce n'est rien de plus que deux TextBox, elles envoient des messages aux variables du programme puis les affichent sur une page qui s'actualise toutes les secondes. À cette époque, un véritable salon de discussion devait utiliser une applet Java ou un contrôle ActiveX. Mais tout cela a changé après l’arrivée d’AJAX. AJAX est un mécanisme de communication asynchrone qui combine XML et JavaScript. Maintenant, nous pouvons le faire avec juste du code serveur et un peu de JavaScript. Cet article explique comment utiliser la technologie AJAX pour créer une salle de discussion simple.
Exemple de programme
L'exemple de programme est une salle de discussion multi-utilisateurs unique. Il maintient une liste des utilisateurs connectés en interne. La liste supprimera les utilisateurs dont les sessions ont expiré. Dans le même temps, il prend également en charge certaines commandes telles que /admin Clear pour effacer la salle de discussion /nick [Name] pour modifier le nom d'utilisateur.
Vous devez également savoir que
ce programme utilise une classe appelée ChatEngine. Cette classe contrôle tous les utilisateurs et messages. Les utilisateurs sont stockés dans une table de hachage et les messages sont stockés dans une StringCollection :
utilisateurs de la table de hachage ; chat StringCollection ;
Une instance globale de ChatEngine est placée dans Global.asax.cs :
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
Une fonction JavaScript permet d'afficher de manière asynchrone les données de la variable globale sur la page :
function setTimers(){timeID = window.setTimeout( "updateAll()", rafraîchirRate );}
Utilisez le nom et l'ID fournis par chaque utilisateur pour identifier les utilisateurs :
public void AddUser(string id, string user){//assurez-vous que le nom d'utilisateur n'existe pas déjà si(!UserExists(user)){//ajoutez l'utilisateur à la liste des utilisateurs. Add( id, user );//afficher un message de notification à tous les utilisateurs chat.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}
Captures d'écran et étapes de mise en œuvre
La page d'accueil affiche les informations de base de la salle de discussion, telles que le nombre de personnes présentes dans la salle de discussion et la taille du ChatLog.
Afin de pouvoir vous connecter au salon de discussion, un nom doit être fourni.
Lorsque le bouton Connexion est cliqué. Le code suivant sera exécuté :
protected void Login( object sender, EventArgs e ){string user = txtUsername.Text;if( !ValidateNick( user ) ) return;if( Global.Engine.UserExists( user ) ){lblErrorMsg. = "Un utilisateur avec ce " +"nom existe déjà, réessayez."return;}Response.Redirect( "Server.aspx?action=Login&u=" + user );}
Après quelques validations, l'utilisateur est redirigé vers une autre page qui utilise la fonction AddUser pour ajouter l'utilisateur à la liste des utilisateurs. Quand tout cela sera fait. L'utilisateur sera redirigé vers la page Chat.aspx et la fonction JavaScript suivante sera exécutée sur cette page :
<script type="text/javascript">sniffBrowserType();//Affiche le chargement.. screenshowLoadScreen();//Définit le minuteur javascript et //charge la liste des utilisateurs et les messages setTimers();setFocus('mytext');< /script><input type="text" class="mytext"id="mytext" onkeydown="captureReturn(event)">
Lorsque l'utilisateur saisit du texte et appuie sur Entrée. Le code suivant sera exécuté :
// Capturez la touche Entrée dans la zone de saisie et postez la fonction captureReturn( event ){if(event.which || event.keyCode){if ((event.which == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//Effacer la zone de texte firstchatbox = getElement( "mytext" );chat = chatbox . value;chatbox.value = ""//obtenir le GUID utilisateur à partir de urluserid = location.search.substring( 1, location.search.length );//construct Ajax Server URLurl = 'Server.aspx?action=PostMsg&u=' + userid + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//Créer et définir l'instance //de la requête XMLHTTP appropriée objectreq = getAjax();//Mettre à jour la page avec le nouveau messagereq.onreadystatechange = function( ) {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
Fait! C'est tout. Rien de spécial, téléchargez l'exemple de programme et comprenez le code !
Auteur originalDahan Abdo
de l'adresse de l'article original
yueue traduit
:
téléchargement local
du projet de code