cjihrig · June 24, 2017 03:56
diff --git a/Proxying Server Sent Events Using Hapi.md b/Proxying Server Sent Events Using Hapi.md
diff --git a/server.js b/server.js
 "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);
 });
diff --git a/sse.html b/sse.html
 <!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>
	"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>