ishiduca/app.js

## app.js
'use strict'
var path = require('path')
var http = require('http')
var ecstatic = require('ecstatic')(path.join(__dirname, 'static'))
var websocket = require('websocket-stream')
var miss = require('mississippi')
var port = 3003
var app = http.createServer(ecstatic)

websocket.createServer({server: app}, s => {
  s.pipe(miss.through((r, _, done) => {
    done(null, String(r).toUpperCase())
  })).pipe(s)
})

if (!module.parent) {
  app.listen(port, () => console.log('listen on port "%s"', port))
}

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

## package.json
{
  "name": "buoyancy-with-websocket",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "build": "browserify ./src/main.js > ./static/js/bundle.js"
  },
  "browserify": {
    "transform": [
      "yo-yoify"
    ]
  },
  "author": "ishiduca@gmail.com",
  "license": "MIT",
  "devDependencies": {
    "ecstatic": "^2.1.0",
    "yo-yoify": "^3.7.3"
  },
  "dependencies": {
    "buoyancy": "0.0.3",
    "global": "^4.3.2",
    "mississippi": "^1.3.0",
    "on-load": "^3.2.0",
    "websocket-stream": "^5.0.0"
  }
}

## src_components_websocket_app.js
var w = require('global/window')
var yo = require('buoyancy').html
var onload = require('on-load')
var websocket = require('websocket-stream')
var loc = w.location
var uri = [loc.protocol.replace('http', 'ws'), '//', loc.host].join('')
var missi = require('mississippi')

module.exports = function (state, dispatcher) {
  var el = yo `
    <ol>
      ${state.map(c => yo `<li>${c}</li>`)}
    </ol>
  `
  var ws = websocket(uri)

  el.ws = ws

  onload(el, e => {
    console.log('onload websocket component')

    missi.pipe(
      ws,
      missi.through((r, _, done) => {
        dispatcher('change', String(r))
        done()
      }),
      onEnd
    )

    ws.once('connect', () => {
      console.log('wsProxy connected - "%s"', uri)
      missi.pipe(
        arrayStream(('abcdefg').split('')),
        missi.through((c, _, done) => {
          ws.write(c)
          done()
        }),
        onEnd
      )
    })

    ws.once('close', () => console.log('wsProxy closed'))

    function onEnd (err) {
      if (err) console.error(err)
    }
  })

  return el
}

function arrayStream (arry) {
  return missi.from(function (size, done) {
    if (arry.length <= 0) return done(null, null)
    setTimeout(() => done(null, arry.shift()), 1000)
  })
}

## src_main.js
var d = require('global/document')
var onload = require('on-load')
var buoyancy = require('buoyancy')
var yo = buoyancy.html
var websocket = require('./components/websocket/app')

var root = yo `<main></main>`

var app = buoyancy(root, [], (type, state, action) => {
  return state.concat(String(action))
})

onload(root, () => app((state, dispatcher) => {
  return yo `
    <main>
      ${websocket(state, dispatcher)}
    </main>
  `
}))

d.body.appendChild(root)
	'use strict'
	var path = require('path')
	var http = require('http')
	var ecstatic = require('ecstatic')(path.join(__dirname, 'static'))
	var websocket = require('websocket-stream')
	var miss = require('mississippi')
	var port = 3003
	var app = http.createServer(ecstatic)

	websocket.createServer({server: app}, s => {
	s.pipe(miss.through((r, _, done) => {
	done(null, String(r).toUpperCase())
	})).pipe(s)
	})

	if (!module.parent) {
	app.listen(port, () => console.log('listen on port "%s"', port))
	}
	{
	"name": "buoyancy-with-websocket",
	"version": "1.0.0",
	"description": "",
	"main": "app.js",
	"scripts": {
	"build": "browserify ./src/main.js > ./static/js/bundle.js"
	},
	"browserify": {
	"transform": [
	"yo-yoify"
	]
	},
	"author": "ishiduca@gmail.com",
	"license": "MIT",
	"devDependencies": {
	"ecstatic": "^2.1.0",
	"yo-yoify": "^3.7.3"
	},
	"dependencies": {
	"buoyancy": "0.0.3",
	"global": "^4.3.2",
	"mississippi": "^1.3.0",
	"on-load": "^3.2.0",
	"websocket-stream": "^5.0.0"
	}
	}
	var w = require('global/window')
	var yo = require('buoyancy').html
	var onload = require('on-load')
	var websocket = require('websocket-stream')
	var loc = w.location
	var uri = [loc.protocol.replace('http', 'ws'), '//', loc.host].join('')
	var missi = require('mississippi')

	module.exports = function (state, dispatcher) {
	var el = yo `
	<ol>
	${state.map(c => yo `<li>${c}</li>`)}
	</ol>
	`
	var ws = websocket(uri)

	el.ws = ws

	onload(el, e => {
	console.log('onload websocket component')

	missi.pipe(
	ws,
	missi.through((r, _, done) => {
	dispatcher('change', String(r))
	done()
	}),
	onEnd
	)

	ws.once('connect', () => {
	console.log('wsProxy connected - "%s"', uri)
	missi.pipe(
	arrayStream(('abcdefg').split('')),
	missi.through((c, _, done) => {
	ws.write(c)
	done()
	}),
	onEnd
	)
	})

	ws.once('close', () => console.log('wsProxy closed'))

	function onEnd (err) {
	if (err) console.error(err)
	}
	})

	return el
	}

	function arrayStream (arry) {
	return missi.from(function (size, done) {
	if (arry.length <= 0) return done(null, null)
	setTimeout(() => done(null, arry.shift()), 1000)
	})
	}
	var d = require('global/document')
	var onload = require('on-load')
	var buoyancy = require('buoyancy')
	var yo = buoyancy.html
	var websocket = require('./components/websocket/app')

	var root = yo `<main></main>`

	var app = buoyancy(root, [], (type, state, action) => {
	return state.concat(String(action))
	})

	onload(root, () => app((state, dispatcher) => {
	return yo `
	<main>
	${websocket(state, dispatcher)}
	</main>
	`
	}))

	d.body.appendChild(root)