基于Tomcat7、Java、WebSocket的伺服器推送聊天室項目

前言

        HTML5 WebSocket實作了伺服器與浏覽器的雙向通訊，雙向通訊使伺服器消息推送開發更加簡單，最常見的就是即時通訊和對資訊實時性要求比較高的應用。以前的伺服器消息推送大部分采用的都是“輪詢”和“長連接配接”技術，這兩中技術都會對伺服器産生相當大的開銷，而且實時性不是特别高。WebSocket技術對隻會産生很小的開銷，并且實時性特别高。下面就開始講解如何利用WebSocket技術開發聊天室。在這個執行個體中，采用的是Tomcat7伺服器，每個伺服器對于WebSocket的實作都是不一樣的，是以這個執行個體隻能在Tomcat伺服器中運作，不過目前Spring已經推出了WebSocket的API，能夠相容各個伺服器的實作，大家可以查閱相關的資料進行了解，在這裡就不介紹了，下圖是聊天室的效果圖：

        在這裡執行個體中，實作了消息的實時推送，還實作了聊天使用者的上下線通知。下面就開始具體講解如何實作。

連結位址背景處理

        Tomcat實作WebSocket的主要是依靠org.apache.catalina.websocket.MessageInbound這個類，這個類的在{TOMCAT_HOME}/lib/catalina.jar中，是以你開發的時候需要将catalina.jar和tomcat-coyote.jar引入進來，下面這段代碼就是暴露給用戶端連接配接位址的Servlet：

[java]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

1. package com.ibcio;  
2. import javax.servlet.annotation.WebServlet;  
3. import javax.servlet.http.HttpServletRequest;  
4. import org.apache.catalina.websocket.StreamInbound;  
5. @WebServlet(urlPatterns = { "/message"})  
6. //如果要接收浏覽器的ws://協定的請求就必須實作WebSocketServlet這個類  
7. public class WebSocketMessageServlet extends org.apache.catalina.websocket.WebSocketServlet {  
8.     private static final long serialVersionUID = 1L;  
9.     public static int ONLINE_USER_COUNT = 1;  
10.     public String getUser(HttpServletRequest request){  
11.         return (String) request.getSession().getAttribute("user");  
12.     }  
13.     //跟平常Servlet不同的是，需要實作createWebSocketInbound，在這裡初始化自定義的WebSocket連接配接對象  
14.     @Override  
15.     protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {  
16.         return new WebSocketMessageInbound(this.getUser(request));  
17.     }  
18. }  

        這個Servlet跟普通的Servlet有些不同，繼承的WebSocketServlet類，并且要重寫createWebSocketInbound方法。這個類中Session中的user屬性是使用者進入index.jsp的時候設定的，記錄目前使用者的昵稱。下面就是自己實作的WebSocket連接配接對象類WebSocketMessageInbound類的代碼： [java]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

1. package com.ibcio;  
2. import java.io.IOException;  
3. import java.nio.ByteBuffer;  
4. import java.nio.CharBuffer;  
5. import net.sf.json.JSONObject;  
6. import org.apache.catalina.websocket.MessageInbound;  
7. import org.apache.catalina.websocket.WsOutbound;  
8. public class WebSocketMessageInbound extends MessageInbound {  
9.     //目前連接配接的使用者名稱  
10.     private final String user;  
11.     public WebSocketMessageInbound(String user) {  
12.         this.user = user;  
13.     }  
14.     public String getUser() {  
15.         return this.user;  
16.     }  
17.     //建立連接配接的觸發的事件  
18.     @Override  
19.     protected void onOpen(WsOutbound outbound) {  
20.         // 觸發連接配接事件，在連接配接池中添加連接配接  
21.         JSONObject result = new JSONObject();  
22.         result.element("type", "user_join");  
23.         result.element("user", this.user);  
24.         //向所有線上使用者推送目前使用者上線的消息  
25.         WebSocketMessageInboundPool.sendMessage(result.toString());  
26.         result = new JSONObject();  
27.         result.element("type", "get_online_user");  
28.         result.element("list", WebSocketMessageInboundPool.getOnlineUser());  
29.         //向連接配接池添加目前的連接配接對象  
30.         WebSocketMessageInboundPool.addMessageInbound(this);  
31.         //向目前連接配接發送目前線上使用者的清單  
32.         WebSocketMessageInboundPool.sendMessageToUser(this.user, result.toString());  
33.     }  
34.     @Override  
35.     protected void onClose(int status) {  
36.         // 觸發關閉事件，在連接配接池中移除連接配接  
37.         WebSocketMessageInboundPool.removeMessageInbound(this);  
38.         JSONObject result = new JSONObject();  
39.         result.element("type", "user_leave");  
40.         result.element("user", this.user);  
41.         //向線上使用者發送目前使用者退出的消息  
42.         WebSocketMessageInboundPool.sendMessage(result.toString());  
43.     }  
44.     @Override  
45.     protected void onBinaryMessage(ByteBuffer message) throws IOException {  
46.         throw new UnsupportedOperationException("Binary message not supported.");  
47.     }  
48.     //用戶端發送消息到伺服器時觸發事件  
49.     @Override  
50.     protected void onTextMessage(CharBuffer message) throws IOException {  
51.         //向所有線上使用者發送消息  
52.         WebSocketMessageInboundPool.sendMessage(message.toString());  
53.     }  
54. }  

     代碼中的主要實作了onOpen、onClose、onTextMessage方法，分别處理使用者上線、下線、發送消息。在這個類中有個WebSocketMessageInboundPool連接配接池類，這個類是用來管理目前線上的使用者的連接配接，下面是這個類的代碼： [java]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

