Share
Una de las características nuevas más interesantes de HTML5 es WebSockets, que nos permite hablar con el servidor sin utilizar solicitudes AJAX. En este tutorial, revisaremos el proceso de ejecución de un servidor WebSocket en PHP y luego crearemos un cliente para enviarle y recibir mensajes a través del protocolo WebSocket..
WebSockets es una técnica para la comunicación bidireccional a través de un socket (TCP), un tipo de tecnología PUSH. En este momento, todavía está siendo estandarizado por el W3C; sin embargo, las últimas versiones de Chrome y Safari tienen soporte para WebSockets.
Los websockets pueden reemplazar el sondeo largo. Este es un concepto interesante; el cliente envía una solicitud al servidor; ahora, en lugar de que el servidor responda con datos que tal vez no tenga, esencialmente mantiene la conexión abierta hasta que los datos nuevos y actualizados estén listos para ser enviados. , y envía otra petición. Esto tiene sus beneficios: una latencia reducida es uno de ellos, ya que una conexión que ya se ha abierto no requiere que se establezca una nueva conexión. Sin embargo, el sondeo largo no es realmente una pieza de tecnología sofisticada: también es posible que una solicitud se agote, por lo que se necesitará una nueva conexión de todos modos.
Muchas aplicaciones Ajax utilizan lo anterior, lo que a menudo se puede atribuir a una mala utilización de los recursos.
¿No sería fantástico si el servidor se activara una mañana y enviara sus datos a los clientes que estén dispuestos a escuchar sin algún tipo de conexión preestablecida? Bienvenido al mundo de la tecnología PUSH.!
Este tutorial se centrará más en la creación del cliente en lugar de la implementación del servidor.
Estoy usando XAMPP en Windows 7 para ejecutar el servidor PHP localmente. Agarra una copia de phpwebsockets que es un servidor WebSocket en PHP. (Nota: experimenté algunos problemas con esta versión, hice algunos cambios y la incluiré en los archivos de origen) Hay varias implementaciones de WebSocket; Si uno no funciona, puedes probar otro o simplemente continuar con el tutorial..
Cambie el servidor de acuerdo con su configuración, por ejemplo en setup.class.php:
función pública __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ host, $ port);
Navega a través de los archivos y haz cambios cuando sea apropiado.
Permite obtener una plantilla básica arriba; Este es mi archivo client.php:
Cliente WebSockets Cliente WebSockets
p.ej. prueba 'hola', 'nombre', 'edad', 'hoy'
Entonces, en este código estamos creando una plantilla simple: tenemos un cuadro para el registro de chat, un cuadro de entrada y un botón de desconexión.
Nada de lujos, solo espacio algunos elementos.
body font-family: Arial, Helvetica, sans-serif; #container border: 5px solid gray; ancho: 800px; margen: 0 auto; relleno: 10px; #chatLog padding: 5px; borde: 1px negro sólido; #chatLog p margen: 0; .event color: # 999; .warning font-weight: negrita; color: #CCC;
Primero, intentemos entender la idea de los eventos WebSocket..
Usaremos tres eventos:
Pero, ¿cómo podemos implementar esto??
Primero crea un objeto WebSocket
Accentsconagua
var socket = nuevo WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); Y verificar eventos es tan simple como:
socket.onopen = function () alert ("Socket ha sido abierto!"); Pero ¿qué pasa cuando recibimos un mensaje??
socket.onmessage = function (msg) alert (msg); //¡Increíble!
Sin embargo, evitemos usar cuadros de alerta e integremos lo que hemos aprendido en la página del cliente..
Ok, así que vamos a empezar. Primero ponemos nuestro código en la función de preparación de documentos de jQuery, luego verificamos si el usuario tiene un navegador habilitado para WebSockets. Si no lo hacen, adjuntamos un enlace a Chrome en el HTML..
$ (document) .ready (function () if (! ("WebSocket" en la ventana)) $ ('# chatLog, input, button, #examples'. fadeOut ("fast"); $ ('Oh no, necesitas un navegador que admita WebSockets. ¿Qué tal Google Chrome??
') .appendTo (' # container '); else // El usuario tiene WebSockets connect (); función connect () // el código de la función de conexión está debajo de); Como puede ver, si el usuario tiene WebSockets, llamamos a una función connect (). Este es el núcleo de la funcionalidad: comenzaremos con los eventos de apertura, cierre y recepción.
Definiremos la URL de nuestro servidor.
var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Espera, ¿dónde está el http en esa URL? Ah, claro, es una URL de WebSocket, así que está usando un protocolo diferente. Aquí hay un desglose de las piezas de nuestra URL:
Continuemos con nuestra función conectar (). Pondremos nuestro código dentro de un bloque try / catch; así que si algo sale mal, podemos avisar al usuario. Creamos un nuevo WebSocket y pasamos el mensaje a una función de mensaje que explicaré más adelante. Creamos nuestras funciones onopen, onmessage y onclose. Tenga en cuenta que también le mostramos al usuario el estado del socket; esto no es necesario, pero lo estoy incluyendo aquí ya que puede ser útil para la depuración.
función connect () try var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = nuevo WebSocket (host); mensaje('Estado de socket: '+ socket.readyState); socket.onopen = function () message ('
Estado del socket: '+ socket.readyState +' (abrir) '); socket.onmessage = function (msg) message ('
Recibido: '+ msg.data); socket.onclose = function () message ('
Estado del socket: '+ socket.readyState +' (Cerrado) '); captura (excepción) mensaje ('
Error '+ excepción);
La función message () es bastante simple, toma un texto que queremos mostrar al usuario y lo agrega al chatLog. Creamos la clase adecuada para las etiquetas de párrafo en las funciones de evento de socket, por lo que solo hay una etiqueta de párrafo de cierre en la función de mensaje.
mensaje de función (msg) $ ('# chatLog'). append (msg + ''); Si has estado siguiendo hasta este punto, ¡bien hecho! Hemos logrado crear una plantilla básica de HTML / CSS, crear y establecer una conexión WebSocket y mantener actualizado al usuario a medida que se avanzaba con la conexión.
Ahora, en lugar de tener un botón de envío, podemos detectar cuándo el usuario presiona regresar en su teclado y ejecutar la función de envío. El '13' que ves a continuación es la clave ASCII para el botón de entrada.
$ ('# text'). keypress (function (event) if (event.keyCode == '13') send ();); Y aquí está la función de enviar ():
función send () var text = $ ('# text'). val (); if (texto == "") mensaje ('Por favor, introduzca un mensaje '); regreso ; prueba socket.send (texto); mensaje('
Enviado: '+ texto) captura (excepción) mensaje ('
Error: '+ excepción); $ ('# text'). val ("");
Recuerde que lo que ve arriba puede ser un trozo de código grueso, pero en realidad, el código que realmente necesitamos es:
socket.send (); // Gracias JavaScript
El código adicional está haciendo varias cosas: detectar si el usuario no ingresó nada pero aún así presionó regresar, deseleccionando el cuadro de entrada y llamando a las funciones del mensaje.
Cerrar el zócalo es bastante sencillo: adjunte un controlador de clic a nuestro botón de desconexión y hemos terminado!
$ ('# disconnect'). click (function () socket.close ();); $ (document) .ready (function () if (! ("WebSocket" en la ventana)) $ ('# chatLog, input, button, #examples'. fadeOut ("fast"); $ ('Oh no, necesitas un navegador que admita WebSockets. ¿Qué tal Google Chrome??
') .appendTo (' # container '); else // El usuario tiene WebSockets connect (); función connect () var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; intente var socket = nuevo WebSocket (host); mensaje('Estado de socket: '+ socket.readyState); socket.onopen = function () message ('
Estado del socket: '+ socket.readyState +' (abrir) '); socket.onmessage = function (msg) message ('
Recibido: '+ msg.data); socket.onclose = function () message ('
Estado del socket: '+ socket.readyState +' (Cerrado) '); captura (excepción) mensaje ('
Error '+ excepción); función enviar () var text = $ ('# text'). val (); if (texto == "") mensaje ('
Por favor, introduzca un mensaje '); regreso ; prueba socket.send (texto); mensaje('
Enviado: '+ texto) captura (excepción) mensaje ('
'); $ ('# text'). val (""); mensaje de función (msg) $ ('# chatLog'). append (msg + '
'); $ ('# text'). keypress (function (event) if (event.keyCode == '13') send ();); $ ('# disconnect'). click (function () socket.close ();); // End connect // End else); Necesitaremos acceso a la línea de comandos. Por suerte, XAMPP tiene una opción de shell muy útil. Haga clic en 'Shell' en el panel de control de XAMPP y escriba:
php -q ruta \ a \ server.php
Ahora has iniciado un servidor WebSocket!
Cuando se carga la página, se intentará establecer una conexión WebSocket (intente editar el código para que el usuario tenga la opción de conectar / desconectar). Luego, el usuario puede ingresar mensajes y recibir mensajes del servidor..
Gracias por leer; ¡Espero que disfrutes este tutorial! Recuerde, por más emocionante que pueda ser WebSockets, las cosas pueden cambiar. Puede consultar aquí para mantenerse al día en la API de W3C WebSocket.
Si desea hacer más con HMTL5, eche un vistazo a la amplia selección de elementos de código HTML5 en Envato Market. Hay reproductores de audio, galerías de videos receptivos, mapas interactivos y mucho más..
Elementos de código HTML5 en Envato Market
