Introducción:
Mi primera sala de chat sencilla fue escrita en ASP 3.0. No son más que dos TextBoxes, envían mensajes a variables del programa y luego los muestran en una página que se actualiza cada segundo. En esa época, una sala de chat real tenía que usar Java Applet o control ActiveX. Pero todo esto cambió tras la llegada de AJAX. AJAX es un mecanismo de comunicación asincrónico que combina XML y JavaScript. Ahora podemos hacerlo sólo con código de servidor y un poco de JavaScript. Este artículo presenta cómo utilizar la tecnología AJAX para crear una sala de chat sencilla.
Programa de muestra
El programa de muestra es una única sala de chat multiusuario. Mantiene una lista de usuarios conectados internamente. La lista eliminará a los usuarios con sesiones caducadas. Al mismo tiempo, también admite algunos comandos como /admin Clear para limpiar la sala de chat /nick [Nombre] para cambiar el nombre de usuario.
También debes saber que
este programa utiliza una clase llamada ChatEngine. Esta clase controla todos los usuarios y mensajes. Los usuarios se almacenan en una Hashtable y los mensajes se almacenan en una StringCollection:
usuarios de Hashtable;chat de StringCollection;
Una instancia global de ChatEngine se coloca en Global.asax.cs:
public static UChat.ChatEngine.IChatEngine Engine =new UChat.ChatEngine.ChatEngine();
Se utiliza una función de JavaScript para mostrar de forma asincrónica los datos en la variable global de la página:
function setTimers(){timeID = window.setTimeout( "updateAll()", refrescoRate);}
Utilice el nombre y el ID proporcionados por cada usuario para identificar a los usuarios:
public void AddUser(string id, string user){//asegúrese de que el nombre de usuario no exista yaif(!UserExists(user)){//agregue usuario a la lista de usuarios. Add( id, user );//muestra un mensaje de notificación a todos los usuarios del chat.Add( this.MakeServerMessage(string.Format(joinedfmt, user ) ));}}
Capturas de pantalla y pasos de implementación
La página de inicio muestra la información básica de la sala de chat, como cuántas personas hay en la sala de chat y el tamaño del ChatLog.
Para poder iniciar sesión en la sala de chat, se debe proporcionar un nombre.
Cuando se hace clic en el botón Iniciar sesión. Se ejecutará el siguiente código:
protected void Login( remitente de objeto, EventArgs e ){cadena usuario = txtUsername.Text;if( !ValidateNick( usuario ) ) return;if( Global.Engine.UserExists( usuario ) ){lblErrorMsg. = "Ya existe un usuario con este " +"nombre, inténtelo de nuevo."return;}Response.Redirect( "Server.aspx?action=Login&u=" + usuario );}
Después de alguna validación, el usuario es redirigido a otra página que utiliza la función AddUser para agregar el usuario a la lista de usuarios. Cuando todo esto termine. El usuario será redirigido a la página Chat.aspx y la siguiente función de JavaScript se ejecutará en esta página:
<script type="text/javascript">sniffBrowserType();//Muestra la carga.. screenshowLoadScreen();//Establece el temporizador de JavaScript y //carga la lista de usuarios y los mensajes setTimers();setFocus('mytext');< /script><tipo de entrada="texto" clase="mitexto"id="mitexto" onkeydown="captureReturn(evento)">
Cuando el usuario ingresa texto y presiona Enter. Se ejecutará el siguiente código:
// Capture la tecla Intro en el cuadro de entrada y publique la función de mensaje captureReturn( event ){if(event. Which || event.keyCode){if ((event. Which == 13) || ( event.keyCode == 13)){postText();return false;}else {return true;}}}function postText(){rnd++;//Borrar cuadro de texto firstchatbox = getElement( "mytext" );chat = chatbox. valor;chatbox.value = ""//obtener GUID de usuario de urluserid = ubicación.search.substring( 1, ubicación.search.length );//construir URLurl del servidor Ajax = 'Server.aspx?action=PostMsg&u=' + ID de usuario + '&t=' +encodeURIComponent(chat) + '&session=' + rnd;//Crear y establecer la instancia //del objeto de solicitud XMLHTTP apropiadoreq = getAjax();//Actualizar la página con el nuevo messagereq.onreadystatechange = function() {if( req.readyState == 4 && req.status == 200 ) {updateAll();}}req.open( 'GET', url, true );req.send( null );}
¡Hecho! Eso es todo. ¡Nada especial, descargue el programa de muestra y comprenda el código!
Autor originalDahan Abdo
Programa de muestra de descarga de
la dirección del artículo original
de yueue traducido
:descarga local
de codeproject