gildean/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>WebSocketTest</title>
        <style>
            @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff'); }
            body { font: 130% 'Lato', sans-serif; color:#34495e; background: #ecf0f1; text-shadow: -1px 1px 1px rgba(0,0,0,0.3); padding: 1em 2em; }
            #status { position: fixed; top: 0.2em; right: 0.5em }
        </style>
    </head>
    <body>
        <div id="main">
            <h1 id="topic">WebSocketTest</h1>
            <input name="echo" id="echo" type="text" required />
            <button id="button">send</button>
            <div id="messages"></div>
            <span id="status">WebSocket: disconnected</span>
        </div>
        <script>
            (function (D, window, undefined) {
                'use strict';
                var status = D.getElementById('status');
                var echo = D.getElementById('echo');
                var messages = D.getElementById('messages');
                var button = D.getElementById('button');

                button.addEventlistener('click', function (e) {
                    e.preventDefault();
                    var msg = echo.value;
                    if (msg !== '') return webSocketConnection.send(msg);
                    return false;
                });

                var webSocketConnection = {
                    init: function () {
                        var self = this;
                        this.connection = new WebSocket(window.location.href.replace('http', 'ws'));

                        this.connection.onopen = function () {
                            status.innerText = 'WebSocket: connected';
                        };

                        this.connection.onerror = function (error) {
                            console.log(error);
                            self.connection.close();
                        };

                        this.connection.onclose = function () {
                            status.innerText = 'WebSocket: disconnected';
                            setTimeout(self.init, 1000);
                        };

                        this.connection.onmessage = function (message) {
                            var p = D.createElement('p');
                            p.appendChild(D.createTextNode(message.data));
                            messages.appendChild(p);
                        };
                    },
                    send: function (data) {
                        this.connection.send(data);
                    },
                    close: function () {
                        this.connection.close();
                    }
                };
                webSocketConnection.init();

            }(document, window));
        </script>
    </body>
</html>

## server.js
'use strict';
var express = require('express');
var util = require('util');
var app = express();
var WebSocketServer = require('ws').Server;
var server = require('http').createServer(app).listen(8084);

app.use(express.static(__dirname + '/public'));

// set up the websocket server
var wss = new WebSocketServer( { server: server } );
wss.clientConnections = {};

wss.on('connection', function (connection) {
    var cid = connection.upgradeReq.headers['sec-websocket-key'];
    connection.id = cid;
    this.clientConnections[cid] = setConnectionListeners(connection);
});

// a function to set websocket connection eventlisteners and callbacks
function setConnectionListeners(connection) {
    connection.on('message', function (msg) {
        connection.send(msg);
    })
    .on('error', function (error) { /*just catch it*/ })
    .on('close', function () {
        delete wss.clientConnections[connection.id];
    });
    return connection;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebSocketTest</title>
	<style>
	@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff'); }
	body { font: 130% 'Lato', sans-serif; color:#34495e; background: #ecf0f1; text-shadow: -1px 1px 1px rgba(0,0,0,0.3); padding: 1em 2em; }
	#status { position: fixed; top: 0.2em; right: 0.5em }
	</style>
	</head>
	<body>
	<div id="main">
	<h1 id="topic">WebSocketTest</h1>
	<input name="echo" id="echo" type="text" required />
	<button id="button">send</button>
	<div id="messages"></div>
	<span id="status">WebSocket: disconnected</span>
	</div>
	<script>
	(function (D, window, undefined) {
	'use strict';
	var status = D.getElementById('status');
	var echo = D.getElementById('echo');
	var messages = D.getElementById('messages');
	var button = D.getElementById('button');

	button.addEventlistener('click', function (e) {
	e.preventDefault();
	var msg = echo.value;
	if (msg !== '') return webSocketConnection.send(msg);
	return false;
	});

	var webSocketConnection = {
	init: function () {
	var self = this;
	this.connection = new WebSocket(window.location.href.replace('http', 'ws'));

	this.connection.onopen = function () {
	status.innerText = 'WebSocket: connected';
	};

	this.connection.onerror = function (error) {
	console.log(error);
	self.connection.close();
	};

	this.connection.onclose = function () {
	status.innerText = 'WebSocket: disconnected';
	setTimeout(self.init, 1000);
	};

	this.connection.onmessage = function (message) {
	var p = D.createElement('p');
	p.appendChild(D.createTextNode(message.data));
	messages.appendChild(p);
	};
	},
	send: function (data) {
	this.connection.send(data);
	},
	close: function () {
	this.connection.close();
	}
	};
	webSocketConnection.init();

	}(document, window));
	</script>
	</body>
	</html>
	'use strict';
	var express = require('express');
	var util = require('util');
	var app = express();
	var WebSocketServer = require('ws').Server;
	var server = require('http').createServer(app).listen(8084);

	app.use(express.static(__dirname + '/public'));

	// set up the websocket server
	var wss = new WebSocketServer( { server: server } );
	wss.clientConnections = {};

	wss.on('connection', function (connection) {
	var cid = connection.upgradeReq.headers['sec-websocket-key'];
	connection.id = cid;
	this.clientConnections[cid] = setConnectionListeners(connection);
	});

	// a function to set websocket connection eventlisteners and callbacks
	function setConnectionListeners(connection) {
	connection.on('message', function (msg) {
	connection.send(msg);
	})
	.on('error', function (error) { /just catch it/ })
	.on('close', function () {
	delete wss.clientConnections[connection.id];
	});
	return connection;
	}