ZYZ/web-server/app/public/js/client.js

var pomelo = window.pomelo;
var username;
var users;
var rid;
var base = 1000;
var increase = 25;
var reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
var LOGIN_ERROR = "There is no server to log in, please wait.";
var LENGTH_ERROR = "Name/Channel is too long or too short. 20 character max.";
var NAME_ERROR = "Bad character in Name/Channel. Can only have letters, numbers, Chinese characters, and '_'";
var DUPLICATE_ERROR = "Please change your name to login.";

util = {
	urlRE: /https?:\/\/([-\w\.]+)+(:\d+)?(\/([^\s]*(\?\S+)?)?)?/g,
	//  html sanitizer
	toStaticHTML: function (inputHtml) {
		inputHtml = inputHtml.toString();
		return inputHtml.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
	},
	//pads n with zeros on the left,
	//digits is minimum length of output
	//zeroPad(3, 5); returns "005"
	//zeroPad(2, 500); returns "500"
	zeroPad: function (digits, n) {
		n = n.toString();
		while (n.length < digits)
			n = '0' + n;
		return n;
	},
	//it is almost 8 o'clock PM here
	//timeString(new Date); returns "19:49"
	timeString: function (date) {
		var minutes = date.getMinutes().toString();
		var hours = date.getHours().toString();
		return this.zeroPad(2, hours) + ":" + this.zeroPad(2, minutes);
	},

	//does the argument only contain whitespace?
	isBlank: function (text) {
		var blank = /^\s*$/;
		return (text.match(blank) !== null);
	}
};

//always view the most recent message when it is added
function scrollDown(base) {
	window.scrollTo(0, base);
	$("#entry").focus();
};

// add message on board
function addMessage(from, target, text, time) {
	var name = (target == '*' ? 'all' : target);
	if (text === null) return;
	if (time == null) {
		// if the time is null or undefined, use the current time.
		time = new Date();
	} else if ((time instanceof Date) === false) {
		// if it's a timestamp, interpret it
		time = new Date(time);
	}
	//every message you see is actually a table with 3 cols:
	//  the time,
	//  the person who caused the event,
	//  and the content
	var messageElement = $(document.createElement("table"));
	messageElement.addClass("message");
	// sanitize
	text = util.toStaticHTML(text);
	var content = '<tr>' + '  <td class="date">' + util.timeString(time) + '</td>' + '  <td class="nick">' + util.toStaticHTML(from) + ' says to ' + name + ': ' + '</td>' + '  <td class="msg-text">' + text + '</td>' + '</tr>';
	messageElement.html(content);
	//the log is the stream that we view
	$("#chatHistory").append(messageElement);
	base += increase;
	scrollDown(base);
};

// show tip
function tip(type, name) {
	var tip, title;
	switch (type) {
		case 'online':
			tip = name + ' is online now.';
			title = 'Online Notify';
			break;
		case 'offline':
			tip = name + ' is offline now.';
			title = 'Offline Notify';
			break;
		case 'message':
			tip = name + ' is saying now.'
			title = 'Message Notify';
			break;
	}
	var pop = new Pop(title, tip);
};

// init user list
function initUserList(data) {
	users = data.users;
	for (var i = 0; i < users.length; i++) {
		var slElement = $(document.createElement("option"));
		slElement.attr("value", users[i]);
		slElement.text(users[i]);
		$("#usersList").append(slElement);
	}
};

// add user in user list
function addUser(user) {
	var slElement = $(document.createElement("option"));
	slElement.attr("value", user);
	slElement.text(user);
	$("#usersList").append(slElement);
};

// remove user from user list
function removeUser(user) {
	$("#usersList option").each(
		function () {
			if ($(this).val() === user) $(this).remove();
		});
};

// set your name
function setName() {
	$("#name").text(username);
};

// set your room
function setRoom() {
	$("#room").text(rid);
};

// show error
function showError(content) {
	$("#loginError").text(content);
	$("#loginError").show();
};

// query connector
function queryEntry(param, callback) {
	var route = 'gate.gateHandler.queryEntry';
	pomelo.init({
		host: location.hostname,
		port: 3014,
		log: true
	}, function () {
		pomelo.request(route, param, function (data) {
			pomelo.disconnect();
			if (data.code !== 0) {
				showError(data.msg);
				return;
			}
			callback(data.data.host, data.data.port);
		});
	});
};

