ishiduca/browser.js

## browser.js
'use strict'
var w = require('global/window')
var d = require('global/document')
var yo = require('yo-yo')
// var xtend = require('xtend')
// var missi = require('mississippi')
var inject = require('reconnect-core')
var websocket = require('websocket-stream')
var router = require('router-on-websocket-stream')
var loc = w.location
var uri = [loc.protocol.replace('http', 'ws'), '//', loc.host].join('')

var state = {
  result: [],
  error: null
}

var root = render()
d.body.appendChild(root)

var r = router()
r.on('error', err => console.error(err))
r.on('end', () => console.log('router end'))
r.on('finish', () => console.log('router finish'))

var reconnect = inject(uri => websocket(uri))
var re = reconnect({}, ws => {
  ws.once('end', () => {
    console.log('ws ended')
    ws.unpipe(r)
    r.unpipe(ws)
  })
  ws.once('close', () => console.log('ws closed'))
  r.pipe(ws).pipe(r, {end: false})
})

re.on('connect', () => console.log('connected'))
re.on('reconnect', (n, delay) => {
  console.log(`reconnect "${n}" times - delay "${delay}"`)
})
re.on('error', err => console.error(err))

var toUpperCase = r.method('toUpperCase')

toUpperCase.on('data', result => {
  state.result = state.result.concat(result)
  update()
})
toUpperCase.on('error', err => {
  console.error(err)
  state.error = String(err)
  setTimeout(() => (state.error = null) || update(), 1000)
  update()
})

re.connect(uri)

toUpperCase.write({value: 'foo'})
toUpperCase.write({_value: 'this is params error'})
toUpperCase.write({value: 'foo bar'})

function render () {
  return yo `
    <div>
      <ul>
        ${state.result.map(result => yo `<li>${result}</li>`)}
      </ul>
      <div>${state.error}</div>
    </div>
  `
}

function update () {
  root = yo.update(root, render())
}

## index.html
<!doctype html><body><script src="/bundle.js"></script></body>

## package.json
{
  "dependencies": {
    "ecstatic": "^2.2.1",
    "global": "^4.3.2",
    "mississippi": "^1.3.0",
    "reconnect-core": "^1.3.0",
    "router-on-websocket-stream": "git+https://github.com/ishiduca/router-on-websocket-stream.git",
    "unique-string": "^1.0.0",
    "websocket-stream": "^5.0.0",
    "xtend": "^4.0.1",
    "yo-yo": "^1.4.1"
  },
  "scripts": {
    "build": "browserify ./browser.js > ./static/bundle.js"
  }
}

## server.js
'use strict'
var http = require('http')
var path = require('path')
// var missi = require('mississippi')
var websocket = require('websocket-stream')
var router = require('router-on-websocket-stream')()
var ecstatic = require('ecstatic')(path.join(__dirname, 'static'))
var server = http.createServer(ecstatic)

var port = process.env.PORT || 8888

if (!module.parent) start()

router.add('toUpperCase', params => {
  var flg = !params.value || typeof params.value !== 'string'
  return (flg) ? Promise.reject(new Error('params.value must be "string"'))
               : Promise.resolve(params.value.toUpperCase())
//  var s  = missi.through.obj()
//  process.nextTick(() => {
//    flg ? s.emit('error', new Error('params.value must be "STRING"'))
//        : s.end(params.value.toUpperCase())
//  })
//  return s
})

websocket.createServer({server: server}, s => {
  s.pipe(router.route()).pipe(s)
})

function start () {
  var mes = `server start to listen on port "${port}"`
  server.listen(port, () => console.log(mes))
}
	'use strict'
	var w = require('global/window')
	var d = require('global/document')
	var yo = require('yo-yo')
	// var xtend = require('xtend')
	// var missi = require('mississippi')
	var inject = require('reconnect-core')
	var websocket = require('websocket-stream')
	var router = require('router-on-websocket-stream')
	var loc = w.location
	var uri = [loc.protocol.replace('http', 'ws'), '//', loc.host].join('')

	var state = {
	result: [],
	error: null
	}

	var root = render()
	d.body.appendChild(root)

	var r = router()
	r.on('error', err => console.error(err))
	r.on('end', () => console.log('router end'))
	r.on('finish', () => console.log('router finish'))

	var reconnect = inject(uri => websocket(uri))
	var re = reconnect({}, ws => {
	ws.once('end', () => {
	console.log('ws ended')
	ws.unpipe(r)
	r.unpipe(ws)
	})
	ws.once('close', () => console.log('ws closed'))
	r.pipe(ws).pipe(r, {end: false})
	})

	re.on('connect', () => console.log('connected'))
	re.on('reconnect', (n, delay) => {
	console.log(`reconnect "${n}" times - delay "${delay}"`)
	})
	re.on('error', err => console.error(err))

	var toUpperCase = r.method('toUpperCase')

	toUpperCase.on('data', result => {
	state.result = state.result.concat(result)
	update()
	})
	toUpperCase.on('error', err => {
	console.error(err)
	state.error = String(err)
	setTimeout(() => (state.error = null) \|\| update(), 1000)
	update()
	})

	re.connect(uri)

	toUpperCase.write({value: 'foo'})
	toUpperCase.write({_value: 'this is params error'})
	toUpperCase.write({value: 'foo bar'})

	function render () {
	return yo `
	<div>
	<ul>
	${state.result.map(result => yo `<li>${result}</li>`)}
	</ul>
	<div>${state.error}</div>
	</div>
	`
	}

	function update () {
	root = yo.update(root, render())
	}
	{
	"dependencies": {
	"ecstatic": "^2.2.1",
	"global": "^4.3.2",
	"mississippi": "^1.3.0",
	"reconnect-core": "^1.3.0",
	"router-on-websocket-stream": "git+https://github.com/ishiduca/router-on-websocket-stream.git",
	"unique-string": "^1.0.0",
	"websocket-stream": "^5.0.0",
	"xtend": "^4.0.1",
	"yo-yo": "^1.4.1"
	},
	"scripts": {
	"build": "browserify ./browser.js > ./static/bundle.js"
	}
	}
	'use strict'
	var http = require('http')
	var path = require('path')
	// var missi = require('mississippi')
	var websocket = require('websocket-stream')
	var router = require('router-on-websocket-stream')()
	var ecstatic = require('ecstatic')(path.join(__dirname, 'static'))
	var server = http.createServer(ecstatic)

	var port = process.env.PORT \|\| 8888

	if (!module.parent) start()

	router.add('toUpperCase', params => {
	var flg = !params.value \|\| typeof params.value !== 'string'
	return (flg) ? Promise.reject(new Error('params.value must be "string"'))
	: Promise.resolve(params.value.toUpperCase())
	// var s = missi.through.obj()
	// process.nextTick(() => {
	// flg ? s.emit('error', new Error('params.value must be "STRING"'))
	// : s.end(params.value.toUpperCase())
	// })
	// return s
	})

	websocket.createServer({server: server}, s => {
	s.pipe(router.route()).pipe(s)
	})

	function start () {
	var mes = `server start to listen on port "${port}"`
	server.listen(port, () => console.log(mes))
	}