let there be websockets

examples/simple-examples/chat/webroot/js/app.js

@@ -0,0 +1,69 @@
+(function(SS){ 'use strict';
+	var msgCnt      = document.querySelector('#messages'),
+		msgList     = document.querySelector('#message-list'),
+		msgClear    = document.querySelector('#clear-messages-btn'),
+		nameInput   = document.querySelector('#name-input'),
+		joinInput   = document.querySelector('#join-room-input'),
+		joinBtn     = document.querySelector('#join-room-btn'),
+		msgBody     = document.querySelector('#message-body-input'),
+		send        = document.querySelector('#message-send-btn'),
+		currentRoom = null,
+		months      = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+		
+		getTime = function(dt) {
+			var hours = dt.getHours(),
+				minutes = dt.getMinutes(),
+				ampm = hours >= 12 ? 'pm' : 'am';
+			hours %= 12;
+			hours = hours ? hours : 12; // the hour '0' should be '12'
+			minutes = minutes < 10 ? '0'+minutes : minutes;
+			var strTime = hours + ':' + minutes + ' ' + ampm;
+			return strTime;
+		},
+		addMsg = function(msg){
+			var li = document.createElement('li'),
+				dt = new Date(),
+				dtString = months[dt.getMonth()]+' '+dt.getDate()+', '+dt.getFullYear();
+			li.innerText = dtString+' '+getTime(dt)+' - '+msg;
+			msgList.appendChild(li);
+			msgCnt.scrollTop = msgCnt.scrollHeight;
+		};
+	
+	
+	var ss = new SS('ws://'+window.location.host+'/socket');
+	
+	ss.onConnect(function(){
+		ss.emit('join', joinInput.value);
+	});
+	
+	ss.onDisconnect(function(){
+		alert('chat disconnected');
+	});
+	
+	ss.on('joinedRoom', function(room){
+		currentRoom = room;
+		addMsg('joined room: '+room);
+	});
+	
+	ss.on('message', function(msg){
+		addMsg(msg);
+	});
+	
+	send.addEventListener('click', function(){
+		var msg = msgBody.value;
+		if(msg.length === 0) return;
+		
+		ss.emit('message', {Room: currentRoom, Message: nameInput.value+' says: '+msg});
+	});
+	
+	joinBtn.addEventListener('click', function(){
+		var room = joinInput.value;
+		if(room.length === 0) return;
+		ss.emit('join', joinInput.value);
+	});
+	
+	msgClear.addEventListener('click', function(){
+		msgList.innerHTML = '';
+	});
+	
+})(window.SS);