Permalink
Browse files

html stream example

  • Loading branch information...
1 parent b2ad3f9 commit 02c101c3147ab7d19ae6da3a74f7f4bafd92fbe1 @substack committed May 23, 2013
@@ -0,0 +1,10 @@
+var through = require('through');
+var render = require('./render');
+
+var shoe = require('shoe');
+var stream = shoe('/sock');
+
+var rows = document.querySelector('#rows');
+stream.pipe(render()).pipe(through(function (html) {
+ rows.innerHTML += html;
+}));
@@ -0,0 +1,2 @@
+#!/bin/bash
+browserify -t brfs browser.js > static/bundle.js
@@ -0,0 +1,16 @@
+var through = require('through');
+var hyperglue = require('hyperglue');
+var fs = require('fs');
+var html = fs.readFileSync(__dirname + '/static/row.html');
+
+module.exports = function () {
+ return through(function (line) {
+ try { var row = JSON.parse(line) }
+ catch (err) { return this.emit('error', err) }
+
+ this.queue(hyperglue(html, {
+ '.who': row.who,
+ '.message': row.message
+ }).outerHTML);
+ });
+};
@@ -0,0 +1,27 @@
+var http = require('http');
+var fs = require('fs');
+var hyperstream = require('hyperstream');
+var ecstatic = require('ecstatic')(__dirname + '/static');
+
+var sliceFile = require('slice-file');
+var sf = sliceFile(__dirname + '/data.txt');
+
+var render = require('./render');
+
+var server = http.createServer(function (req, res) {
+ if (req.url === '/') {
+ var hs = hyperstream({
+ '#rows': sf.slice(-5).pipe(render())
+ });
+ hs.pipe(res);
+ fs.createReadStream(__dirname + '/static/index.html').pipe(hs);
+ }
+ else ecstatic(req, res)
+});
+server.listen(8000);
+
+var shoe = require('shoe');
+var sock = shoe(function (stream) {
+ sf.follow(-1,0).pipe(stream);
+});
+sock.install(server, '/sock');
@@ -0,0 +1,10 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="/style.css">
+ </head>
+ <body>
+ <h1>rows</h1>
+ <div id="rows"></div>
+ <script src="/bundle.js"></script>
+ </body>
+</html>
@@ -0,0 +1,4 @@
+<div class="row">
+ <div class="who"></div>
+ <div class="message"></div>
+</div>
@@ -0,0 +1,15 @@
+h1 {
+ color: rgb(60,60,150);
+}
+
+.row {
+ background-color: rgb(200,200,230);
+ padding: 20px;
+ width: 500px;
+ border-radius: 5px;
+ margin-bottom: 10px;
+}
+
+.row .who {
+ color: rgb(60,60,150);
+}

0 comments on commit 02c101c

Please sign in to comment.