1. package com.ibcio;  
2. import java.io.IOException;  
3. import java.nio.CharBuffer;  
4. import java.util.HashMap;  
5. import java.util.Map;  
6. import java.util.Set;  
7. public class WebSocketMessageInboundPool {  
8.     //儲存連接配接的MAP容器  
9.     private static final Map<String,WebSocketMessageInbound > connections = new HashMap<String,WebSocketMessageInbound>();  
10.     //向連接配接池中添加連接配接  
11.     public static void addMessageInbound(WebSocketMessageInbound inbound){  
12.         //添加連接配接  
13.         System.out.println("user : " + inbound.getUser() + " join..");  
14.         connections.put(inbound.getUser(), inbound);  
15.     }  
16.     //擷取所有的線上使用者  
17.     public static Set<String> getOnlineUser(){  
18.         return connections.keySet();  
19.     }  
20.     public static void removeMessageInbound(WebSocketMessageInbound inbound){  
21.         //移除連接配接  
22.         System.out.println("user : " + inbound.getUser() + " exit..");  
23.         connections.remove(inbound.getUser());  
24.     }  
25.     public static void sendMessageToUser(String user,String message){  
26.         try {  
27.             //向特定的使用者發送資料  
28.             System.out.println("send message to user : " + user + " ,message content : " + message);  
29.             WebSocketMessageInbound inbound = connections.get(user);  
30.             if(inbound != null){  
31.                 inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
32.             }  
33.         } catch (IOException e) {  
34.             e.printStackTrace();  
35.         }  
36.     }  
37.     //向所有的使用者發送消息  
38.     public static void sendMessage(String message){  
39.         try {  
40.             Set<String> keySet = connections.keySet();  
41.             for (String key : keySet) {  
42.                 WebSocketMessageInbound inbound = connections.get(key);  
43.                 if(inbound != null){  
44.                     System.out.println("send message to user : " + key + " ,message content : " + message);  
45.                     inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));  
46.                 }  
47.             }  
48.         } catch (IOException e) {  
49.             e.printStackTrace();  
50.         }  
51.     }  
52. }  

連結位址前台展示

    上面的代碼就是聊天室背景的代碼，主要是由3個對象組成，Servlet、連接配接對象、連接配接池，下面就是前台的代碼，前台的代碼主要是實作與伺服器進行連接配接，展示使用者清單及資訊清單，前台的展示使用了Ext架構，不熟悉Ext的同學可以初步的了解下Ext，下面的是index.jsp的代碼： [html]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

