Comentario: Generalmente, la información del usuario registrada en las páginas web tradicionales se envía a la página a través de Post o AJAX. Después de ingresar a HTML5, tenemos otro método para interactuar con los datos a través de WebSocket. Lo presentaremos en detalle a continuación. Los amigos que necesitan saber pueden referirse a él.
En general, la información del usuario registrada en las páginas web tradicionales se envía a la página a través de Post o AJAX. Después de HTML5, tenemos otro método para interactuar con los datos a través de WebSocket. WebSocket tiene la flexibilidad que las páginas web tradicionales no tienen en la interacción de datos. Después de establecer una conexión larga a través de WebSocket, el servidor puede enviar directamente los datos al cliente. No es necesario traer una gran cantidad de información del encabezado HTTP para cada interacción de datos. El Protocolo WebSocket en sí admite dos formatos de datos Text and Streams. Es muy simple interactuar con JavaScript a través de Text JSON. La comunicación entre JSON y WebSocket es muy conveniente, pero para lograr esta comodidad, todavía tenemos que hacer un empaque simple. Afortunadamente, los componentes JSON existentes en varias plataformas son relativamente maduros. Al analizar los métodos correspondientes de mapeo de datos JSON al servidor, se realiza.
El siguiente es un registro simple del usuario para reflejar el proceso de interacción HTML5 con JOSN y WebSocket. Como ha sido encapsulado, es muy conveniente de usar.
HTML:La función es muy simple y la información de registro se envía después de conectarse al servicio WebSocket. Por supuesto, para ser más flexibles, reabrimos el formulario de conexión al monitorear la conexión está cerrada. El código JS específico es el siguiente:
function Connect () {
canal = nuevo tcpChannel ();
channel.connected = function (evt) {
$ ('#dlgconnect'). diálogo ('cerrar');
};
channel.disposed = function (evt) {
$ ('#dlgconnect'). Dialog ('Open');
};
canal.error = function (evt) {
alerta (EVT);
};
canal.connect ($ ('#txthost'). val ());
}
¿El código es muy conciso? La razón principal es que un TCPChannel está encapsulado sobre la base de WebSocket. El código detallado se puede descargar y entender. Después de que la conexión sea exitosa, ingresa el formulario de registro.
Después de completar alguna información de registro, haga clic en Registrarse para enviar la información al servidor a través de WebSocket. El código JS enviado correspondiente es el siguiente:
var invokeGister = {url: 'handler.onregister', parámetros: {username: '', correo electrónico: '', contraseña: ''}};
function registro () {
$ ('#frmregister'). Form ('enviar', {
onsubmit: functer () {
var isValid = $ (this) .Form ('validar');
if (isValid) {
invokeRegister.Parameters = $ ('#frmregister'). SerializeObject ();
Channel.send (InvokeGister, function (resultado) {
alerta (resultado.data);
});
}
devolver falso;
}
});
}
Cuando los datos de verificación son exitosos, puede enviar un objeto de descripción de llamadas de método a través de tcpchannel. La URL es el método de clase especificado para llamar, y los parámetros es el parámetro del método, y los parámetros también pueden ser tipos de estructura complejos. El segundo parámetro es un procesamiento de devolución de llamada.
DO#El servicio se basa en el procesamiento de extensión de Beetle, por lo que el código es muy simple. El código de método lógico para el registro anterior es el siguiente:
manejador de clase pública
{
Public String OnRegister (String UserName, String Correo electrónico, contraseña de cadena)
{
Console.WriteLine (nombre de usuario);
Console.writeLine (correo electrónico);
Console.writeLine (contraseña);
devolver el nombre de usuario;
}
}
El método solo necesita definir los parámetros relevantes. El controlador de extensión de mensajes del Beetle analizará automáticamente los datos JSON enviados por JS para su análisis y los vinculará a los métodos relevantes para la ejecución. El código detallado del controlador también se puede obtener a través de la descarga. Después de completar la lógica, solo necesitamos simplemente abrir el servicio WebSocket relevante.
{
static void main (string [] args)
{
Beetle.controllers.controller.register (new Handler ());
Tcputils.setup ("Beetle");
Program Server = New Program ();
servidor.open (8088);
Console.WriteLine ("WebSocket Start@8088");
System.threading.thread.sleep (-1);
}
anulación protegida nula onError (remitente de objeto, canalerRoreventArgs e)
{
base.onerror (remitente, e);
Console.WriteLine (E.Exception. -Message);
}
anulación protegida nula OnConnected (remitente de objeto, ChannelEventArgs e)
{
base. Conconectado (remitente, e);
Console.WriteLine ("{0} conectado", e.channel.endpoint);
}
anulación protegida nula onDispuesta (remitente de objeto, canalDisponseventargs e)
{
base.dispuesto (remitente, e);
Console.WriteLine ("{0} distribuido", e.channel.endpoint);
}
}
Se completa este tipo de interacción y procesamiento de mensajes de objeto WebSocket basado en HTML5, y solo se requiere una pequeña cantidad de código para implementar el procesamiento de interacción de datos de JS y Servicios. Para lograr esta conveniente función de interacción, la siguiente encapsulación no se puede guardar. Análisis de protocolo de WebSocket, procesamiento de objeto JSON y distribución de control de mensajes; Si desea conocer los detalles relevantes, puede descargar el código fuente para verlo.Websocket.server.rar (641.79 KB)