browser websocket chat

Author: James Halliday

webapp/browser/main.js

@@ -0,0 +1,48 @@
+var wsock = require('websocket-stream')
+var router = require('../router.js')
+var main = require('main-loop')
+var h = require('virtual-dom/h')
+var EventEmitter = require('events').EventEmitter
+var split = require('split2')
+var through = require('through2')
+
+var state = {
+  path: location.pathname,
+  messages: []
+}
+var bus = new EventEmitter
+
+var parts = location.pathname.split('/')
+if (parts[1] === 'house' && parts[3] === 'chat') {
+  var house = parts[2]
+  var ws = wsock('ws://' + location.host)
+  bus.on('message', function (msg) {
+    ws.write(JSON.stringify(msg) + '\n')
+  })
+  ws.pipe(split(JSON.parse)).pipe(through.obj(function (row, enc, next) {
+    state.messages.push(row)
+    loop.update(state)
+    next()
+  }))
+}
+
+var loop = main(state, render, require('virtual-dom'))
+var content = document.querySelector('#content')
+content.replaceChild(loop.target, content.childNodes[0])
+
+var singlePage = require('single-page')
+var show = singlePage(function (href) {
+  state.path = href
+  loop.update(state)
+})
+require('catch-links')(window, show)
+
+function render (state) {
+  var m = router.match(state.path)
+  if (m) {
+    m.state = state
+    m.bus = bus
+    return m.fn(m)
+  }
+  else return h('div', 'not found')
+}

webapp/package.json

@@ -7,11 +7,16 @@
     "body": "^5.1.0",
     "collect-stream": "^1.0.0",
     "ecstatic": "^0.8.0",
-    "routes": "^2.1.0"
+    "routes": "^2.1.0",
+    "split2": "^1.0.0",
+    "through2": "^2.0.0",
+    "websocket-stream": "^1.5.1"
   },
   "devDependencies": {},
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "bundle": "browserify browser/main.js > public/bundle.js",
+    "watch": "watchify browser/main.js -o public/bundle.js -dv",
+    "start": "node server.js"
   },
   "author": "",
   "license": "ISC"

webapp/public/index.html

@@ -8,7 +8,9 @@ <h1>cyberwizard school</h1>
     <ul>
       <a href="/">home</a>
       <a href="/apply">apply to be sorted</a>
+      <a href="/houses">houses</a>
     </ul>
     <div id="content"></div>
+    <script src="/bundle.js"></script>
   </body>
 </html>

webapp/router.js

@@ -4,6 +4,10 @@ var sorthash = require('./lib/sorthash.js')
 var houses = require('./lib/houses.json')
 module.exports = router
 
+router.addRoute('/', function (m) {
+  return h('h1', 'WELCOME')
+})
+
 router.addRoute('/apply', function (m) {
   return h('form', { method: 'POST', action: '/apply' }, [
     h('div', [
@@ -39,11 +43,36 @@ router.addRoute('/houses', function (m) {
   }))
 })
 
+router.addRoute('/house/:name/chat', function (m) {
+  return h('div', [
+    h('h1', m.params.name + ' house chat'),
+    h('form', { onsubmit: onsubmit }, [
+      h('input', { type: 'text', name: 'msg' }),
+      h('input', { type: 'submit', value: 'chat' })
+    ]),
+    h('div', (m.state.messages || []).map(function (msg) {
+      return h('div', msg.txt)
+    }))
+  ])
+ 
+  function onsubmit (ev) {
+    ev.preventDefault()
+    var house = m.params.name
+    var txt = this.elements.msg.value
+    m.bus.emit('message', {
+      house: house,
+      txt: txt
+    })
+  }
+})
+
 router.addRoute('/house/:name', function (m) {
   return h('div', [
     h('h1', 'house ' + m.params.name),
-    h('img', { src: '/' + m.params.name + '.svg' }),
-    h('div', m.state.students.map(function (s) {
+    h('a', { href: '/house/' + m.params.name + '/chat' },
+      h('img', { src: '/' + m.params.name + '.svg' })
+    ),
+    h('div', (m.state.students || []).map(function (s) {
       var name = s.key.split('!')[2]
       return h('div', name)
     }))

webapp/server.js

@@ -10,6 +10,7 @@ var level = require('level')
 var db = level('students.db', { valueEncoding: 'json' })
 var collect = require('collect-stream')
 var sorthash = require('./lib/sorthash.js')
+var wsock = require('websocket-stream')
 
 var server = http.createServer(function (req, res) {
   var m = router.match(req.url)
@@ -67,3 +68,22 @@ var server = http.createServer(function (req, res) {
   }
 })
 server.listen(5000)
+
+var split = require('split2')
+var through = require('through2')
+var streams = []
+
+wsock.createServer({ server: server }, function (stream) {
+  streams.push(stream)
+  stream.on('end', function () {
+    var ix = streams.indexOf(stream)
+    streams.splice(ix, 1)
+  })
+  stream.pipe(split(JSON.parse)).pipe(through.obj(write))
+  function write (row, enc, next) {
+    streams.forEach(function (stream) {
+      stream.write(JSON.stringify(row) + '\n')
+    })
+    next()
+  }
+})