Introducción al artículo de WebJX: 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 son bidireccionales en una interfaz (TCP)
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. Hasta ahora, las últimas versiones de los navegadores Chrome y Safari ya han admitido WebSockets.
¿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. Ahora, el servidor no responderá a los datos que no se han preparado. 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 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 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. Si no se puede usar, puede probar otras versiones o continuar leyendo el siguiente tutorial.
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:
}
Explore el archivo y realice cambios si es apropiado.
Paso 3: Comience a crear un cliente
Aquí está mi archivo cliente.php:
> <>
>
>
>
> por ejemplo, intente 'hola', 'nombre', 'edad', 'hoy'>
> Desconectar >>
</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
gris
}
Paso 5: Evento de WebSocket
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
Luego detecte el evento de la siguiente manera
enchufe.
}
Haga esto cuando recibamos el mensaje:
socket.msgmsg); //¡Impresionante!
}
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.
$
ventana
$.
$.
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.
¿Puede descubrir por qué no hay HTTP en la URL? Bueno, sí, esta es una URL de WebSocket que utiliza un protocolo diferente. Aquí hay un diagrama de desglose de URL: