Tutorial de uso básico de WebSockets HTML5

Autor：Eve Cole Fecha de actualización：2025-02-06 13:43:41

Una nueva característica genial en HTML5 es WebSockets, que nos permite hablar con el servidor sin solicitudes AJAX. Hoy, Bingo permitirá a todos ejecutar WebSocket a través del lado del servidor del entorno PHP, crear clientes y enviar y recibir información del lado del servidor a través del Protocolo WebSockets.

¿Qué son WebSockets?

WebSockets es una tecnología que realiza una comunicación bidireccional en una interfaz (TCP) y un tipo de tecnología Push. Al mismo tiempo, WebSockets aún se basará en el estándar W3C.

¿Qué reemplazarán las websockets? WebSockets puede reemplazar largas encuestas (tecnología PHP Server Push), que es un concepto interesante. El cliente envía una solicitud al servidor. luego envía otra solicitud. Esto tiene sus beneficios: reducir la latencia en cualquier conexión y no necesita crear otra conexión nueva cuando una conexión ya esté abierta. Pero el contaminación larga no es una técnica elegante, y aún es posible que se produzcan pausas de solicitud, por lo que se requerirá una nueva conexión.

Algunas aplicaciones AJAX utilizan la tecnología mencionada anteriormente, que a menudo se atribuye a la baja utilización de recursos.

¡Imagine lo bueno que sería si el servidor se iniciara y enviara datos a clientes que deseen recibir sin tener que configurar algunos puertos de conexión con anticipación! ¡Bienvenido al mundo de la tecnología de empuje!

Paso 1: Obtenga el servidor WebSocket

Este tutorial se centrará más en la creación del cliente que en la ejecución del servidor.

Utilizo XAMPP basado en Windows 7 para implementar la ejecución de PHP localmente. PhPWebSockets es un servidor PHP WebSocket. (En mi experiencia, hay algunos problemas menores con esta versión. He hecho algunas modificaciones y he cargado el archivo fuente para compartir con usted). Las siguientes versiones diferentes también pueden implementar WebSocket. Otras versiones.

JWebSocket (Java)

Web-Socket-Ruby (Ruby)

Socket io-nodo (node.js)

Inicie el servidor Apache

Paso 2: Modificar URL y puertos

Según su instalación anterior, modifique el servidor, el siguiente es un ejemplo en 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 es apropiado.

Paso 3: Comience a crear un cliente

Aquí está mi archivo cliente.php:

<! Doctype html>
<html>
<Evista>
<script src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<title> WebSockets Client </title>
</ablo>
<Body>
<div id = "wrapper">
<div id = "contenedor">
<h1> WebSockets Client </h1>
<div id = "chatlog">
</div> <!-#chatlog->
<p id = "ejemplos"> por ejemplo, intente 'hola', 'nombre', 'edad', 'Today' </p>
<input id = "text" type = "text" />
<botón id = "desconectar"> desconectar </botón>
</div> <!-#Container->
</div>
</body>
</html>

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

Paso 4: Agregue algunos CSS

No hay código elegante, solo lidia con el estilo de la etiqueta.

cuerpo {
Font-Family: Arial, Helvetica, Sans-Serif;
}
#recipiente{
borde: 5px gris sólido;
Ancho: 800px;
margen: 0 auto;
relleno: 10px;
}
#Chatlog {
relleno: 5px;
borde: 1px negro sólido;
}
#Chatlog P {
margen: 0;
}
.evento {
Color:#999;
}
.advertencia{
Font-Weight: Bold;
Color: #ccc;
}

Paso 5: WebSocket

Los eventos primero intentemos comprender el concepto de eventos de 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 cree un objeto WebSocket

