ejemplo html5 websocket server-sent-events

html5 - websocket ejemplo



WebSockets vs. eventos enviados por el servidor/EventSource (8)

Websocket VS SSE

Web Sockets: es un protocolo que proporciona un canal de comunicación dúplex completo a través de una única conexión TCP. Por ejemplo, una comunicación bidireccional entre el servidor y el navegador. Dado que el protocolo es más complicado, el servidor y el navegador tienen que confiar en la biblioteca de websocket que es socket.io

Example - Online chat application.

SSE ( evento enviado por el servidor ): en el caso de un evento enviado por el servidor, la comunicación se lleva a cabo únicamente de un servidor a otro y el navegador no puede enviar ningún dato al servidor. Este tipo de comunicación se usa principalmente cuando la necesidad es solo para mostrar los datos actualizados, luego el servidor envía el mensaje cada vez que se actualizan los datos. Por ejemplo, una comunicación unidireccional entre el servidor al navegador. Este protocolo es menos complicado, por lo que no es necesario confiar en la biblioteca externa. JAVASCRIPT proporciona la interfaz EventSource para recibir los mensajes enviados por el servidor.

Example - Online stock quotes or cricket score website.

Tanto WebSockets como Server-Sent Events son capaces de enviar datos a los navegadores. A mí me parecen tecnologías competidoras. ¿Cuál es la diferencia entre ellos? ¿Cuándo elegirías uno sobre el otro?

El límite máximo de conexión no es un problema con http2 + sse.

Fue un problema en http 1

Opera, Chrome, Safari admite SSE, Chrome, Safari admite SSE dentro de SharedWorker Firefox admite XMLHttpRequest readyState interactivo, por lo que podemos hacer que EventSource polyfil para Firefox

Según caniuse.com:

Puede usar un polyfill solo para clientes para extender el soporte de SSE a muchos otros navegadores. Esto es menos probable con WebSockets. Algunos polyfills EventSource:

  • EventSource de Remy Sharp sin otras dependencias de biblioteca (IE7 +)
  • jQuery.EventSource de Rick Waldron
  • EventSource by Yaffle (reemplaza la implementación nativa, normalizando el comportamiento en los navegadores)

Si necesita admitir todos los navegadores, considere usar una biblioteca como web-socket-js , SignalR o socket.io que admita múltiples transportes como WebSockets, SSE, Forever Frame y AJAX de sondeo largo. Estos a menudo requieren modificaciones en el lado del servidor también.

Obtenga más información sobre SSE en:

Obtenga más información sobre WebSockets en:

Otras diferencias:

  • WebSockets admite datos binarios arbitrarios, SSE solo utiliza UTF-8

Una cosa a tener en cuenta:
He tenido problemas con websockets y firewalls corporativos. (Usar HTTPS ayuda pero no siempre).

Consulte https://github.com/LearnBoost/socket.io/wiki/Socket.IO-and-firewall-software https://github.com/sockjs/sockjs-client/issues/94

Supongo que no hay tantos problemas con los eventos enviados por el servidor. Pero no lo sé.