1. <%@ page language="java" pageEncoding="UTF-8" import="com.ibcio.WebSocketMessageServlet"%>  
2. <%  
3.     String user = (String)session.getAttribute("user");  
4.     if(user == null){  
5.         //為使用者生成昵稱  
6.         user = "遊客" + WebSocketMessageServlet.ONLINE_USER_COUNT;  
7.         WebSocketMessageServlet.ONLINE_USER_COUNT ++;  
8.         session.setAttribute("user", user);  
9.     }  
10.     pageContext.setAttribute("user", user);  
11. %>  
12. <html>  
13. <head>  
14.     <title>WebSocket 聊天室</title>  
15.     <!-- 引入CSS檔案 -->  
16.     <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">  
17.     <link rel="stylesheet" type="text/css" href="ext4/shared/example.css" />  
18.     <link rel="stylesheet" type="text/css" href="css/websocket.css" />  
19.     <!-- 映入Ext的JS開發包，及自己實作的webscoket. -->  
20.     <script type="text/javascript" src="ext4/ext-all-debug.js"></script>  
21.     <script type="text/javascript" src="websocket.js"></script>  
22.     <script type="text/javascript">  
23.         var user = "${user}";  
24.     </script>  
25. </head>  
26. <body>  
27.     <h1>WebSocket聊天室</h1>  
28.     <p>通過HTML5标準提供的API與Ext富用戶端架構相結合起來，實作聊天室，有以下特點：</p>  
29.     <ul class="feature-list" style="padding-left: 10px;">  
30.         <li>實時擷取資料，由伺服器推送，實作即時通訊</li>  
31.         <li>利用WebSocket完成資料通訊，差別于輪詢，長連接配接等技術，節省伺服器資源</li>  
32.         <li>結合Ext進行頁面展示</li>  
33.         <li>使用者上線下線通知</li>  
34.     </ul>  
35.     <div id="websocket_button"></div>  
36. </body>  
37. </html>  

       頁面的展示主要是在websocket.js中進行控制，下面是websocket.jsd的代碼：

[javascript]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

1. //用于展示使用者的聊天資訊  
2. Ext.define('MessageContainer', {  
3.     extend : 'Ext.view.View',  
4.     trackOver : true,  
5.     multiSelect : false,  
6.     itemCls : 'l-im-message',  
7.     itemSelector : 'div.l-im-message',  
8.     overItemCls : 'l-im-message-over',  
9.     selectedItemCls : 'l-im-message-selected',  
10.     style : {  
11.         overflow : 'auto',  
12.         backgroundColor : '#fff'  
13.     },  
14.     tpl : [  
15.             '<div class="l-im-message-warn">​交談中請勿輕信彙款、中獎資訊、陌生電話。 請遵守相關法律法規。</div>',  
16.             '<tpl for=".">',  
17.             '<div class="l-im-message">',  
18.             '<div class="l-im-message-header l-im-message-header-{source}">{from}  {timestamp}</div>',  
19.             '<div class="l-im-message-body">{content}</div>', '</div>',  
20.             '</tpl>'],  
21.     messages : [],  
22.     initComponent : function() {  
23.         var me = this;  
24.         me.messageModel = Ext.define('Leetop.im.MessageModel', {  
25.                     extend : 'Ext.data.Model',  
26.                     fields : ['from', 'timestamp', 'content', 'source']  
27.                 });  
28.         me.store = Ext.create('Ext.data.Store', {  
29.                     model : 'Leetop.im.MessageModel',  
30.                     data : me.messages  
31.                 });  
32.         me.callParent();  
33.     },  
34.     //将伺服器推送的資訊展示到頁面中  
35.     receive : function(message) {  
36.         var me = this;  
37.         message['timestamp'] = Ext.Date.format(new Date(message['timestamp']),  
38.                 'H:i:s');  
39.         if(message.from == user){  
40.             message.source = 'self';  
41.         }else{  
42.             message.source = 'remote';  
43.         }  
44.         me.store.add(message);  
45.         if (me.el.dom) {  
46.             me.el.dom.scrollTop = me.el.dom.scrollHeight;  
47.         }  
48.     }  
49. });  

      這段代碼主要是實作了展示消息的容器，下面就是頁面加載完成後開始執行的代碼：

[javascript]   http://www.aiuxian.com/article/p-146333.html  http://www.aiuxian.com/article/p-146333.html