function addToContent(text) {
	$('#content').html(`<pre>${text}</pre>`);
}

$(document).ready(function () {
	//when first time into chat room.
	//wait message from the server.
	pomelo.on('onChat', function (data) {
		addMessage(data.from, data.target, data.msg);
		$("#chatHistory").show();
		if (data.from !== username)
			tip('message', data.from);
	});

	//update user list
	pomelo.on('onAdd', function (data) {
		var user = data.user;
		tip('online', user);
		addUser(user);
	});

	//update user list
	pomelo.on('onLeave', function (data) {
		var user = data.user;
		tip('offline', user);
		removeUser(user);
	});


	//handle disconect message, occours when the client is disconnect with servers
	pomelo.on('disconnect', function (reason) {
		$("#add").show();
		$('#remove').hide();
	});

	function getFormParam() {
		var d = {};
		var t = $('form').serializeArray();
		//t的值为[{name: "a1", value: "xx"},
		//{name: "a2", value: "xx"}...]
		$.each(t, function () {
			console.log(this.name, this.value, this.name == 'params' && this.value)
			if (this.name == 'params' && this.value) {
				try {
					var json = JSON.parse(this.value);
					for (var key in json) {
						console.log(key, json[key])
						d[key] = json[key];
					}
				} catch (e) {
					alert('参数json格式错误');
					return;
				}
			} else {
				if (this.name == serverId) this.value = parseInt(this.value);
				d[this.name] = this.value;
			}
		});
		console.log(d)
		return d;
	}

	//deal with login button click.
	$("#add").click(function () {
		var d = getFormParam();

		//query entry of connection
		queryEntry(d, function (host, port) {
			pomelo.init({
				host: host,
				port: port,
				log: true
			}, function () {
				var route = "connector.entryHandler.enter";
				pomelo.request(route, d, function (data) {
					console.log(data)
					if (data.code != 0) {
						if (data.msg) {
							showError(data.msg);
						} else {
							showError(DUPLICATE_ERROR);
						}
						return;
					}
					$("#add").hide();
					$('#remove').show();
					addToContent(JSON.stringify(data, null, 4));
					// setName();
					// setRoom();
					// showChat();
					// initUserList(data);
				});
			});
		});
	});

	$("#send").click(function () {
		var d = getFormParam();
		//query entry of connection
		var route = d.route;
		pomelo.request(route, d, function (data) {
			console.log(data)
			if (data.error) {
				if (data.data) {
					showError(data.data);
				} else {
					showError(DUPLICATE_ERROR);
				}
				return;
			}
			$("#add").hide();
			$('#remove').show();
			addToContent(JSON.stringify(data, null, 4));
			// setName();
			// setRoom();
			// showChat();
			// initUserList(data);
		});
	});

	$('#confirm').click(function () {
		var value = $('#tuisong').val();
		//update user list
		pomelo.on(value, function (data) {
			$('#time').html(Date.now() + '');
			$('#content2').html(`<pre>${JSON.stringify(data, null, 4)}</pre>`);
		});
		alert('OK')
	})

	$("#remove").click(function () {
		pomelo.disconnect();
		$("#add").show();
		$('#remove').hide();
	});

	$("#errbtntest").click(() => {
		var route = "chat.chatHandler.send";
		pomelo.request(route, {
			content: $("#entry").attr("value").replace("\n", ""),
			rid: rid,
			// lost field
		}, data => {
			console.warn("!!?? ", data)
		})
	})
	//deal with chat mode.
	$("#entry").keypress(function (e) {
		var route = "chat.chatHandler.send";
		var target = $("#usersList").val();
		if (e.keyCode != 13 /* Return */) return;
		var msg = $("#entry").attr("value").replace("\n", "");
		if (!util.isBlank(msg)) {
			pomelo.request(route, {
				rid: rid,
				content: msg,
				from: username,
				target: target
			}, function (data) {
				$("#entry").attr("value", ""); // clear the entry field.
				if (target != '*' && target != username) {
					addMessage(username, target, msg);
					$("#chatHistory").show();
				}
			});
		}
	});
});