bugfixes, new web-dev-server dependency, new websockets server 3.0.0+ implementation

Author: tomFlidr

README.md

@@ -1,6 +1,6 @@
 # Example - Chat
 
-[![Latest Stable Version](https://img.shields.io/badge/Stable-v1.2.1-brightgreen.svg?style=plastic)](https://github.com/web-dev-server/example-chat/releases)
+[![Latest Stable Version](https://img.shields.io/badge/Stable-v1.3.0-brightgreen.svg?style=plastic)](https://github.com/web-dev-server/example-chat/releases)
 [![License](https://img.shields.io/badge/Licence-BSD-brightgreen.svg?style=plastic)](https://github.com/web-dev-server/chat-example-pure-js/blob/master/LICENCE.md)
 
 Chat example with session authentication. Client scripts written with pure Javascript, no framework needed.

chat/css/style.css

@@ -27,7 +27,8 @@ form.login-form label{
 	margin:0 0 10px 0;
 	color:#fff;
 }
-form.login-form input[type=text]{
+form.login-form input[type=text],
+form.login-form input[type=password]{
 	width:220px;
 	border-radius:4px;
 	border:1px solid #c5c5c9;

chat/data/index.js

@@ -1,6 +1,7 @@
 var WebSocketServer = require('ws').Server,
 	Url = require('url'),
-	fs = require('fs');
+	fs = require('fs'),
+	expressSession = require('express-session');
 
 var App = function (httpServer, expressServer, sessionParser, request, response) {
 	this._init(httpServer, expressServer, sessionParser, request, response);
@@ -32,6 +33,7 @@ App.prototype = {
 		);
 	},
 	_webSocketSessionParsedHandler: function (ws, req) {
+		ws.upgradeReq = req; // necessary for WebSocketServer 3.0.0+, https://github.com/websockets/ws/pull/1099
 		var sessionId = req.session.id;
 		if (typeof(this._allowedSessionIds[sessionId]) == 'undefined') {
 			console.log("Connected not authorized user with session id: " + sessionId);
@@ -87,7 +89,9 @@ App.prototype = {
 
 		} else if (eventName == 'message') {
 
-			var recepient = typeof(data.recepient) != 'undefined' ? data.recepient : 'all';
+			var recepient = typeof(data.recepient) != 'undefined' && data.recepient
+				? data.recepient 
+				: 'all';
 
 			if (recepient == 'all') {
 				this._sendToAll('message', data);
@@ -116,9 +120,8 @@ App.prototype = {
 		delete this._onlineUsers[uidToDelete];
 
 		var onlineUsersToSendBack = {};
-		for (var uid in this._onlineUsers) {
+		for (var uid in this._onlineUsers) 
 			onlineUsersToSendBack[uid] = this._onlineUsers[uid].user;
-		}
 
 		this._sendToAll('logout', {
 			onlineUsers: onlineUsersToSendBack, 
@@ -148,9 +151,8 @@ App.prototype = {
 		response.targetSessionId = targetSessionId;
 		this._data.push(response);
 		this._wss.clients.forEach(function (client) {
-			if (client.upgradeReq.sessionID == targetSessionId) {
+			if (client.upgradeReq.sessionID == targetSessionId) 
 				client.send(responseStr);
-			}
 		});
 	},
 	_sendToMyself: function (eventName, data, ws) {
@@ -192,13 +194,15 @@ App.prototype = {
 			/***************************************************************************/
 			if (this._users[data.user] && this._users[data.user].pass == data.pass) {
 				// after session is authorized - set session id authorization boolean to true:
-				this._allowedSessionIds[request.session.id] = true;
+				var sessionId = request.session.id;
+				this._allowedSessionIds[sessionId] = true;
 
 				request.session.authorized = true;
-				request.session.save();
+				request.session.save(function () {
+					response.send('{"success":true,"id":' + this._users[data.user].id + '}');
+					callback();
+				}.bind(this));
 
-				response.send('{"success":true,"id":' + this._users[data.user].id + '}');
-				callback();
 			} else {
 				response.send('{"success":false');
 				callback();

chat/index.html

@@ -13,7 +13,7 @@
 		<form id="login-form" class="login-form">
 			<label for="login-user">Please enter chat nick name</label>
 			<input name="user" type="text" placeholder="Nickname" />
-			<input name="pass" type="text" placeholder="Password" />
+			<input name="pass" type="password" placeholder="Password" />
 			<input type="submit" value="Login" />
         </form>
 
@@ -45,10 +45,10 @@
 						<label for="all">Send to all</label>
 					</div>
 					<div id="recepients">
-						<div ng-show="recepient.userid != userid">
+						<!--div>
 							<input id="id" type="radio" name="rcp" value="id" />
-							<label for="id">usern</label>
-						</div>
+							<label for="id">user</label>
+						</div-->
 					</div>
 				</div>
 				<button type="submit">Send</button>

chat/js/client.js

@@ -1,6 +1,6 @@
 Class.Define('Chat', {
 	Static: {
-		ADDRESS: 'ws://localhost:8000/chat-pure-js/data/'
+		ADDRESS: 'ws://%location.host%%location.pathname%data/'
 	},
 	Constructor: function () {
 		this._initElements();
@@ -40,6 +40,10 @@ Class.Define('Chat', {
 				return scope._messageFormSubmitHandler(e || window.event);
 			}
 		};
+		window.addEventListener("unload", function(e) {
+			if (this._socket)
+				this._socket.close();
+		}.bind(this));
 		if (this._development) return;
 		window.addEventListener("beforeunload", function(e) {
 			return e.returnValue = "Do you realy want to leave chat?";
@@ -104,7 +108,11 @@ Class.Define('Chat', {
 	_initChatWebSocketComunication: function () {
 		var scope = this;
 		// connect to server:
-		this._socket = SocketWrapper.getInstance(this.self.ADDRESS);
+		this._socket = SocketWrapper.getInstance(
+			this.self.ADDRESS
+				.replace('%location.host%', location.host)
+				.replace('%location.pathname%', location.pathname)
+		);
 		// tell the server to login this user:
 		this._socket.send('login', {
 			id: this._id, 
@@ -186,6 +194,7 @@ Class.Define('Chat', {
 	},
 	_updateRecepients: function (onlineUsers) {
 		var html = '';
+		console.log(onlineUsers);
 		for (var id in onlineUsers) {
 			if (id == this._id) continue;
 			html += '<div>'

chat/js/socket-wrapper.js

@@ -17,6 +17,7 @@ SocketWrapper.prototype = {
 	_callbacks: {},
 	send: function (eventName, data) {
 		var str = JSON.stringify({eventName: eventName, data: data});
+		console.log(this._opened, str);
 		if (this._opened) {
 			this._socket.send(str);
 		} else {
@@ -51,7 +52,7 @@ SocketWrapper.prototype = {
 		};
 		return this;
 	},
-	_init: function (username) {
+	_init: function () {
 		if (this._connect()) {
 			this._socket.addEventListener('open', this._onOpenHandler.bind(this));
 			this._socket.addEventListener('error', this._onErrorHandler.bind(this));
@@ -70,17 +71,21 @@ SocketWrapper.prototype = {
 		return r;
 	},
 	_onOpenHandler: function (event) {
-    	var eventName = 'open', callbacks = [];
-    	this._opened = true;
-	    if (typeof(this._callbacks[eventName]) != 'undefined') {
-	    	this._processCallbacks(this._callbacks[eventName], [event]);
-	    }
-	    if (this._sendQueue.length) {
-	    	for (var i = 0, l = this._sendQueue.length; i < l; i++) {
-	    		this._socket.send(this._sendQueue[i]);
-	    	}
-		    this._sendQueue = [];
-	    }
+		var eventName = 'open', 
+			callbacks = [];
+		try {
+			this._opened = true;
+			if (typeof(this._callbacks[eventName]) != 'undefined') {
+				this._processCallbacks(this._callbacks[eventName], [event]);
+			}
+			if (this._sendQueue.length) {
+				for (var i = 0, l = this._sendQueue.length; i < l; i++) 
+					this._socket.send(this._sendQueue[i]);
+				this._sendQueue = [];
+			}
+		} catch (e) {
+			console.error(e);
+		}
 	},
 	_onErrorHandler: function (event) {
 		var eventName = 'error', callbacks = [], intId = 0;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-dev-server-example-chat-pure-js",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Chat example with session authentication in pure Javascript.",
   "homepage": "https://github.com/web-dev-server/example-chat-pure-js",
   "repository": {
@@ -15,7 +15,7 @@
   },
   "main": "server.js",
   "dependencies": {
-    "web-dev-server": "^1.2.0",
+    "web-dev-server": "^1.3.0",
     "ws": "^3.3.2"
   }
 }