client.js

用ExtJS做的一个网页聊天工具

/**
 * @author 宋英豪
 * @description QQ Client
 */
Ext.BLANK_IMAGE_URL = './ext-2.2/resources/images/default/s.gif'
Ext.onReady(function() {

	var Window = Ext.Window;
	var Tree = Ext.tree;
	Ext.QuickTips.init();

	/**
	 * 构建一个树面板，出现在主显示页面的左侧栏，用于导航 树的根节点为：rootNode 节点加载形式为异步加载
	 */
	// 定义节点的Loader,为Loader加上监视器
	// 防止在网络出现异常的时候，从后台提取不到数据
	var nodeLoader = new Tree.TreeLoader({
		listeners : {
			"loadexception" : function(loader, node, response) {
				node.loaded = false;
				node.reload.defer(10, node);
			}
		}
	});
	// 可以异步加载的根节点
	var root = new Tree.AsyncTreeNode({
		id : '0',
		text : '目录根节点'
	});

	// 开始构建树面板
	var treePanel = new Tree.TreePanel({

		root : root,
		loader : nodeLoader,
		deferredRender : false,
		title : '在线好友',
		split : true,
		border : true,
		rootVisible : false,
		lines : false,
		autoScroll : true,
		animCollapse : true,
		enableDD : false,
		animate : false
	});

	/**
	 * 为导航树添加单击事件，当单击某一节点（非叶节点）时，异步加载对应子节点
	 */

	function treeLoadClick(node, e) {

		if (!node.isLeaf()) {
			treePanel.loader.dataUrl = 'treedata.jsp?DID=' + node.id;
		}
	}
	treePanel.on('beforeload', treeLoadClick);

	treePanel.expandAll();
	/**
	 * 为树增加双击事件，当双击击某一节点时，弹出对话框
	 */
	var chartTopTB = new Ext.Toolbar({
		items : [{}]
	});

	function treeDoubleClick(node, e) {
		var qqChartWin = new Window({
			title : '和' + node.text + '聊天中',
			id : node.text,
			width : 550,
			height : 450,
			collapsible : true,
			labelAlign : 'left',
			labelWidth : 60,
			hideLabel : false,
			maximizable : true,
			border : false,
			layout : 'border',
			frame : true,
			tbar : chartTopTB,
			items : [{
						region : 'center',
						border : 0,
						height : 150,
						xtype : 'panel',
						id : 'showMsg',
						layout : 'fit',
						bodyStyle : 'padding:10px;'

					}, {
						region : 'south',
						minHeight : 150,
						split : true,
						xtype : 'form',
						border : false,
						hideLabels : true,
						bodyStyle : 'background:transparent;',
						height : 150,
						items : [{
							xtype : 'htmleditor',
							id : 'editMsg',
							fieldLabel : '',
							name : 'body',
							allowBlank : false,
							anchor : '0-50',
							border : false
						}],
						buttons : [{
									text : '发送',
									handler : sendMsg
								}, {
									text : '关闭',
									handler : closeWin
								}]
					}]

		});
		qqChartWin.show();
		// -------------
		function sendMsg() {
			var message = Ext.getCmp(node.text).findById('editMsg').getValue();
			var toUserName = node.text;
			var fromUserName = '宋英豪';
			// 将消息增加到消息显示框
			var sendDate = new Date().format('Y-m-d H:i:s');
			var showMsgPanel = Ext.getCmp(node.text).findById('showMsg');
			var formatMsg = "<div class='_msgtitle' style='color:blue'>"
					+ fromUserName + " " + sendDate
					+ "</div><div class='_msg'>" + message + "</div>";
			showMsgPanel.body.insertHtml("beforeEnd", formatMsg);
			showMsgPanel.body.scroll('bottom', 9999);
			// 清空发送消息框
			Ext.getCmp(node.text).findById('editMsg').setValue('');
			// 发送消息至服务器端
			var conn = new Ext.data.Connection();
			conn.request({
				url : 'http://localhost:8088/WebQQApp/sendMsg.do',
				method : 'POST',
				params : {
					fromUserName : fromUserName,
					toUserName : toUserName,
					message : encodeURIComponent(message)
				},
				sucess : function(responseObject) {

				},
				failure : function() {
					Ext.Msg.alert('Fail to send Message',
							responseObject.statusText);
				}
			});
		}
		function closeWin() {
			qqChartWin.close();
		}

	}
	treePanel.on('dblclick', treeDoubleClick);
	/**
	 * 获取服务器端的消息
	 */
	function loadMsg() {
		Ext.Ajax.request({
			url : 'http://localhost:8088/WebQQApp/sendMsg.do?toUserName='
					+ '宋英豪',
			success : function(response) {
				if (response.responseText != '') {
					var msg = Ext.decode(response.responseText);
					var msglist = msg.Tables.Table.Rows;
					for (var i = 0; i < msglist.length; i++) {
						autoShowChatWin(msglist[i]);
						addMsg(msglist[i]);
					}
				}
			}
		});

		setTimeout("loadMsg();", 1000 * 10);
	}
	/**
	 * 显示消息
	 */

	function addMsg(msg) {
		var formatmsg = "<div class='_msgtitle' style='color:blue'>"
				+ msg.fromUserName + "  " + msg.sendDate
				+ "</div><div class='_msg'>" + decodeURIComponent(msg.message)
				+ "</div>";
		Ext.getCmp(msg.fromUserName).findById("showMsg").body.insertHtml(
				"beforeEnd", formatmsg);
		Ext.getCmp(msg.fromUserName).findById("showMsg").body.scroll("bottom",
				9999);
	}

	/**
	 * 自动弹出聊天窗口
	 */
	function autoShowChatWin(msg) {
		var currentWin = Ext.getCmp(msg.fromUserName);
		if (currentWin != null) {
			return null;
		}
		var qqChartWin = new Window({
			title : '和' + msg.fromUserName + '聊天中',
			id : msg.fromUserName,
			width : 550,
			height : 450,
			collapsible : true,
			labelAlign : 'left',
			labelWidth : 60,
			hideLabel : false,
			maximizable : true,
			border : false,
			layout : 'border',
			frame : true,
			tbar : chartTopTB,
			items : [{
						region : 'center',
						border : 0,
						height : 150,
						xtype : 'panel',
						id : 'showMsg',
						layout : 'fit',
						bodyStyle : 'padding:10px;'

					}, {
						region : 'south',
						minHeight : 150,
						split : true,
						xtype : 'form',
						border : false,
						hideLabels : true,
						bodyStyle : 'background:transparent;',
						height : 150,
						items : [{
							xtype : 'htmleditor',
							id : 'editMsg',
							fieldLabel : '',
							name : 'body',
							allowBlank : false,
							anchor : '0-50',
							border : false
						}],
						buttons : [{
									text : '发送',
									handler : sendMsg
								}, {
									text : '关闭',
									handler : closeWin
								}]
					}]

		});
		function sendMsg() {
			var message = Ext.getCmp(node.text).findById('editMsg').getValue();
			var toUserName = node.text;
			var fromUserName = '宋英豪';
			// 将消息增加到消息显示框
			var sendDate = new Date().format('Y-m-d H:i:s');
			var showMsgPanel = Ext.getCmp(node.text).findById('showMsg');
			var formatMsg = "<div class='_msgtitle' style='color:blue'>"
					+ fromUserName + " " + sendDate
					+ "</div><div class='_msg'>" + message + "</div>";
			showMsgPanel.body.insertHtml("beforeEnd", formatMsg);
			showMsgPanel.body.scroll('bottom', 9999);
			// 清空发送消息框
			Ext.getCmp(node.text).findById('editMsg').setValue('');
			// 发送消息至服务器端
			var conn = new Ext.data.Connection();
			conn.request({
				url : 'http://localhost:8088/WebQQApp/sendMsg.do',
				method : 'POST',
				params : {
					fromUserName : fromUserName,
					toUserName : toUserName,
					message : encodeURIComponent(message)
				},
				sucess : function(responseObject) {

				},
				failure : function() {
					Ext.Msg.alert('Fail to send Message',
							responseObject.statusText);
				}
			});
		}
		function closeWin() {
			qqChartWin.close();
		}

	}
	/**
	 * 构建主窗体
	 */
	var topTB = new Ext.Toolbar({
		items : [{
					text : '',
					tooltip : {
						title : '',
						text : ''
					}
				}, '-', {
					text : '添加',
					tooltip : '添加一个好友'
				}, '-', {
					text : '添加',
					tooltip : '添加一个好友'
				}]
	});
	var qqClientWin = new Window({
		el : 'qq-win',
		title : 'WebQQ',
		collapsible : true,
		width : 250,
		height : 400,
		shim : false,
		animCollapse : false,
		constrainHeader : true,
		tbar : topTB,
		layout : 'accordion',
		border : false,
		layoutConfig : {
			animate : false
		},
		items : [treePanel, {
			title : '通讯录',
			html : '<p>//ToDo</p>',
			autoScroll : true
		}, {
			title : '交流群',
			html : '<p>//ToDo</p>'
		}]

	});

	qqClientWin.show();
	loadMsg();

});