Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Comienza Hoy a usar WebSockets de HTML5

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by James Kolce (you can also view the original English article)

Una de las mejores nuevas características de HTML5 es WebSockets, que nos permiten hablar con el servidor sin necesidad de utilizar peticiones AJAX. En este tutorial, vamos a revisar el proceso de ejecutar un servidor WebSocket en PHP, y luego construir un cliente para enviarle y recibir mensajes mediante el protocolo WebSocket.


¿Qué son WebSockets?

WebSockets es una técnica para comunicación de dos vías sobre un socket (TCP), un tipo de tecnología PUSH. De momento, sigue siendo estandarizado por el W3C; de cualquier manera, las últimas versiones de Chrome y Safari tienen soporte para WebSockets.


¿Qué reemplazan los WebSockets?

WebSockets pueden reemplazar long-polling. Este es un interesante concepto; el cliente envía una petición al servidor—ahora, en lugar de que el servidor responda con datos que puede que no tenga, esencialmente mantiene la conexión abierta hasta que los frescos y actualizados datos estén listos para ser enviados—el cliente entonces recibe esto y envía una solicitud. Eso tiene sus beneficios: la latencia reducida siendo uno de ellos, como una conexión que ha sido ya abierta no necesita que se establezca una nueva conexión. Sin embargo, long-polling no es realmente una pieza de elegante tecnología, es también posible para una petición el que se le acabe el tiempo, por lo tanto una nueva conexión será requerida de cualquier forma.

Muchas aplicaciones Ajax hacen uso de lo anterior—esto puede ser a menudo atribuido a pobre utilización de recursos.

No sería genial si el servidor pudiera levantarse una mañana y enviar sus datos a los clientes que están dispuestos a escuchar sin ninguna conexión preestablecida? Bienvenido al mundo de tecnología PUSH!


Paso 1: Conseguir el Servidor WebSocket

Este tutorial se enfocará mas en la construcción del cliente en lugar de la implementación del servidor.

Estoy usando XAMPP en Windows 7 para ejecutar el servidor PHP localmente. Toma una copia de phpwebsockets la cual es un servidor WebSocket en PHP. (Nota: He experimentado algunos problemas con esta versión, le hice algunos cambios y los incluiré en los archivos fuente) Hay varias implementaciones de WebSockets; Si una no funciona puedes intentar otra o solo continuar con el tutorial.

Inicia el Servidor Apache


Paso 2: Cambia las URL y Puertos

Cambia el servidor de acuerdo a tu instalación, por ejemplo en setup.class.php:

Navega a través de los archivos y haz cambios donde sea apropiado.


Paso 3: Comienza a Construir el Cliente

Vamos a hacer una plantilla básica; este es mi archivo client.php:

En este código estamos creando una simple plantilla: tenemos una simple caja para el registro del chat, una caja de entrada y un botón para desconectar.


Paso 4: Agrega algo de CSS

Nada elegante, solo agrega espacio a algunos elementos.


Paso 5: Eventos WebSocket

Primero, vamos a probar y entender la idea de eventos WebSocket.

Los Eventos

Vamos a estar usando tres eventos:

  • onopen: Cuando un socket ha sido abierto
  • onmessage: Cuando un mensaje ha sido recibido
  • onclose: Cuando un socket ha sido cerrado

Pero ¿cómo podemos implementar esto?

Primero crea un objecto WebSocket

Y revisar por los eventos es tan simple como:

Pero ¿qué cuando recibamos un mensaje?

De cualquier forma, vamos a evitar el uso de cajas de alerta y en realidad integrar lo que hemos aprendido dentro de la página del cliente.


Paso 6: JavaScript

Bien, vamos a comenzar. Primero ponemos nuestro código en la función document ready de jQuery, después revisamos si el usuario tiene un navegador con WebSockets habilitados. Si no es así, agregamos un enlace a Chrome en el HTML.

Como puedes ver, si el usuario tiene WebSockets entonces llamamos a la función connect(). Esto es la parte central de funcionalidad: comenzaremos con la abertura, cerradura y recepción de eventos.

Vamos a definir la URL de nuestro servidor

Espera, ¿dónde está el http en esa URL? Oh es verdad, es una URL de WebSocket, así que usa un protocolo diferente. Aquí está una explicación de las piezas de nuestra URL:

Vamos a continuar con la función connect(). Vamos a poner nuestro código dentro de un bloque try/catch; así si algo sale mal, podremos hacérselo ver al usuario. Creamos un nuevo WebSocket, y pasamos el mensaje a una función de mensaje la cual explicaremos luego. Creamos nuestras funciones onopen, onmessage y onclose. Date cuenta de que también mostramos al usuario el estado del socket; esto no es necesario, pero incluirlo aquí puede ser útil para depuración.

  • CONNECTING = 0
  • OPEN = 1
  • CLOSED = 2

Esta función message() es bastante simple, toma un texto que queremos mostrar al usuario y lo agrega al chatLog. Creamos la clase apropiada para etiquetas de párrafo en las funciones de eventos del socket, es por eso que solo hay una etiqueta de parrado de cerrado en la función mensaje.


Hasta ahora…

Si has estado estado siguiendo hasta este punto, ¡bien hecho! Hemos manejado la creación de una plantilla básica en HTML/CSS, creado y establecido una conexión WebSocket y mantener nuestro usuario actualizado mientras el progreso es hecho con la conexión.


Paso 7: Enviando Datos

Ahora en lugar de tener un botón de envío, podemos detectar cuando el usuario presiona Entrar en su teclado, y ejecutamos la función de enviar. El '13' que ves abajo es la clave ASCII para el botón Entrar.

Y aquí está la función send():

Recuerda que lo que ves arriba puede ser un pedazo de código, pero en realidad, el código que realmente necesitamos es:

El código extra está haciendo un par de cosas: detectando si el usuario no a agregado nada pero sigue presionando Entrar, limpiar la caja de entrada, y llamar las funciones de mensaje.


Paso 8: Cerrando el Socket

Cerrar el socket es bastante fácil: agregar un manejado de click a nuestro botón para desconectar y ¡hemos terminado!


El JavaScript Completo


Paso 9: Ejecutar el Servidor WebSocket

Vamos a necesitar acceso a la linea de comandos. Por fortuna, XAMPP tiene una útil función shell. Haz clic en 'Shell' en el panel de control XAMPP, y escribe:

¡Hemos ahora iniciado un servidor WebSocket!


Terminado

Cuando la página carga, una conexión WebSocket intentará ser establecida (prueba editando el código para que el usuario tenga la opción conectar/desconectar). Entonces, el usuario puede agregar mensajes y recibir mensajes del servidor.


¡Eso es todo!

Gracias por leer; espero que hayas disfrutado este tutorial! Recuerda, aunque WebSockets pueda ser muy emocionante, las cosas pueden cambiar. Puedes ir aquí para mantenerte actualizado respecto a la API WebSocket W3c.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.