先分别介绍一下ExtJS和JQuery，然后进行对比分析

一、什么是ExtJS？

1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

二、什么是JQuery？

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

三、二者对比

1.JQuery-EasyUI是仿照Ext做的。

2.Ext框架是一个整体，面向对象的编程思想，每个控件之间可以相互通讯。

3.JQuery的控件全都是分散的，没有整体性可言。你可以单独拿出来一个控件就能用。

4.若要开发系统应用，首选Ext，控件库丰富，扩展和维护都方便。若是简单的页面动画和效果，首选JQuery

5.jquery只是一个工具库，比较简单，相对容易。 Ext是一套真正的ria开发框架，甚至可以实现桌面应用一样的强大功能。本身代码质量极高，而且是高度的面向对象设计。jQuery 入门相对容易一些，实际用的过程中要用到各种插件，基本上用一个“学”一个。 ExtJS 入门稍难。

6.大小比较：首先ExtJS是一个完整的Framework,是重量级别的，easy ui 是基于jquery库的一套UI组件库，是轻量级的，ExtJS是应用application级的，而jquery是page页面级的。当然application也是由page组成的，那就需要你自己去完成了，考虑你的需求，和使用框架的初衷，选择使用哪一种。同时ExtJs由于是重量级框架，完全面向对象风格，提供API非常完备也非常庞大，所以学习成本也想相对较大。

7.兼容性比较：ExtJS兼容IE全系列浏览器和其他非IE现代浏览器，jquery UI向来不太考虑ie低版本浏览器的兼容，从态度上的鄙视。easy UI是基于jquery的，jquery2.X以上的版本不再支持IE6、7、8,，已郑重声明，请看官方网站，easyUI最新版本1.3.3使jQuery2.0,由于又很多HTML5特性，不再支持IE6，低版本由一些小部分的兼容不够好，请自己做技术选型的时候去测试，你要使用那个版本。在兼容问题上，他们都有瑕疵，看你的接收程度。

8.使用许可license. EXTJS 2.1以上版本，商用需要购买商业授权，jquery UI 使用MIT协议，开源。 jquery easyUI如果商用需遵循license commercial商业许可，也就是要购买使用权.

于html5的Websocket网页即时通讯技术，前端开发采用ExtJS前端框架

JavaEE框架：Mybatis、SpringMVC

先去官网下载ExtJS框架的资料文件：

https://www.sencha.com/products/extjs/evaluate/

可以参考中文翻译过来的官网查看API：

http://extjs-doc-cn.github.io/ext4api/

下载集成的jar：

websocket.css:

@CHARSET "UTF-8";
.l-im-message-warn {
 font-family: "微软雅黑";
 cursor: default;
 width: 100%;
 padding: 5px 0px 5px 25px;
 -webkit-user-select : none;
 background: url("../images/information.png") no-repeat 5;
}
.l-im-message {
 font-family: "微软雅黑";
 cursor: default;
 width: 100%;
}
.l-im-message-over {
 background-color: rgba(233, 233, 233, 0.5);
}
.l-im-message-selected {
 background-color: rgba(250, 218, 90, 0.5);
}
.l-im-message-header {
 font-size: 12px;
 padding: 5px 0px 5px 10px;
}
.l-im-message-header-self {
 color: green;
}
.l-im-message-header-remote {
 color: blue;
}
.l-im-message-body {
 font-size: 12px;
 padding: 2px 0px 2px 20px;
}
.user-win {
 background-image: url( ../images/user_win.png )
 !important;
}
.user-online {
 background-image: url( ../images/group.png )
 !important;
}
.user {
 background-image: url( ../images/user.gif )
 !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

websocket.js:

var websocket;
var isCreatw = false;
var title="";
var win;
var input;
var isQj = true;
var toUser="";
function toUserMsg(toU){
 if((!isQj && toUser == toU) || toU == user){
 win.setTitle(title + " (已连接) 【现在全局对话】");
 isQj = true;
 toUser = "";
 }else{
 win.setTitle(title + " (已连接) 【现在单独与"+toU+"对话】");
 isQj = false;
 toUser = toU;
 }
}
 function creatw() {
 if(isCreatw){
 alert("已经启动");
 return;
 }else{
 isCreatw = true;
 }
 //创建用户输入框
 input = Ext.create('Ext.form.field.HtmlEditor', {
 region : 'south',
 height : 120,
 enableFont : false,
 enableSourceEdit : false,
 enableAlignments : false,
 listeners : {
 initialize : function() {
 Ext.EventManager.on(me.input.getDoc(), {
 keyup : function(e) {
 if (e.ctrlKey === true
 && e.keyCode == 13) {
 e.preventDefault();
 e.stopPropagation();
 send();
 }
 }
 });
 }
 }
 });
 //创建消息展示容器
 var output = Ext.create('MessageContainer', {
 region : 'center'
 });
 var dialog = Ext.create('Ext.panel.Panel', {
 region : 'center',
 layout : 'border',
 items : [input, output],
 buttons : [{
 text : '发送',
 handler : send
 }]
 });
 //初始话WebSocket
 function initWebSocket() {
 if (window.WebSocket) {
 websocket = new WebSocket(encodeURI('ws://'+wimadress));
 websocket.onopen = function() {
 //连接成功
 win.setTitle(title + ' (已连接) 【现在全局对话】');
 websocket.send('admin'+user);
 }
 websocket.onerror = function() {
 //连接失败
 win.setTitle(title + ' (连接发生错误)');
 }
 websocket.onclose = function() {
 //连接断开
 win.setTitle(title + ' (已经断开连接)');
 }
 //消息接收
 websocket.onmessage = function(message) {
 var message = JSON.parse(message.data);
 //接收用户发送的消息
 if (message.type == 'message') {
 output.receive(message);
 } else if (message.type == 'get_online_user') {
 //获取在线用户列表
 var root = onlineUser.getRootNode();
 Ext.each(message.list,function(user){
 var node = root.createNode({
 id : user,
 text : user,
 iconCls : 'user',
 leaf : true
 });
 root.appendChild(node);
 });
 } else if (message.type == 'user_join') {
 //用户上线
 var root = onlineUser.getRootNode();
 var user = message.user;
 var node = root.createNode({
 id : user,
 text : user,
 iconCls : 'user',
 leaf : true
 });
 root.appendChild(node);
 } else if (message.type == 'user_leave') {
 //用户下线
 var root = onlineUser.getRootNode();
 var user = message.user;
 var node = root.findChild('id',user);
 root.removeChild(node);
 }
 }
 }
 };
 //在线用户树
 var onlineUser = Ext.create('Ext.tree.Panel', {
 title : '在线用户',
 rootVisible : false,
 region : 'east',
 width : 150,
 lines : false,
 useArrows : true,
 autoScroll : true,
 split : true,
 iconCls : 'user-online',
 store : Ext.create('Ext.data.TreeStore', {
 root : {
 text : '在线用户',
 expanded : true,
 children : []
 }
 })
 });
 title = '欢迎您：' + user;
 //展示窗口
 win = Ext.create('Ext.window.Window', {
 title : title + ' (未连接)',
 layout : 'border',
 iconCls : 'user-win',
 minWidth : 650,
 minHeight : 460,
 width : 650,
 animateTarget : 'websocket_button',
 height : 460,
 items : [dialog,onlineUser],
 border : false,
 listeners : {
 render : function() {
 initWebSocket();
 }
 }
 });
 win.show();
 win.on("close",function(){
 websocket.send('LeaveAdmin');
 isCreatw = false;
 });
 //发送消息
 function send() {
 var content = input.getValue();
 if(toUser != ""){content = "admin886"+toUser+"admin888" + content;}
 var message = {};
 if (websocket != null) {
 if (input.getValue()) {
 Ext.apply(message, {
 from : user,
 content : content,
 timestamp : new Date().getTime(),
 type : 'message'
 });
 websocket.send(JSON.stringify(message));
 //output.receive(message);
 input.setValue('');
 }
 } else {
 Ext.Msg.alert('提示', '您已经掉线，无法发送消息!');
 }
 }
};
//用于展示用户的聊天信息
Ext.define('MessageContainer', {
 extend : 'Ext.view.View',
 trackOver : true,
 multiSelect : false,
 itemCls : 'l-im-message',
 itemSelector : 'div.l-im-message',
 overItemCls : 'l-im-message-over',
 selectedItemCls : 'l-im-message-selected',
 style : {
 overflow : 'auto',
 backgroundColor : '#fff'
 },
 tpl : [
 '<div class="l-im-message-warn">​欢迎使用即时通讯系统。</div>',
 '<tpl for=".">',
 '<div class="l-im-message">',
 '<div class="l-im-message-header l-im-message-header-{source}">{from} {timestamp}</div>',
 '<div class="l-im-message-body">{content}</div>', '</div>',
 '</tpl>'],
 messages : [],
 initComponent : function() {
 var me = this;
 me.messageModel = Ext.define('Leetop.im.MessageModel', {
 extend : 'Ext.data.Model',
 fields : ['from', 'timestamp', 'content', 'source']
 });
 me.store = Ext.create('Ext.data.Store', {
 model : 'Leetop.im.MessageModel',
 data : me.messages
 });
 me.callParent();
 },
 //将服务器推送的信息展示到页面中
 receive : function(message) {
 var me = this;
 message['timestamp'] = Ext.Date.format(new Date(message['timestamp']),
 'H:i:s');
 if(message.from == user){
 message.source = 'self';
 }else{
 message.source = 'remote';
 }
 me.store.add(message);
 if (me.el.dom) {
 me.el.dom.scrollTop = me.el.dom.scrollHeight;
 }
 }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254

业务代码编写：

ChatServer.java

package com.appms.websocket;
import java.io.IOException;
import java.net.InetSocketAddress;
import java.net.UnknownHostException;
import java.util.Date;
import net.sf.json.JSONObject;
import org.java_websocket.WebSocket;
import org.java_websocket.WebSocketImpl;
import org.java_websocket.framing.Framedata;
import org.java_websocket.handshake.ClientHandshake;
import org.java_websocket.server.WebSocketServer;
/**
 * 即时通讯
 */
public class ChatServer extends WebSocketServer{
 public ChatServer(int port) throws UnknownHostException {
 super(new InetSocketAddress(port));
 }
 public ChatServer(InetSocketAddress address) {
 super(address);
 }
 /**
 * 触发连接事件
 */
 @Override
 public void onOpen( WebSocket conn, ClientHandshake handshake ) {
 }
 /**
 * 触发关闭事件
 */
 @Override
 public void onClose( WebSocket conn, int code, String reason, boolean remote ) {
 userLeave(conn);
 }
 /**
 * 客户端发送消息到服务器时触发事件
 */
 @Override
 public void onMessage(WebSocket conn, String message){
 message = message.toString();
 if(null != message && message.startsWith("admin")){
 this.userjoin(message.replaceFirst("admin", ""),conn);
 }if(null != message && message.startsWith("LeaveAdmin")){
 this.userLeave(conn);
 }if(null != message && message.contains("admin886")){
 String toUser = message.substring(message.indexOf("admin886")+8, message.indexOf("admin888"));
 message = message.substring(0, message.indexOf("admin886")) +"[私信] "+ message.substring(message.indexOf("admin888")+8, message.length());
 ChatServerPool.sendMessageToUser(ChatServerPool.getWebSocketByUser(toUser),message);//向所某用户发送消息
 ChatServerPool.sendMessageToUser(conn, message);//同时向本人发送消息
 }else{
 ChatServerPool.sendMessage(message.toString());//向所有在线用户发送消息
 }
 }
 public void onFragment( WebSocket conn, Framedata fragment ) {
 }
 /**
 * 触发异常事件
 */
 @Override
 public void onError( WebSocket conn, Exception ex ) {
 ex.printStackTrace();
 if( conn != null ) {
 //some errors like port binding failed may not be assignable to a specific websocket
 }
 }
 /**
 * 用户加入处理
 * @param user
 */
 public void userjoin(String user, WebSocket conn){
 JSONObject result = new JSONObject();
 result.element("type", "user_join");
 result.element("user", "<a onclick=\"toUserMsg('"+user+"');\">"+user+"</a>");
 ChatServerPool.sendMessage(result.toString()); //把当前用户加入到所有在线用户列表中
 String joinMsg = "{\"from\":\"[系统]\",\"content\":\""+user+"上线了\",\"timestamp\":"+new Date().getTime()+",\"type\":\"message\"}";
 ChatServerPool.sendMessage(joinMsg); //向所有在线用户推送当前用户上线的消息
 result = new JSONObject();
 result.element("type", "get_online_user");
 ChatServerPool.addUser(user,conn); //向连接池添加当前的连接对象
 result.element("list", ChatServerPool.getOnlineUser());
 ChatServerPool.sendMessageToUser(conn, result.toString()); //向当前连接发送当前在线用户的列表
 }
 /**
 * 用户下线处理
 * @param user
 */
 public void userLeave(WebSocket conn){
 String user = ChatServerPool.getUserByKey(conn);
 boolean b = ChatServerPool.removeUser(conn); //在连接池中移除连接
 if(b){
 JSONObject result = new JSONObject();
 result.element("type", "user_leave");
 result.element("user", "<a onclick=\"toUserMsg('"+user+"');\">"+user+"</a>");
 ChatServerPool.sendMessage(result.toString()); //把当前用户从所有在线用户列表中删除
 String joinMsg = "{\"from\":\"[系统]\",\"content\":\""+user+"下线了\",\"timestamp\":"+new Date().getTime()+",\"type\":\"message\"}";
 ChatServerPool.sendMessage(joinMsg); //向在线用户发送当前用户退出的消息
 }
 }
 public static void main( String[] args ) throws InterruptedException , IOException {
 WebSocketImpl.DEBUG = false;
 int port = 8887; //端口
 ChatServer s = new ChatServer(port);
 s.start();
 System.out.println( "服务器的端口" + s.getPort() );
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

ChatServerPool.java:

package com.appms.websocket;
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import org.java_websocket.WebSocket;
/**
 * 即时通讯
 */
public class ChatServerPool {
 private static final Map<WebSocket,String> userconnections = new HashMap<WebSocket,String>();
 /**
 * 获取用户名
 * @param session
 */
 public static String getUserByKey(WebSocket conn){
 return userconnections.get(conn);
 }
 /**
 * 获取WebSocket
 * @param user
 */
 public static WebSocket getWebSocketByUser(String user){
 Set<WebSocket> keySet = userconnections.keySet();
 synchronized (keySet) {
 for (WebSocket conn : keySet) {
 String cuser = userconnections.get(conn);
 if(cuser.equals(user)){
 return conn;
 }
 }
 }
 return null;
 }
 /**
 * 向连接池中添加连接
 * @param inbound
 */
 public static void addUser(String user, WebSocket conn){
 userconnections.put(conn,user); //添加连接
 }
 /**
 * 获取所有的在线用户
 * @return
 */
 public static Collection<String> getOnlineUser(){
 List<String> setUsers = new ArrayList<String>();
 Collection<String> setUser = userconnections.values();
 for(String u:setUser){
 setUsers.add("<a onclick=\"toUserMsg('"+u+"');\">"+u+"</a>");
 }
 return setUsers;
 }
 /**
 * 移除连接池中的连接
 * @param inbound
 */
 public static boolean removeUser(WebSocket conn){
 if(userconnections.containsKey(conn)){
 userconnections.remove(conn); //移除连接
 return true;
 }else{
 return false;
 }
 }
 /**
 * 向特定的用户发送数据
 * @param user
 * @param message
 */
 public static void sendMessageToUser(WebSocket conn,String message){
 if(null != conn && null != userconnections.get(conn)){
 conn.send(message);
 }
 }
 /**
 * 向所有的用户发送消息
 * @param message
 */
 public static void sendMessage(String message){
 Set<WebSocket> keySet = userconnections.keySet();
 synchronized (keySet) {
 for (WebSocket conn : keySet) {
 String user = userconnections.get(conn);
 if(user != null){
 conn.send(message);
 }
 }
 }
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

写个过滤器，在项目执行时启动：

package com.appms.filter;
import java.io.IOException;
import java.net.UnknownHostException;
import java.util.Calendar;
import java.util.Date;
import java.util.Timer;
import java.util.TimerTask;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import org.java_websocket.WebSocketImpl;
import com.appms.base.BaseController;
import com.appms.base.Const;
import com.appms.utils.Tools;
import com.appms.websocket.ChatServer;
import com.appms.websocket.OnlineChatServer;
public class StartFilter extends BaseController implements Filter{
 /**
 * 初始化
 */
 public void init(FilterConfig fc) throws ServletException {
 this.startWebsocketInstantMsg();
 this.startWebsocketOnline();
 }
 /**
 * 启动即时聊天服务
 */
 public void startWebsocketInstantMsg(){
 WebSocketImpl.DEBUG = false;
 ChatServer s = null;
 try {
 String strWEBSOCKET = Tools.readTxtFile(Const.WEBSOCKET);//读取WEBSOCKET配置,获取端口配置
 if(null != strWEBSOCKET && !"".equals(strWEBSOCKET)){
 String strIW[] = strWEBSOCKET.split(",fh,");
 if(strIW.length == 4){
 s = new ChatServer(Integer.parseInt(strIW[1]));
 s.start();
 }
 }
 System.out.println( "websocket服务器启动,端口" + s.getPort() );
 } catch (UnknownHostException e) {
 e.printStackTrace();
 }
 }
 /**
 * 启动在线管理服务
 */
 public void startWebsocketOnline(){
 WebSocketImpl.DEBUG = false;
 OnlineChatServer s = null;
 try {
 String strWEBSOCKET = Tools.readTxtFile(Const.WEBSOCKET);//读取WEBSOCKET配置,获取端口配置
 if(null != strWEBSOCKET && !"".equals(strWEBSOCKET)){
 String strIW[] = strWEBSOCKET.split(",fh,");
 if(strIW.length == 4){
 s = new OnlineChatServer(Integer.parseInt(strIW[3]));
 s.start();
 }
 }
 System.out.println( "websocket服务器启动,端口" + s.getPort() );
 } catch (UnknownHostException e) {
 e.printStackTrace();
 }
 }
 //计时器
 public void timer() {
 Calendar calendar = Calendar.getInstance();
 calendar.set(Calendar.HOUR_OF_DAY, 9); // 控制时
 calendar.set(Calendar.MINUTE, 0); // 控制分
 calendar.set(Calendar.SECOND, 0); // 控制秒
 Date time = calendar.getTime(); // 得出执行任务的时间
 Timer timer = new Timer();
 timer.scheduleAtFixedRate(new TimerTask() {
 public void run() {
 //PersonService personService = (PersonService)ApplicationContext.getBean("personService");
 }
 }, time, 1000*60*60*24);// 这里设定将延时每天固定执行
 }
 public void destroy() {
 // TODO Auto-generated method stub
 }
 public void doFilter(ServletRequest arg0, ServletResponse arg1,
 FilterChain arg2) throws IOException, ServletException {
 // TODO Auto-generated method stub
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

在web.xml里配置：

 <filter>
 <filter-name>startFilter</filter-name>
 <filter-class>com.appms.filter.StartFilter</filter-class>
 </filter>
1
2
3
4

在jsp页面进行调用：

 <script type="text/javascript">var wimadress="127.0.0.1:8887";</script>
 <script type="text/javascript">var oladress="127.0.0.1:8889";</script>
 <link rel="stylesheet" type="text/css" href="plugins/websocket/ext4/resources/css/ext-all.css">
 <link rel="stylesheet" type="text/css" href="plugins/websocket/css/websocket.css" />
 <script type="text/javascript" src="plugins/websocket/ext4/ext-all-debug.js"></script>
 <script type="text/javascript" src="plugins/websocket/websocket.js"></script>
 <!--引入属于此页面的js -->
 <script type="text/javascript" src="source/js/jquery-1.8.3.js"></script>
1
2
3
4
5
6
7
8
9

点击li标签跳出聊天页面

ul class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list ">
 <li onclick="creatw();"><a href="javascript：;"><span class="am-icon-btn am-icon-file-text"></span><br/>即时通讯<br/></a></li>
 <li><a href="fusioncharts/index.do" class="am-text-warning"><span class="am-icon-btn am-icon-briefcase"></span><br/>图表统计<br/></a></li>
 <li><a href="#" class="am-text-danger"><span class="am-icon-btn am-icon-recycle"></span><br/>昨日访问<br/>80082</a></li>
 <li><a href="#" class="am-text-secondary"><span class="am-icon-btn am-icon-user-md"></span><br/>在线用户<br/>3000</a></li>
 </ul>
1
2
3
4
5
6

私聊：

群聊：

基于ExtJS前端框架的Websocket即时通讯系统