Tutorial de uso básico de HTML5 WebSockets

Autor：Eve Cole Fecha de actualización：2010-10-07 18:43:37

Una de las nuevas características interesantes de HTML5 es WebSockets, que nos permite hablar con el servidor sin solicitudes AJAX. Hoy Bin Go le permitirá ejecutar WebSocket a través del lado del servidor del entorno Php, crear un cliente y enviar y recibir información del lado del servidor a través del protocolo WebSockets.

¿Qué son los WebSockets?

WebSockets es una tecnología de comunicación bidireccional sobre una interfaz (TCP), tipo tecnología PUSH. Al mismo tiempo, WebSockets seguirá basándose en el estándar W3C. Hasta ahora, las últimas versiones de los navegadores Chrome y Safari ya son compatibles con WebSockets.

¿Qué reemplazará WebSockets? WebSockets puede reemplazar Long Polling (tecnología de inserción de servidor PHP), que es un concepto interesante. El cliente envía una solicitud al servidor. Ahora, el servidor no responderá a los datos que no estén listos. Mantendrá la conexión abierta hasta que los últimos datos estén listos para ser enviados. Después de eso, el cliente recibe los datos y envía otros. pedido. . Esto tiene sus ventajas: reduce la latencia en cualquiera de las conexiones y elimina la necesidad de crear una nueva conexión cuando ya hay una abierta. Pero Long-Polling no es una tecnología sofisticada. Aún es posible que se produzca una suspensión de la solicitud, por lo que será necesario establecer una nueva conexión.

Algunas aplicaciones AJAX utilizan las técnicas anteriores; esto a menudo se atribuye a una baja utilización de recursos.

Imagínese, ¡qué gran sería si el servidor se iniciara solo por la mañana y enviara datos a los clientes que quieran recibirlos sin tener que configurar algunos puertos de conexión por adelantado! ¡Bienvenido al mundo de la tecnología PUSH!

Paso 1: obtenga el servidor WebSocket

Este tutorial se centrará más en la creación de clientes que en la ejecución del lado del servidor y otras operaciones.

Estoy usando XAMPP en Windows 7 para ejecutar PHP localmente. phpwebsockets es un servidor PHP WebSocket. (En mi experiencia, esta versión tiene algunos problemas menores. Le hice algunas modificaciones y cargué los archivos fuente para compartirlos con todos). Las diferentes versiones a continuación también pueden implementar WebSocket. Si una no funciona, puede probar otras versiones. O continúa con el tutorial a continuación.

jWebSocket (Java)

web-socket-rubí (rubí)

Nodo IO de socket (node.js)

Inicie el servidor Apache

Paso 2: modificar las URL y los puertos

Modifique el servidor según su instalación anterior. Aquí hay un ejemplo de setup.class.php:

función pública __construct($host='localhost',$puerto=8000,$max=100)
{
$this->createSocket($host,$puerto);
}

Explore el archivo y realice cambios si corresponde.

Paso 3: comience a crear el cliente

Creemos la plantilla básica. Este es mi archivo client.php:

"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

Cliente WebSockets

Cliente WebSockets

por ejemplo, intente con 'hola', 'nombre', 'edad', 'hoy'

Hemos creado la plantilla básica: un contenedor de registro de chat, un cuadro de entrada y un botón de desconexión.

Paso 4: agrega algo de CSS

No hay ningún código sofisticado, solo maneja el estilo de la etiqueta.

cuerpo {
familia de fuentes: Arial, Helvética, sans-serif;
}
#recipiente{
borde: 5px gris sólido;
ancho: 800 px;
margen:0 automático;
relleno: 10px;
}
#chatLog{
relleno: 5px;
borde: 1px negro sólido;
}
#chatLog p {
margen:0;
}
.evento{
color:#999;
}
.advertencia{
peso de fuente: negrita;
color:#CCC;
}

Paso 5: WebSocket

Eventos Primero, intentemos comprender el concepto de eventos WebSocket:

Eventos de WebSocket:

Usaremos tres eventos WebSocket:

onopen: Cuando se abre la interfaz

onmessage: Cuando se recibe un mensaje

onclose: cuando la interfaz está cerrada

¿Cómo logramos esto?

Primero crea el objeto WebSocket

var socket = nuevo WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

Luego detecte el evento de la siguiente manera

socket.onopen = función(){
alert("¡Se ha abierto el socket!");
}

Haga esto cuando recibamos información:

socket.onmessage = función (mensaje) {
alerta(mensaje); //¡Impresionante!
}

Pero todavía intentamos evitar el uso de alertas y ahora podemos integrar lo que aprendimos en la página del cliente.

Paso 6: JavaScript

Primero colocamos el código en la función document.ready de jQuery y luego también verificamos si el navegador del usuario es compatible con WebSocket. Si no es compatible, agregaremos un enlace a la página de Chrome.