Dicho esto, los WebSockets son un montón de diversión. Tengo un pequeño juego web que usa websockets (a través de Socket.IO) ( http://minibman.com )

Websockets y SSE (Server Sent Events) son capaces de enviar datos a los navegadores, sin embargo, no son tecnologías de la competencia.

Las conexiones de Websockets pueden enviar datos al navegador y recibir datos del navegador. Un buen ejemplo de una aplicación que podría usar websockets es una aplicación de chat.

Las conexiones SSE solo pueden enviar datos al navegador. Las cotizaciones de acciones en línea o los tweets que actualizan la línea de tiempo o la fuente son buenos ejemplos de una aplicación que podría beneficiarse de la SSE.

En la práctica, dado que todo lo que se puede hacer con SSE también se puede hacer con Websockets, Websockets está recibiendo mucha más atención y amor, y muchos más navegadores admiten Websockets que SSE.

Sin embargo, puede ser excesivo para algunos tipos de aplicaciones, y el backend podría ser más fácil de implementar con un protocolo como el SSE.

Además, SSE se puede rellenar en navegadores antiguos que no lo admiten de forma nativa utilizando solo JavaScript. Algunas implementaciones de polyfills SSE se pueden encontrar en la página github de Modernizr .

Gotchas:

  • El SSE tiene una limitación en el número máximo de conexiones abiertas, lo que puede ser especialmente doloroso al abrir varias pestañas, ya que el límite es por navegador y se establece en un número muy bajo (6). El problema se ha marcado como "No se solucionará" en Chrome y Firefox
  • Solo WS puede transmitir datos binarios y UTF-8, SSE está limitado a UTF-8. (Gracias a Chado Nihi).

HTML5Rocks tiene buena información sobre SSE. Desde esa página:

Eventos enviados por el servidor vs. WebSockets

¿Por qué elegirías los eventos enviados por el servidor a través de WebSockets? Buena pregunta.

Una razón por la que las ESEs se han mantenido a la sombra es que las API posteriores, como WebSockets, proporcionan un protocolo más rico para realizar una comunicación bidireccional y dúplex. Tener un canal de dos vías es más atractivo para cosas como juegos, aplicaciones de mensajería y para los casos en que necesite actualizaciones casi en tiempo real en ambas direcciones. Sin embargo, en algunos casos, los datos no necesitan ser enviados desde el cliente. Simplemente necesita actualizaciones de alguna acción del servidor. Algunos ejemplos serían las actualizaciones de estado de los amigos, los marcadores de existencias, las fuentes de noticias u otros mecanismos automatizados de envío de datos (por ejemplo, la actualización de una base de datos web SQL del lado del cliente o el almacén de objetos IndexedDB). Si necesita enviar datos a un servidor, XMLHttpRequest es siempre un amigo.

Los SSE se envían a través de HTTP tradicional. Eso significa que no requieren un protocolo especial o una implementación de servidor para comenzar a trabajar. WebSockets, por otro lado, requiere conexiones full-duplex y nuevos servidores Web Socket para manejar el protocolo. Además, los eventos enviados por el servidor tienen una variedad de características que WebSockets carece de diseño, como la reconexión automática, los identificadores de eventos y la capacidad de enviar eventos arbitrarios.

Resumen de TLDR:

Ventajas de SSE sobre Websockets:

  • Transportado a través de HTTP simple en lugar de un protocolo personalizado
  • Se puede rellenar en poli con javascript para "backport" SSE para navegadores que aún no lo admiten.
  • Soporte incorporado para la reconexión y la identificación del evento
  • Protocolo mas sencillo

Ventajas de los websockets sobre SSE:

  • Tiempo real, dos comunicaciones direccionales.
  • Soporte nativo en más navegadores.

Ideales casos de uso de la ESS:

  • Stock ticker streaming
  • actualización de feed de twitter
  • Notificaciones al navegador

Gotas SSE:

  • Sin soporte binario
  • Límite máximo de conexiones abiertas

Here hay una charla sobre las diferencias entre los sockets web y los eventos enviados por el servidor. Dado que Java EE 7, una API de WebSocket ya forma parte de la especificación y parece que los eventos enviados por el servidor se publicarán en la next versión de la edición para empresas.

WebSocket y SSE son dos alternativas a la arquitectura web tradicional de solicitud-respuesta, pero no son exactamente tecnologías competidoras. Una arquitectura WebSocket consiste en un socket que se abre entre el cliente y el servidor para la comunicación dúplex (bidireccional). En lugar de enviar un mensaje GET y esperar una respuesta del servidor, el cliente simplemente escucha el socket, recibe actualizaciones del servidor y utiliza los datos para iniciar o admitir diversas interacciones. Un cliente también puede usar el socket para comunicarse con el servidor, por ejemplo, enviando un mensaje ACK cuando una actualización se ha recibido correctamente.

SSE es un estándar más simple, desarrollado como una extensión de HTML5. Mientras SSE habilita los mensajes asíncronos del servidor al cliente, el cliente no puede enviar mensajes al servidor. El modelo de comunicación semidúplex de SSE se adapta mejor a las aplicaciones en las que el cliente simplemente necesita recibir actualizaciones de transmisión del servidor. Una de las ventajas de SSE sobre WebSocket es que funciona sobre HTTP, sin requerir componentes adicionales.

Para una aplicación web multipropósito que requiere una comunicación extensa entre el cliente y el servidor, WebSocket es la opción obvia. SSE es más adecuado para aplicaciones que desean transmitir datos asíncronos al cliente desde el servidor, pero no requieren una respuesta.

Source