var Socket = nuevo WebSocket (& ldquo; ws: // localhost: 8000/socket/server/startdaemon.php & rdquo;);

Luego detecte el evento de la siguiente manera

Socket.Onopen = function () {
alerta ("Se ha abierto el socket!");
}

Haga esto cuando recibamos el mensaje:

socket.onmessage = function (msg) {
alerta (msg);
}

Pero aún tratamos de evitar el uso de Alert, y ahora podemos integrar lo que hemos aprendido en la página del cliente.

Paso 6: JavaScript

Primero, colocamos el código en la función de documento. Si no es compatible, agregaremos un enlace a la página del navegador Chrome.

Como puede ver, si el navegador del usuario admite WebSocket, ejecutaremos la función Connect (). Aquí está la función central, comenzaremos a crear eventos abiertos, cerrados y recibir.

Definiremos la URL en nuestro servidor.

Var Socket;
var host = "ws: // localhost: 8000/socket/server/startdaemon.php";

¿Puede descubrir por qué no hay HTTP en la URL? Bueno, sí, esta es una URL de WebSocket que utiliza un protocolo diferente.

Continuemos completando la función Connect () a continuación. Creamos un WebSocket y pasamos la información a la función Message (), y la explicaremos más tarde. Creamos nuestras funciones Onopen, OnMessage y Onclose. Cabe señalar que proporcionamos al usuario el estado del puerto, lo cual no es necesario, pero lo colocamos principalmente para la comodidad de la depuración.

Conectación = 0
Abierto = 1
Cerrado = 2
function Connect () {
intentar {
Var Socket;
var host = "ws: // localhost: 8000/socket/server/startdaemon.php";
var socket = new WebSocket (host);
Mensaje ('<P class = "Event"> Soce Status:'+Socket.readyState);
Socket.Onopen = function () {
mensaje ('<p class = "event"> stock status:'+socket.readyState+'(Open)');
}
socket.onmessage = function (msg) {
mensaje ('<p class = "mensaje"> recibido:'+msg.data);
}
socket.Onclose = function () {
mensaje ('<p class = "event"> status de socket:'+socket.readyState+'(cerrado)');
}
} catch (excepción) {
mensaje ('<p> error'+excepción);
}
}

La función Message () es simple, llena el texto que queremos presentar al usuario en el contenedor de registro de chat. Creamos la clase apropiada para la etiqueta del párrafo (<p>) en la función del evento de socket, y solo tenemos una etiqueta final del párrafo en la función de mensaje.

Mensaje de función (msg) {
$ ('#chatlog'). append (msg+'</p>');
}

Resultados actuales

Si ha seguido el tutorial anterior paso a paso, es genial, hemos creado plantillas HTML/CSS, creó y estableció WebSocket Connections, y mantuvo el progreso del usuario actualizado mediante la creación de conexiones.

Paso 7: Enviar datos

Ahora tenemos el botón Enviar, pero aún necesitamos escuchar al usuario presionando el evento del teclado y ejecutar la función de envío.

$ ('#text'). keyPress (function (evento) {
if (event.keycode == '13') {
enviar();
}
});

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

función send () {
var text = $ ('#text'). val ();
if (text == "") {
mensaje ('<p class = "advertencia"> por favor ingrese un mensaje');
devolver ;
}
intentar {
socket.send (texto);
Mensaje ('<P class = "Event"> Enviado:'+texto)
} catch (excepción) {
mensaje ('<p class = "advertencia"> error:' + excepción);
}
$ ('#text'). Val ("");
}

Aquí necesitamos:

socket.send ();

El código adicional funciona el siguiente: detectar si el usuario no ha ingresado más que hacer clic en Volver, borrar el cuadro de entrada de entrada y ejecutar la función Message ().

Paso 8: Cerrar enchufe

La operación para cerrar el socket es bastante simple, solo agregue un evento de clic al botón Desconectar para escuchar.

$ ('#disconnect'). Click (function () {
socket.close ();
});

Complete el código JavaScript

$ (documento) .Ready (function () {
if (! ("websocket" en la ventana)) {
$ (' #chatlog, entrada, botón, #examples'). fadeout ("rápido");
$ ('<p> oh no, necesita un navegador que admita WebSockets. ¿Qué tal <a href = "google'> http://www.google.com/chrome"> google chrome </a>? </p > '). appendTo ('#contenedor ');
}demás{
// El usuario tiene websockets
conectar();
function Connect () {
Var Socket;
var host = "ws: // localhost: 8000/socket/server/startdaemon.php";
intentar {
var socket = new WebSocket (host);
Mensaje ('<P class = "Event"> Soce Status:'+Socket.readyState);
Socket.Onopen = function () {
mensaje ('<p class = "event"> stock status:'+socket.readyState+'(Open)');
}
socket.onmessage = function (msg) {
mensaje ('<p class = "mensaje"> recibido:'+msg.data);
}
socket.Onclose = function () {
mensaje ('<p class = "event"> status de socket:'+socket.readyState+'(cerrado)');
}
} catch (excepción) {
mensaje ('<p> error'+excepción);
}
función send () {
var text = $ ('#text'). val ();

if (text == "") {
mensaje ('<p class = "advertencia"> por favor ingrese un mensaje');
devolver ;
}
intentar {
socket.send (texto);
Mensaje ('<P class = "Event"> Enviado:'+texto)
} catch (excepción) {
mensaje ('<p class = "advertencia">');
}
$ ('#text'). Val ("");
}
Mensaje de función (msg) {
$ ('#chatlog'). append (msg+'</p>');
}
$ ('#text'). keyPress (function (evento) {
if (event.keycode == '13') {
enviar();
}
});
$ ('#disconnect'). Click (function () {
socket.close ();
});
} // end connect
} // fin más
});

Paso 9: al ejecutar el servidor WebSocket, necesitamos ingresar algunas líneas de comando. Haga clic en el botón "Shell" en el panel de control XAMPP e ingrese:

php -q ruta a server.php

¡Ahora tiene el servidor WebSocket en ejecución!

¡La misión está hecha!

Cuando se lea la página, se intentará crear una conexión WebSocket, y el usuario puede ingresar la información y recibirla desde el servidor. ¡Gracias por su paciencia al leer este tutorial. Puede aprender sobre los últimos desarrollos en HTML5 WebSocket a través de la API de WebSocket.