前言
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：
package com.ibcio; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import org.apache.catalina.websocket.StreamInbound; @WebServlet(urlPatterns = { "/message"}) //如果要接收瀏覽器的ws://協議的請求就必須實現WebSocketServlet這個類public class WebSocketMessageServlet extends org.apache.catalina.websocket.WebSocketServlet { private static final long serialVersionUID = 1L; public static int ONLINE_USER_COUNT = 1; public String getUser(HttpServletRequest request){ return (String) request.getSession().getAttribute("user"); } //跟平常Servlet不同的是，需要實現createWebSocketInbound，在這裡初始化自定義的WebSocket連接對象@Override protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) { return new WebSocketMessageInbound(this.getUser(request)); } }這個Servlet跟普通的Servlet有些不同，繼承的WebSocketServlet類，並且要重寫createWebSocketInbound方法。這個類中Session中的user屬性是用戶進入index.jsp的時候設置的，記錄當前用戶的暱稱。下面就是自己實現的WebSocket連接對像類WebSocketMessageInbound類的代碼：
package com.ibcio; import java.io.IOException; import java.nio.ByteBuffer; import java.nio.CharBuffer; import net.sf.json.JSONObject; import org.apache.catalina.websocket.MessageInbound; import org.apache.catalina.websocket.WsOutbound; public class WebSocketMessageInbound extends MessageInbound { //當前連接的用戶名稱private final String user; public WebSocketMessageInbound(String user) { this.user = user; } public String getUser() { return this.user; } //建立連接的觸發的事件@Override protected void onOpen(WsOutbound outbound) { // 觸發連接事件，在連接池中添加連接JSONObject result = new JSONObject(); result.element("type", "user_join"); result.element("user", this.user); //向所有在線用戶推送當前用戶上線的消息WebSocketMessageInboundPool.sendMessage(result.toString()); result = new JSONObject(); result.element("type", "get_online_user"); result.element("list", WebSocketMessageInboundPool.getOnlineUser()); //向連接池添加當前的連接對象WebSocketMessageInboundPool.addMessageInbound(this); //向當前連接發送當前在線用戶的列表WebSocketMessageInboundPool.sendMessageToUser(this.user, result.toString()); } @Override protected void onClose(int status) { // 觸發關閉事件，在連接池中移除連接WebSocketMessageInboundPool.removeMessageInbound(this); JSONObject result = new JSONObject(); result.element("type", "user_leave"); result.element("user", this.user); //向在線用戶發送當前用戶退出的消息WebSocketMessageInboundPool.sendMessage(result.toString()); } @Override protected void onBinaryMessage(ByteBuffer message) throws IOException { throw new UnsupportedOperationException("Binary message not supported."); } //客戶端發送消息到服務器時觸發事件@Override protected void onTextMessage(CharBuffer message) throws IOException { //向所有在線用戶發送消息WebSocketMessageInboundPool.sendMessage(message.toString()); } }代碼中的主要實現了onOpen、onClose、onTextMessage方法，分別處理用戶上線、下線、發送消息。在這個類中有個WebSocketMessageInboundPool連接池類，這個類是用來管理目前在線的用戶的連接，下面是這個類的代碼：
package com.ibcio; import java.io.IOException; import java.nio.CharBuffer; import java.util.HashMap; import java.util.Map; import java.util.Set; public class WebSocketMessageInboundPool { //保存連接的MAP容器private static final Map<String,WebSocketMessageInbound > connections = new HashMap<String,WebSocketMessageInbound>(); //向連接池中添加連接public static void addMessageInbound(WebSocketMessageInbound inbound){ //添加連接System.out.println("user : " + inbound.getUser() + " join.."); connections.put(inbound.getUser(), inbound); } //獲取所有的在線用戶public static Set<String> getOnlineUser(){ return connections.keySet(); } public static void removeMessageInbound(WebSocketMessageInbound inbound){ //移除連接System.out.println("user : " + inbound.getUser() + " exit.."); connections.remove(inbound.getUser()); } public static void sendMessageToUser(String user,String message){ try { //向特定的用戶發送數據System.out.println("send message to user : " + user + " ,message content : " + message); WebSocketMessageInbound inbound = connections.get(user); if(inbound != null){ inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message)); } } catch (IOException e) { e.printStackTrace(); } } //向所有的用戶發送消息public static void sendMessage(String message){ try { Set<String> keySet = connections.keySet(); for (String key : keySet) { WebSocketMessageInbound inbound = connections.get(key); if(inbound != null){ System.out.println("send message to user : " + key + " ,message content : " + message); inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message)); } } } catch (IOException e) { e.printStackTrace(); } } }前台展示
上面的代碼就是聊天室後台的代碼，主要是由3個對象組成，Servlet、連接對象、連接池，下面就是前台的代碼，前台的代碼主要是實現與服務器進行連接，展示用戶列表及信息列表，前台的展示使用了Ext框架，不熟悉Ext的同學可以初步的了解下Ext，下面的是index.jsp的代碼：
<%@ page language="java" pageEncoding="UTF-8" import="com.ibcio.WebSocketMessageServlet"%> <% String user = (String)session.getAttribute("user"); if(user == null){ //為用戶生成暱稱user = "遊客" + WebSocketMessageServlet.ONLINE_USER_COUNT; WebSocketMessageServlet.ONLINE_USER_COUNT ++; session.setAttribute("user", user); } pageContext.setAttribute("user", user); %> <html> <head> <title>WebSocket 聊天室</title> <!-- 引入CSS文件--> <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css"> <link rel="stylesheet" type="text/css" href="ext4/shared/example.css" /> <link rel="stylesheet" type="text/css" href="css/websocket.css" /> <!-- 映入Ext的JS開發包，及自己實現的webscoket. --> <script type="text/javascript" src="ext4/ext-all-debug.js"></script> <script type="text/javascript" src="websocket.js"></script> <script type="text/javascript"> var user = "${user}"; </script> </head> <body> <h1>WebSocket聊天室</h1> <p>通過HTML5標準提供的API與Ext富客戶端框架相結合起來，實現聊天室，有以下特點：</p> <ul style="padding-left: 10px;"> <li>實時獲取數據，由服務器推送，實現即時通訊</li> <li>利用WebSocket完成數據通訊，區別於輪詢，長連接等技術，節省服務器資源</li> <li>結合Ext進行頁面展示</li> <li>用戶上線下線通知</li> </ul> <div id="websocket_button"></div> </body> </html>頁面的展示主要是在websocket.js中進行控制，下面是websocket.jsd的代碼：
//用於展示用戶的聊天信息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>交談中請勿輕信匯款、中獎信息、陌生電話。 請遵守相關法律法規。</div>', '<tpl for=".">', '<div>', '<div>{from} {timestamp}</div>', '<div>{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; } } });這段代碼主要是實現了展示消息的容器，下面就是頁面加載完成後開始執行的代碼：
Ext.onReady(function() { //創建用戶輸入框var 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 }] }); var websocket; //初始話WebSocket function initWebSocket() { if (window.WebSocket) { websocket = new WebSocket(encodeURI('ws://localhost:8080/WebSocket/message')); websocket.onopen = function() { //連接成功win.setTitle(title + ' (已連接)'); } 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 : [] } }) }); var title = '歡迎您：' + user; //展示窗口var 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(); //發送消息function send() { var message = {}; if (websocket != null) { if (input.getValue()) { Ext.apply(message, { from : user, content : input.getValue(), timestamp : new Date().getTime(), type : 'message' }); websocket.send(JSON.stringify(message)); //output.receive(message); input.setValue(''); } } else { Ext.Msg.alert('提示', '您已經掉線，無法發送消息!'); } } });上面的代碼就是頁面完成加載後自動連接服務器，並創建展示界面的代碼。
注意
需要注意的兩點，在部署完成之後需要將在tomcat應用目錄中的lib目錄下的catalina.jar和tomcat-coyote.jar刪掉，比如項目的lib目錄在D:/workspace/WebSocket/WebRoot/WEB-INF/lib，而部署的應用lib目錄是在D:/tools/apache-tomcat-7.0.32/webapps/WebSocket/WEB-INF/lib，刪掉部署目錄的lib目錄中連兩個jar就可以了，否則會包Could not initialize class com.ibcio.WebSocketMessageServlet錯誤，切記。
如果還是無法建立連接，請下載最新的tomcat，忘了是那個版本的tomcatcreateWebSocketInbound是沒有request參數的，現在的這個代碼是有這個參數了，7.0.3XX版本都是帶這個參數的，切記。
總結
使用WebSocket開發服務器推送非常方便，這個是個簡單的應用，其實還可以結合WebRTC實現視頻聊天和語音聊天。
實例下載
下載地址：demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。