Dan Zen Expo - Code Example

DAN ZEN EXPO - CODE EXHIBIT - ZIM CHAT
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZIM Chat</title>
<script src="http://d309knd7es5f10.cloudfront.net/zimcode_1.4.js"></script>
<script src="http://d309knd7es5f10.cloudfront.net/zimsocket_1.0.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.4.js"></script>


<script>

var socket; 
var server = "http://54.209.193.48:3000";	
var appName = "zimChat";
var currentRoom;
var currentName;

function doJoin() {  // this client clicking join button to join room
	
	var room = zid("room");
	var name = zid("name");
	
	// check text fields are filled in
	var check = true;
	if (room.value == "") {room.style.background = "pink"; check = false;}
	if (name.value == "") {name.style.background = "pink"; check = false;}
	if (!check) {
		setTimeout(function() {
			room.style.background = "transparent";
			name.style.background = "transparent";
		}, 500);
		return;
	}	
	
	// first time joining?
	if (!socket) {
		displayMessage("connecting...", true);
		init();
	} else {
		if (!socket.ready) { // clicking button before socket ready
			displayMessage("connecting...", true);
			return;
		}
		if (checkText(room.value) != currentRoom || checkText(name.value) != currentName ) { // changing rooms or name
			leaveRoom(currentName);
			socket.changeRoom(appName, checkText(room.value), 0, true, {name:checkText(name.value)});	
		} // else no change in room so ignore
	}	
}

function joinRoom(roomName, personName) {
	currentRoom = roomName;
	currentName = personName;
	displayMessage(socket.history, true); // overwrite div text
	var output = "<span class=z>ZIM: " + personName + " has joined the room</span><br>";
	socket.appendToHistory(output);
	displayMessage(output);
}

function leaveRoom(personName) {
	var output = "<span class=z>ZIM: " + currentName + " has left the room</span><br>";
	socket.appendToHistory(output);		
}

function displayMessage(message, overwrite) {
	var messages = zid("messages");
	if (overwrite) messages.innerHTML = "";
	var current = messages.innerHTML;
	current = current.substring(0,current.length - 4); // remove the last <br>
	messages.innerHTML = current + message + "<br>"; // just so not always reading at the very bottom
	messages.scrollTop = messages.scrollHeight;
	messages.style.paddingBottom = "40px";
}

function init() {
	
	// first time join
	var room = zid("room");
	var name = zid("name");
	var roomName = room.value;
	var limit = 0;
	var fill = true;
	var initialData = {name:checkText(name.value)};
	
	socket = new zim.Socket(server, appName, roomName, limit, fill, initialData);

	socket.on("ready", function() {
		zog("connected");
		joinRoom(checkText(room.value), checkText(name.value));
		window.addEventListener("keydown", function(e) {
			if (e.keyCode == 13) doSend();			
		});
	});
	
	socket.on("roomchange", function() {
		var room = zid("room");
		var name = zid("name");
		joinRoom(checkText(room.value), checkText(name.value)); 
	});
	
	socket.on("data", function(data) { // other people's post
		var output = data.name + ": " + data.message + "<br>";
		displayMessage(output);
	});
	
	socket.on("otherjoin", function(data) {
		var output = "<span class=z>ZIM: " + data.name + " has joined the room</span><br>";
		displayMessage(output);
	});
	
	socket.on("otherleave", function(data) {
		var output = "<span class=z>ZIM: " + data.name + " has left the room</span><br>";
		displayMessage(output);
	});
	
	socket.on("disconnect", function() { // client leaving
		leaveRoom(currentName);
	});

	
	socket.on("error", function() {
		zog("error connecting");
		displayMessage("sorry - connection error", true);
		socket.offAll(); // removeAllEventListeners()
		socket.dispose();
		socket = null;
	}); 

}

function doSend() { // client clicking send button to send message

	var room = zid("room");
	var name = zid("name");
	var message = zid("message");
	
	// check message field
	if (message.value == "") {
		message.style.background = "pink"; 
		setTimeout(function() {
			message.style.background = "transparent";
		}, 500);
		return;
	}
	// check we have joined
	if (!socket || !socket.ready) {
		zss("join").border = "2px solid red";
		setTimeout(function() {
			zss("join").border = "2px solid #ccc";
		}, 500);
		return;
	}
	socket.setProperties({name:currentName, message:checkText(message.value)});
	var output = currentName + ": " + checkText(message.value) + "<br>";
	socket.appendToHistory(output);
	displayMessage(output);
	message.value = "";
}

function checkText(t) {
	t = t.replace(/&/g, "&");
	t = t.replace(/</g, "<");
	t = t.replace(/>/g, ">");
	return t;
}



</script>

<style>
html {text-align:center}
body {font-family:"Courier New", Courier, monospace; font-size:18px; padding:30px; background-color:#eee; color:#666;}
a.button {
	display:inline-block;
	text-align:center;
	width:100px;
	font-size:18px;
	padding:6px;
	margin:8px 0px; 
	-moz-border-radius: 10px;
	border-radius: 10px; 	
	color:#555;
	border:2px #ccc solid;
	background-color:#ddd;
	cursor:pointer;
}

a.button:hover {		
	color:#444;
	background-color:orange; 
}

input {
	color:#555;
	font-family:'Courier New', Courier, monospace;
	font-size:18px;
	padding:6px;
	margin:10px 0px;
	width:200px;
	border:thin #ccc solid;
}

.z {color:orange;}

input[id="message"] {min-width:200px; width:80%; padding:10px;}

#messages {
	min-width:200px; 
	width:90%;
	height:120px;
	overflow:auto;
	border:double 10px #ddd;
	padding:20px;
	-moz-border-radius: 20px;
	border-radius: 20px; 
	text-align:left;	
	background-color:white;
	line-height:140%;
	font-size:18px;
}

h1 {font-weight:normal; font-size:24px; margin-top:0px; margin-bottom:20px}

</style>

</head>

<body>

<p><a href="socket.html"><img src="images/chat.png" width="120"></a></p>

<h1>ZIM CHAT</h1>

ROOM: <input type=text id=room value="zim" /><br />
NAME: <input type=text id=name placeholder="Your Name" />
<br />
<a id="join" class="button" onclick="doJoin(); return false;">JOIN</a>
<br /><br />
<div id="messages"></div>

<input type=text id=message placeholder="Your Message" />
<br />
<a class="button" onclick="doSend(); return false;">SEND</a>

</body>
</html>