server.js and sse.html in the same directorynpm install hapi nipplenode server.jshttp://localhost:3000/sse.html/stream./stream connects to /events and proxies the data back to the client./events provides the actual Server Sent Events stream.| "use strict"; | |
| var Stream = require("stream"); | |
| var Hapi = require("hapi"); | |
| var Nipple = require("nipple"); | |
| var server = new Hapi.Server(3000); | |
| server.route({ | |
| method: "GET", | |
| path: "/sse.html", | |
| handler: { | |
| file: "./sse.html" | |
| } | |
| }); | |
| server.route({ | |
| method: "GET", | |
| path: "/events", | |
| handler: function(request, reply) { | |
| var channel = new Stream.PassThrough(); | |
| var data = 0; | |
| var interval = setInterval(function() { | |
| channel.write("data: " + data + "\n\n"); | |
| console.log("Sending data: " + data); | |
| data++; | |
| }, 1000); | |
| var response = reply(channel); | |
| response.code(200) | |
| .type("text/event-stream") | |
| .header("Connection", "keep-alive") | |
| .header("Cache-Control", "no-cache") | |
| .header("Content-Encoding", "identity"); | |
| request.once("disconnect", function() { | |
| clearInterval(interval); | |
| }); | |
| } | |
| }); | |
| server.route({ | |
| method: "GET", | |
| path: "/stream", | |
| handler: function(request, reply) { | |
| Nipple.request("GET", server.info.uri + "/events", { | |
| headers: { | |
| accept: "text/event-stream" | |
| } | |
| }, reply); | |
| } | |
| }); | |
| server.start(function() { | |
| console.log("Server started at " + server.info.uri); | |
| }); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Server-Sent Events Demo</title> | |
| <meta charset="UTF-8" /> | |
| <script> | |
| window.addEventListener("load", function() { | |
| var button = document.getElementById("connect"); | |
| var status = document.getElementById("status"); | |
| var output = document.getElementById("output"); | |
| var connectTime = document.getElementById("connecttime"); | |
| var source; | |
| function connect() { | |
| source = new EventSource("stream"); | |
| source.addEventListener("message", function(event) { | |
| output.textContent = event.data; | |
| }, false); | |
| source.addEventListener("connecttime", function(event) { | |
| connectTime.textContent = "Connection was last established at: " + event.data; | |
| }, false); | |
| source.addEventListener("open", function(event) { | |
| button.value = "Disconnect"; | |
| button.onclick = function(event) { | |
| source.close(); | |
| button.value = "Connect"; | |
| button.onclick = connect; | |
| status.textContent = "Connection closed!"; | |
| }; | |
| status.textContent = "Connection open!"; | |
| }, false); | |
| source.addEventListener("error", function(event) { | |
| if (event.target.readyState === EventSource.CLOSED) { | |
| source.close(); | |
| status.textContent = "Connection closed!"; | |
| } else if (event.target.readyState === EventSource.CONNECTING) { | |
| status.textContent = "Connection closed. Attempting to reconnect!"; | |
| } else { | |
| status.textContent = "Connection closed. Unknown error!"; | |
| } | |
| }, false); | |
| } | |
| if (!!window.EventSource) { | |
| connect(); | |
| } else { | |
| button.style.display = "none"; | |
| status.textContent = "Sorry, your browser doesn't support server-sent events"; | |
| } | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <input type="button" id="connect" value="Connect" /><br /> | |
| <span id="status">Connection closed!</span><br /> | |
| <span id="connecttime"></span><br /> | |
| <span id="output"></span> | |
| </body> | |
| </html> |