Ext 在线实时聊天系统的开发（1）

最近在做毕业设计，是用Ext，ibatis，spring，struts2，和comet来做一个实时的聊天系统，这个应用其实用这个多技术，尤其是Spring和struts2，ibatis，有点大炮打苍蝇的感觉，但是这是实习公司要求的，所以也就这么做了。
刚开始入手这个系统的时候，最大的难点就是关于长连接，也就是服务器推技术的应用，当时感觉无从下手，找了pushlet的example，但是感觉实现起来有点困难。
最终决定采用dwr反转来实现长连接。
现在这个应用还在制作当中，我会定期更新，把主要的代码都放上来，供大家参考！

下面这个是主界面的设计

Ext.onReady(function() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = 'ext/s.gif';
// ---------------------------------------------好友列表树
var Tree = Ext.tree;
// 定义（可以异步加载）根节点
var root = new Tree.AsyncTreeNode({
id : '0',
text : '目录根节点'
});
// 开始构建树面板
var treePanel = new Tree.TreePanel({
id : 'im-tree',
root : root,
loader : new Tree.TreeLoader({
// 从数据库加载树形结构数据
dataUrl : '/graduationPrj/treePro.action'
}),
deferredRender : false,
region : 'west',
title : '在线用户',
border : false,
rootVisible : false,
lines : false,
autoScroll : true,
enableDD : false,
animate : false,
split : true,
width : 200,
minSize : 175,
maxSize : 400,
collapsible : false,
selModel : new Ext.tree.MultiSelectionModel(),
margins : '0 0 0 5'
});

/**
* @method expandAll
* @private
* @description 展开所有节点
*/
var expandAll = function() {
treePanel.root.expand(true, false);
}

/**
* @method updateUserList
* @private
* @description 定时更新在线用户列表，刷新时间为10分钟
*/
var updateUserList = function() {
treePanel.root.reload();
treePanel.root.expand(true, false);
setTimeout(updateUserList, 1000 * 10);
}

/**
* @method treeDoubleClick
* @private
* @description 添加‘双击事件’处理 当双击节点时，弹出聊天对话框
*/
var treeDoubleClick = function(node, e) {
if (node.isLeaf()) {
addOrOpenTab(node.text);
}
}
treePanel.on('dblclick', treeDoubleClick);


/**
* @method treeDoubleClick
* @private
* @description 判断tab有没有存在，如果不存在添加新tab
*/
var addOrOpenTab = function(nodeText) {
var n = tabs.getComponent(nodeText);
if (!n) {
n = tabs.add({
'id' : nodeText,
'title' : nodeText,
layout : 'border',
closable : true,
items : [new Ext.Panel({
region : 'center',
title : '聊天记录  ',
autoScroll : true,
html : '<div id=' + nodeText + 'div></div>',
tools : [{
id : 'refresh',
qtip : '注意：如果长时间没有收到对方回应，试一下',
// hidden:true,
handler : function(event, toolEl, panel) {
// refresh logic
}
}]
})]
});
}
tabs.setActiveTab(n);
}


// ---------------------------------------------公共聊天室
var logPanel = new Ext.Panel({
region : 'center',
title : '聊天记录  ',
id : 'history_panel',
autoScroll : true,
html : '<div id=publicChat></div>',
tools : [{
id : 'refresh',
qtip : '注意：如果长时间没有收到对方回应，试一下',
// hidden:true,
handler : function(event, toolEl, panel) {
// refresh logic
}
}]
});
/**
* @method treeDoubleClick
* @private
* @description 公用的输入文本框
*/
var chatPanel = new Ext.Panel({
region : 'south',
title : '聊天啦',
layout : 'fit',
// split:true,
autoScroll : true,
height : 250,
// minSize: 200,
// maxSize: 500,
collapsible : true,

margins : '0 0 0 0',
items : {
xtype : 'form',
baseCls : 'x-plain',
autoHeight : true,
autoWidth : true,
bodyStyle : 'padding:10 10px 0;',
defaults : {
anchor : '98%'
},
items : [{
xtype : 'htmleditor',
height : 150,
id : 'htmleditor',
hideLabel : true
}]
},
bbar : [{
text : '发送请输入Ctrl-Enter',
handler : function() {
var t = tabs.getActiveTab().getId();
if (t == 'allChat') {
sendPublicMsg();
} else {
sendPrivateMsg();
}
}
}

, '-', {
text : '清除',
handler : function() {
Ext.getCmp("htmleditor").reset();
}
}]
});

var allChatPanel = new Ext.Panel({
id : 'allChat',
title : '公共聊天室',
layout : 'border',
items : [logPanel]
});

/**
* 构建标签面板，出现在主显示页面，用于显示信息
*/
var tabs = new Ext.TabPanel({
region : 'center',
deferredRender : false,
id : 'tabs',
resizeTabs : true,
minTabWidth : 115,
tabWidth : 135,
height : 100,
autoScroll : true,
enableTabScroll : true,
plugins : new Ext.ux.TabCloseMenu(),
items : [allChatPanel]
});
tabs.setActiveTab(allChatPanel);

var sendPublicMsg = function() {
var content_value = Ext.getCmp("htmleditor").getValue();
var t = tabs.getActiveTab().getId();
if (content_value.trim() == '') {
Ext.Msg.alert("消息提示", "您没有输入消息文本内容！");
Ext.getCmp("htmleditor").focus();
return;
}

var receivers_values = [];
var tree = Ext.getCmp('im-tree');
var receivers = tree.getSelectionModel().getSelectedNodes();
for (i = 0; i < receivers.length; ++i) {

receivers_values.push(receivers[i].attributes.sessionId);

}
if (receivers_values.length == 0) {
Ext.Msg.alert("消息提示", '您没有选择接收者！');
tree.focus();
return;
}
// alert(receivers_values.length);
if (receivers_values.length > 1) {
Ext.Msg.alert("消息提示", '只能选择一个接收者！');
tree.focus();
return;
}
document.getElementById('publicChat').innerHTML = t + '中的aaadasdasdasd';
}

var sendPrivateMsg = function() {
var content_value = Ext.getCmp("htmleditor").getValue();
var t = tabs.getActiveTab().getId();
if (content_value.trim() == '') {
Ext.Msg.alert("消息提示", "您没有输入消息文本内容！");
Ext.getCmp("htmleditor").focus();
return;
}

document.getElementById(t + 'div').innerHTML = t + '中的aaadasdasdasd';
document.getElementById("publicChat").innerHTML = t + '中的aaadasdasdasd';
}

/**
* @method treeDoubleClick
* @private
* @description 主界面，添加各个元素
*/

var viewport = new Ext.Viewport({
layout : 'border',
items : [treePanel, {
region : 'center',
layout : 'border',
autoScroll : true,
items : [tabs, chatPanel]
}

]
});
expandAll();
updateUserList();
});