$(documento).listo(función() {
if(!("WebSocket" en la ventana)){
$('#chatLog, entrada, botón, #ejemplos').fadeOut("rápido");
$('

Oh, no, necesitas un navegador que admita WebSockets. ¿Qué tal Google Chrome?

').appendTo('#contenedor');
}demás{
//El usuario tiene WebSockets
conectar();
función conectar(){
//el código de la función de conexión está debajo
}
});

Como puede ver, si el navegador del usuario admite WebSocket, ejecutaremos la función connect(). Aquí está la funcionalidad principal: comenzaremos a crear eventos de apertura, cierre y recepción.

Definiremos la URL en nuestro servidor.

enchufe var;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

¿Puede encontrar que no hay http en la URL? Bueno, sí, esta es una URL de WebSocket que utiliza un protocolo diferente.

Continuamos con la función connect(). Ponemos el código en un bloque try/catch para que, si hay un problema con el código, podamos informarle al usuario. Creamos un WebSocket y pasamos la información a la función message(), que se explicará más adelante. Creamos nuestras funciones onopen, onmessage y onclose. Cabe señalar que proporcionamos el estado del puerto para el usuario. Esto no es obligatorio, pero lo incluimos principalmente para facilitar la depuración.

CONECTANDO = 0
ABIERTO = 1
CERRADO = 2
función conectar(){
intentar{
enchufe var;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
var socket = nuevo WebSocket(host);
mensaje('

Estado del socket: '+socket.readyState);
socket.onopen = función(){
message('

Estado del socket: '+socket.readyState+' (abierto)');
}
socket.onmessage = función (mensaje) {
mensaje('

Recibido: '+msg.data);
}
socket.onclose = función(){
message('

Estado del socket: '+socket.readyState+' (Cerrado)');
}
} captura (excepción) {
mensaje('

Error'+excepción);
}
}

La función message() es muy simple, llena el contenedor del registro de chat con el texto que queremos mostrar al usuario. Creamos la clase apropiada para la etiqueta de párrafo (

) en la función de evento de socket y solo tenemos una etiqueta de cierre de párrafo en la función de mensaje.

mensaje de función (mensaje) {
$('#chatLog').append(msg+'

');
}

Resultados actuales

Si ha seguido el tutorial anterior paso a paso, genial, hemos creado la plantilla HTML/CSS , hemos creado y establecido la conexión Websocket y hemos mantenido actualizado el progreso del usuario al crear la conexión.

Paso 7: enviar datos

Ahora tenemos un botón de envío, pero también necesitamos monitorear el evento cuando el usuario presiona el teclado y ejecuta la función de envío. El '13' a continuación es el código ASCII correspondiente a la tecla Enter.

$('#texto').keypress(función(evento) {
si (event.keyCode == '13') {
enviar();
}
});

Aquí está la función enviar():

función enviar(){
var texto = $('#texto').val();
si(texto==""){
mensaje('

Por favor ingrese un mensaje');
devolver ;
}
intentar{
socket.enviar(texto);
mensaje('

Enviado: '+texto)
} captura (excepción) {
mensaje('

Error:' + excepción);
}
$('#texto').val("");
}

A continuación necesitamos:

socket.enviar();

El código adicional hace lo siguiente: detecta si el usuario hace clic en regresar después de no ingresar nada, borra el cuadro de entrada y ejecuta la función mensaje().

Paso 8: cerrar el enchufe

Cerrar el Socket es bastante simple, simplemente agregue un detector de eventos de clic para el botón de desconexión.

$('#desconectar').hacer clic(función(){
socket.cerrar();
});

Código JavaScript completo

$(documento).listo(función() {
if(!("WebSocket" en la ventana)){
$('#chatLog, entrada, botón, #ejemplos').fadeOut("rápido");
$('

Oh, no, necesitas un navegador que admita WebSockets. ¿Qué tal Google Chrome?

').appendTo('#contenedor');
}demás{
//El usuario tiene WebSockets
conectar();
función conectar(){
enchufe var;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
intentar{
var socket = nuevo WebSocket(host);
mensaje('

Estado del socket: '+socket.readyState);
socket.onopen = función(){
message('

Estado del socket: '+socket.readyState+' (abierto)');
}
socket.onmessage = función (mensaje) {
mensaje('

Recibido: '+msg.data);
}
socket.onclose = función(){
message('

Estado del socket: '+socket.readyState+' (Cerrado)');
}
} captura (excepción) {
mensaje('

Error'+excepción);
}
función enviar(){
var texto = $('#texto').val();

si(texto==""){
mensaje('

Por favor ingrese un mensaje');
devolver ;
}
intentar{
socket.enviar(texto);
mensaje('

Enviado: '+texto)
} captura (excepción) {
mensaje('

');
}
$('#texto').val("");
}
mensaje de función (mensaje) {
$('#chatLog').append(msg+'

');
}
$('#texto').keypress(función(evento) {
si (event.keyCode == '13') {
enviar();
}
});
$('#desconectar').hacer clic(función(){
socket.cerrar();
});
}//Finalizar conexión
}//Finalizar lo demás
});

Paso 9: Necesitamos ingresar algunas líneas de comando para ejecutar el servidor WebSocket. XAMPP proporciona opciones de shell más convenientes. Haga clic en el botón 'shell' del panel de control de XAMPP e ingrese:

php -q rutaalservidor.php

¡Ahora tienes un servidor WebSocket ejecutándose!

¡Ya terminaste!

Cuando se lee la página, se intenta crear una conexión WebSocket y el usuario puede ingresar información y recibir información del servidor. Gracias por su paciencia al leer este tutorial. Espero que haya aprendido conocimientos útiles de él. ¡HTML5 WebSocket es realmente emocionante! Puede conocer los últimos desarrollos de HTML5 WebSocket a través de la API WebSocket .