module.exports = ({ Router, io }) => {
	const router = Router()
	/* GET users listing. */
	router
		.get('/', function (req, res, next) {
			res.render('message', { title: 'Message Page' })
		})
		.post('/', (req, res) => {
			io.emit('client-message', { ...req.body, id: 'POST' })
			res.json(req.body)
		})

	return router
}

module.exports = ({ express, app, io }) => {
	const { Router } = express

	app.use('/message', require('./routes/io-message')({ Router, io }))
	
	io.on('connection', socket => {
		console.log('Socket Connect:', { id: socket.id })
		socket.on('disconnect', log => {
			console.log({ id: socket.id, log })
		})

		socket.on('server-message', msg => {
			console.log('message:', { msg })
			io.emit('client-message', { id: socket.id, message: msg })
		})

	})

	return app
}

#!/usr/bin/env node

var http = require('http'),
	express = require('express'),
	app = express()

/**
 * Create HTTP server.
 */

var server = http.createServer(app)
var io = require('socket.io')(server)
require('../app')({ express, app, io })

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port)

<style rel="stylesheet/less" type="text/less">
	body {
		margin: 0;
		padding: 0;
	}

	.app-tpl {
		height: ~'calc(100vh)';
		overflow-y: auto;
		overflow-x: hidden;
		background-color: rgb(248, 239, 201);
	}

	.messages {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			&:nth-child(odd) {
				background-color: yellow;
			}
		}
	}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script type="text/html" id="app-tpl">
	<div class="app-tpl">
	       <h1>{{title}}</h1>
	       <input v-model="formData.message" placeholder="Message" />
		<div>
			<button @click="onEmit">Emit Message</button>
			<button @click="onPost">Post Message</button>
		</div>
		<ul class="messages">
			<li v-for="msg in messages"><pre v-text="msg" /></li>
		</ul>
	</div>
</script>

<script>
	var socket = io(),
		el = document.currentScript

	const storeMessages = {
			state: Vue.observable({
				messages: []
			}),
			methods: {
				onMessage(message) {
					this.state.messages.unshift(message)
				}
			}
		},
		App = new Vue({
			template: '#app-tpl',
			data: () => ({
				formData: {
					message: ''
				}
			}),
			computed: {
				messages() {
					return storeMessages.state.messages
				}
			},
			methods: {
				onEmit() {
					const { formData } = this
					socket.emit('server-message', formData.message)
					console.log('onEmit:', formData.message)
					formData.message = ''
				},
				onPost() {
					const { formData } = this,
						url = '//localhost:3000/message'
					console.log('onPost:', formData.message)
					fetch(url, {
						method: 'POST',
						body: JSON.stringify(formData)
					})
						.then(res => res.json())
						.then(console.log.bind(console, 'RESPONSE:'))
						.catch(console.error.bind(console, 'FAIL - onPost:'))
					formData.message = ''
				}
			}
		})

	App.$mount(el)

	socket.on(
		'client-message',
		storeMessages.methods.onMessage.bind(storeMessages)
	)
</script>