1. Ext.onReady(function() {  
2.             //建立使用者輸入框  
3.             var input = Ext.create('Ext.form.field.HtmlEditor', {  
4.                         region : 'south',  
5.                         height : 120,  
6.                         enableFont : false,  
7.                         enableSourceEdit : false,  
8.                         enableAlignments : false,  
9.                         listeners : {  
10.                             initialize : function() {  
11.                                 Ext.EventManager.on(me.input.getDoc(), {  
12.                                             keyup : function(e) {  
13.                                                 if (e.ctrlKey === true  
14.                                                         && e.keyCode == 13) {  
15.                                                     e.preventDefault();  
16.                                                     e.stopPropagation();  
17.                                                     send();  
18.                                                 }  
19.                                             }  
20.                                         });  
21.                             }  
22.                         }  
23.                     });  
24.             //建立消息展示容器  
25.             var output = Ext.create('MessageContainer', {  
26.                         region : 'center'  
27.                     });  
28.             var dialog = Ext.create('Ext.panel.Panel', {  
29.                         region : 'center',  
30.                         layout : 'border',  
31.                         items : [input, output],  
32.                         buttons : [{  
33.                                     text : '發送',  
34.                                     handler : send  
35.                                 }]  
36.                     });  
37.             var websocket;  
38.             //初始話WebSocket  
39.             function initWebSocket() {  
40.                 if (window.WebSocket) {  
41.                     websocket = new WebSocket(encodeURI('ws://localhost:8080/WebSocket/message'));  
42.                     websocket.onopen = function() {  
43.                         //連接配接成功  
44.                         win.setTitle(title + '  (已連接配接)');  
45.                     }  
46.                     websocket.onerror = function() {  
47.                         //連接配接失敗  
48.                         win.setTitle(title + '  (連接配接發生錯誤)');  
49.                     }  
50.                     websocket.onclose = function() {  
51.                         //連接配接斷開  
52.                         win.setTitle(title + '  (已經斷開連接配接)');  
53.                     }  
54.                     //消息接收  
55.                     websocket.onmessage = function(message) {  
56.                         var message = JSON.parse(message.data);  
57.                         //接收使用者發送的消息  
58.                         if (message.type == 'message') {  
59.                             output.receive(message);  
60.                         } else if (message.type == 'get_online_user') {  
61.                             //擷取線上使用者清單  
62.                             var root = onlineUser.getRootNode();  
63.                             Ext.each(message.list,function(user){  
64.                                 var node = root.createNode({  
65.                                     id : user,  
66.                                     text : user,  
67.                                     iconCls : 'user',  
68.                                     leaf : true  
69.                                 });  
70.                                 root.appendChild(node);  
71.                             });  
72.                         } else if (message.type == 'user_join') {  
73.                             //使用者上線  
74.                                 var root = onlineUser.getRootNode();  
75.                                 var user = message.user;  
76.                                 var node = root.createNode({  
77.                                     id : user,  
78.                                     text : user,  
79.                                     iconCls : 'user',  
80.                                     leaf : true  
81.                                 });  
82.                                 root.appendChild(node);  
83.                         } else if (message.type == 'user_leave') {  
84.                                 //使用者下線  
85.                                 var root = onlineUser.getRootNode();  
86.                                 var user = message.user;  
87.                                 var node = root.findChild('id',user);  
88.                                 root.removeChild(node);  
89.                         }  
90.                     }  
91.                 }  
92.             };  
93.             //線上使用者樹  
94.             var onlineUser = Ext.create('Ext.tree.Panel', {  
95.                         title : '線上使用者',  
96.                         rootVisible : false,  
97.                         region : 'east',  
98.                         width : 150,  
99.                         lines : false,  
100.                         useArrows : true,  
101.                         autoScroll : true,  
102.                         split : true,  
103.                         iconCls : 'user-online',  
104.                         store : Ext.create('Ext.data.TreeStore', {  
105.                                     root : {  
106.                                         text : '線上使用者',  
107.                                         expanded : true,  
108.                                         children : []  
109.                                     }  
110.                                 })  
111.                     });  
112.             var title = '歡迎您：' + user;  
113.             //展示視窗  
114.             var win = Ext.create('Ext.window.Window', {  
115.                         title : title + '  (未連接配接)',  
116.                         layout : 'border',  
117.                         iconCls : 'user-win',  
118.                         minWidth : 650,  
119.                         minHeight : 460,  
120.                         width : 650,  
121.                         animateTarget : 'websocket_button',  
122.                         height : 460,  
123.                         items : [dialog,onlineUser],  
124.                         border : false,  
125.                         listeners : {  
126.                             render : function() {  
127.                                 initWebSocket();  
128.                             }  
129.                         }  
130.                     });  
131.             win.show();  
132.             //發送消息  
133.             function send() {  
134.                 var message = {};  
135.                 if (websocket != null) {  
136.                     if (input.getValue()) {  
137.                         Ext.apply(message, {  
138.                                     from : user,  
139.                                     content : input.getValue(),  
140.                                     timestamp : new Date().getTime(),  
141.                                     type : 'message'  
142.                                 });  
143.                         websocket.send(JSON.stringify(message));  
144.                         //output.receive(message);  
145.                         input.setValue('');  
146.                     }  
147.                 } else {  
148.                     Ext.Msg.alert('提示', '您已經掉線，無法發送消息!');  
149.                 }  
150.             }  
151.         });  

      上面的代碼就是頁面完成加載後自動連接配接伺服器，并建立展示界面的代碼。