![\"dise\u00f1o](\"https:\/\/mlniuewdmffl.i.optimole.com\/w:300\/h:287\/q:mauto\/f:best\/http:\/\/disenoweb.mx\/diseno\/wp-content\/uploads\/web_design-300x287.jpg\" "\\"web_design-300x287")
<\/p>\n<\/p>\n
\u00a0<\/p>\n
Los\u00a0EventSource<\/strong><\/em>\u00a0(tambi\u00e9n conocidos como Server-Sent Events<\/a>), son eventos en tiempo real transmitidos por el servidor y recibidos en el navegador. Son similares a los WebSockets en que suceden el tiempo real, pero son principalmente un m\u00e9todo de comunicaci\u00f3n unidireccional desde el servidor. Al igual que en los WebSocket, creamos una nueva conexi\u00f3n indicando la URL, y el navegador intentar\u00e1 conectarse inmediatamente. El objeto\u00a0EventSource<\/strong><\/em>\u00a0dispone de los siguientes eventos: open: se dispara cuando la conexi\u00f3n se ha establecido. message: evento que indica la llegada de un mensaje nuevo. error: se dispara cuando algo ha ido mal. Lo que hace a\u00a0EventSource<\/strong><\/em>e diferente es la manera en que controla las p\u00e9rdidas de conexi\u00f3n y la gesti\u00f3n de los mensajes. es.onopen = function () { initialiseData(); };<\/p>\n es.onmessage = function (event) { var data = JSON.parse(event.data); updateData(data.time, data.bid); }; En el lado del servidor podemos seguir utilizando una soluci\u00f3n basada en PHP y la pila completa LAMP, pero como Apache no se comporta de manera estable con conexiones<\/p>\n persistentes, constantemente trata de cerrar las conexiones y EventSource trata de volver a conectarse autom\u00e1ticamente. Esto da como resultado un comportamiento m\u00e1s parecido a Ajax que a una comunicaci\u00f3n unidireccional y en tiempo real desde el servidor. UN SIMPLE SERVIDOR PARA EVENTSOURCE El siguiente c\u00f3digo muestra como crear un servidor muy simple con Node.js, el cual acepta conexiones y env\u00eda mensajes a los clientes conectados. En este caso, \u00fanicamente se notifica al resto de usuarios conectados al servicio, que un nuevo usuario se ha conectado. \/\/ finally cache the response connection connections.push(res);<\/p>\n \/\/ When a regular web request is received connections.forEach(function (response) { history[++eventId] = { agent: req.headers[\u2018user-agent\u2019], time: +new Date }; res.write(\u2018data: \u2018 + JSON.stringify(history[eventId]) + \u2018\\nid: \u2018 + eventId + \u2018\\n\u2019); }); }).listen(1337, \u2018127.0.0.1\u2019); console.log(\u2018Server running at http:\/\/127.0.0.1:1337\/\u2019); var data = JSON.parse(event.data); log.innerHTML += \u2018<li><strong>\u2019 + data.agent + \u2018<\/strong><br> connected at <em>\u2019 + (new Date(data.time)) + \u2018<\/em><\/li>\u2019; };
\nSi la conexi\u00f3n se pierde por alguna raz\u00f3n, el API autom\u00e1ticamente trata de volver a conectarse. Adem\u00e1s, al restablecer la conexi\u00f3n, el cliente env\u00eda al servidor la ID del \u00faltimo mensaje que recibi\u00f3. Esto permite al servidor, enviar al cliente todos los mensajes que no ha podido recibir. No es necesario realizar ninguna configuraci\u00f3n especial en nuestro c\u00f3digo, simplemente el servidor nos enviar\u00e1 los mensajes que no hemos recibido.
\nUn sencillo ejemplo:
\nvar es = new EventSource(\u2018\/bidding\u2019);<\/p>\n
\nEVENTSOURCE EN EL SERVIDOR<\/p>\n
\nRealmente, esta no es la mejor manera de aprovechar las ventajas de\u00a0EventSource<\/strong><\/em>. Para ello, necesitamos una conexi\u00f3n persistente con el servidor, y LAMP no nos lo puede proporcionar. Actualmente existen soluciones de servidor basadas en eventos, como pueden ser Node.js (un servidor basado en JavaScript) o Twisted para Python.<\/p>\n
\nvar http = require(\u2018http\u2019); http.createServer(function (req, res) { res.writeHead(200, {\u2018Content-Type\u2019: \u2018text\/event-stream\u2019, \u2018Cache-Control\u2019: \u2018no-cache\u2019}); \/\/ get the last event id and convert to a number var lastId = req.headers[\u2018last-event-id\u2019]*1; if (lastId) { for (var i = lastId; i < eventId; i++) { res.write(\u2018data: \u2018 + JSON.stringify(history[eventId]) + \u2018\\nid: \u2018 + eventId + \u2018\\n\u2019); } }<\/p>\n
\nEn el lado del cliente, el c\u00f3digo ser\u00eda tan sencillo como el siguiente:
\nvar es = new EventSource(\u2018\/eventsource\u2019); es.onmessage = function (event) {<\/p>\n
\nUna aplicaci\u00f3n muy simple, pero que nos da una idea del funcionamiento de los eventos en tiempo real, utilizando un servidor basado en eventos.<\/p>\nEventsource<\/em><\/strong><\/span><\/h2>\n