// -------------------------------------------------------------------

评论

12 楼 xiaoyu966 2009-07-30  

deng131 写道

fuwei1688 写道

不是说还有吗？后面的咋还不发呀！！

期待你的详细介绍

http://www.iteye.com/topic/375509#984089

4月份我就把源码公开了，自己去下载看看吧，我注释写的很详细了

11 楼 xiaoyu966 2009-07-30  

lich0079 写道

我写了一个用pushlet写的web IM， pushlet官网上面列子很少，介绍文档也不多，但pushlet本身其实是个很小型的框架，源码就几十个类，而且好像开发人员就一个人
我的那个web IM在我博客上，可以当列子看下，源码都在js，html里面，我都没写java代码的

谢谢呵呵，我4月份就完成了。已经写完了

10 楼 xiaoyu966 2009-07-30  

xiaoyu966 写道

fuwei1688 写道

不是说还有吗？后面的咋还不发呀！！

http://www.iteye.com/topic/375509#984089

好几个月前我就把源码公开了，你自己没看我文章而已。自己去下载

9 楼 xiaoyu966 2009-07-30  

fuwei1688 写道

不是说还有吗？后面的咋还不发呀！！

http://www.iteye.com/topic/375509#984089

好几个月前我就把源码公开了，你自己没看我文章而已。自己去下载

8 楼 lich0079 2009-07-30  

我写了一个用pushlet写的web IM， pushlet官网上面列子很少，介绍文档也不多，但pushlet本身其实是个很小型的框架，源码就几十个类，而且好像开发人员就一个人
我的那个web IM在我博客上，可以当列子看下，源码都在js，html里面，我都没写java代码的

7 楼 deng131 2009-07-30  

fuwei1688 写道

不是说还有吗？后面的咋还不发呀！！

期待你的详细介绍

6 楼 fuwei1688 2009-07-29  

不是说还有吗？后面的咋还不发呀！！

5 楼 lonaluo 2009-07-15  

发一份完整的吧[e-mail]

4 楼 xiaoyu966 2009-04-27  

presses 写道

最好先搞清楚“实时”的概念。

麻烦你看看上面的回复，而且你没看到上面标一个（1）么？这个我打算慢慢更新的，最近工作很紧张，没时间来写。现在发的只是一个最最基本的原型。下一步我会把dwr反转实现的长连接群聊发上来的

3 楼 presses 2009-04-27  

最好先搞清楚“实时”的概念。

2 楼 xiaoyu966 2009-04-27  

freespace 写道

看了下，没有发现你采用dwr的长联接技术，未发现setActiveReverseAjax函数。如果采用长连接，不需要采用setTimeout进行用户更新，直接从服务器推用户列表到web层就可以了。

这个只是原型搭建，后面的会慢慢加上的，setActiveReverseAjax这个函数我给放到初始化的一个js里面了。最近公司的事情很多，没空闲时间发后续的。
等有时间了我会一步一步把东西都加上

1 楼 freespace 2009-04-26  

看了下，没有发现你采用dwr的长联接技术，未发现setActiveReverseAjax函数。如果采用长连接，不需要采用setTimeout进行用户更新，直接从服务器推用户列表到web层就可以了。