基于Tomcat7、Java、WebSocket的服務器推送聊天室實例
更新時間：2016年12月21日 15:16:13 作者：我的執(zhí)著
HTML5 WebSocket實現(xiàn)了服務器與瀏覽器的雙向通訊,本篇文章主要介紹了基于Tomcat7、Java、WebSocket的服務器推送聊天室實例，具有一定的參考價值，有興趣的可以了解一下。
前言
HTML5 WebSocket實現(xiàn)了服務器與瀏覽器的雙向通訊，雙向通訊使服務器消息推送開發(fā)更加簡單，最常見的就是即時通訊和對信息實時性要求比較高的應用。以前的服務器消息推送大部分采用的都是“輪詢”和“長連接”技術，這兩中技術都會對服務器產生相當大的開銷，而且實時性不是特別高。WebSocket技術對只會產生很小的開銷，并且實時性特別高。下面就開始講解如何利用WebSocket技術開發(fā)聊天室。在這個實例中，采用的是Tomcat7服務器，每個服務器對于WebSocket的實現(xiàn)都是不一樣的，所以這個實例只能在Tomcat服務器中運行，不過目前Spring已經推出了WebSocket的API，能夠兼容各個服務器的實現(xiàn)，大家可以查閱相關的資料進行了解，在這里就不介紹了，下圖是聊天室的效果圖：
在這里實例中，實現(xiàn)了消息的實時推送，還實現(xiàn)了聊天用戶的上下線通知。下面就開始具體講解如何實現(xiàn)。
后臺處理
Tomcat實現(xiàn)WebSocket的主要是依靠org.apache.catalina.websocket.MessageInbound這個類，這個類的在{TOMCAT_HOME}/lib/catalina.jar中，所以你開發(fā)的時候需要將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://協(xié)議的請求就必須實現(xiàn)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不同的是，需要實現(xiàn)createWebSocketInbound，在這里初始化自定義的WebSocket連接對象
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {
return new WebSocketMessageInbound(this.getUser(request));
}
}
這個Servlet跟普通的Servlet有些不同，繼承的WebSocketServlet類，并且要重寫createWebSocketInbound方法。這個類中Session中的user屬性是用戶進入index.jsp的時候設置的，記錄當前用戶的昵稱。下面就是自己實現(xiàn)的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;
}
//建立連接的觸發(fā)的事件
@Override
protected void onOpen(WsOutbound outbound) {
// 觸發(fā)連接事件，在連接池中添加連接
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);
//向當前連接發(fā)送當前在線用戶的列表
WebSocketMessageInboundPool.sendMessageToUser(this.user, result.toString());
}
@Override
protected void onClose(int status) {
// 觸發(fā)關閉事件，在連接池中移除連接
WebSocketMessageInboundPool.removeMessageInbound(this);
JSONObject result = new JSONObject();
result.element("type", "user_leave");
result.element("user", this.user);
//向在線用戶發(fā)送當前用戶退出的消息
WebSocketMessageInboundPool.sendMessage(result.toString());
}
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
throw new UnsupportedOperationException("Binary message not supported.");
}
//客戶端發(fā)送消息到服務器時觸發(fā)事件
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
//向所有在線用戶發(fā)送消息
WebSocketMessageInboundPool.sendMessage(message.toString());
}
}
代碼中的主要實現(xiàn)了onOpen、onClose、onTextMessage方法，分別處理用戶上線、下線、發(fā)送消息。在這個類中有個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 {
//向特定的用戶發(fā)送數(shù)據(jù)
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();
}
}
//向所有的用戶發(fā)送消息
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、連接對象、連接池，下面就是前臺的代碼，前臺的代碼主要是實現(xiàn)與服務器進行連接，展示用戶列表及信息列表，前臺的展示使用了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開發(fā)包，及自己實現(xiàn)的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富客戶端框架相結合起來，實現(xiàn)聊天室，有以下特點：</p>
<ul class="feature-list" style="padding-left: 10px;">
<li>實時獲取數(shù)據(jù)，由服務器推送，實現(xiàn)即時通訊</li>
<li>利用WebSocket完成數(shù)據(jù)通訊，區(qū)別于輪詢，長連接等技術，節(jié)省服務器資源</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 class="l-im-message-warn">交談中請勿輕信匯款、中獎信息、陌生電話。 請遵守相關法律法規(guī)。</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;
}
}
});
這段代碼主要是實現(xiàn)了展示消息的容器，下面就是頁面加載完成后開始執(zhí)行的代碼：
Ext.onReady(function() {
//創(chuàng)建用戶輸入框
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();
}
}
});
}
}
});
//創(chuàng)建消息展示容器
var output = Ext.create('MessageContainer', {
region : 'center'
});
var dialog = Ext.create('Ext.panel.Panel', {
region : 'center',
layout : 'border',
items : [input, output],
buttons : [{
text : '發(fā)送',
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 + ' (連接發(fā)生錯誤)');
}
websocket.onclose = function() {
//連接斷開
win.setTitle(title + ' (已經斷開連接)');
}
//消息接收
websocket.onmessage = function(message) {
var message = JSON.parse(message.data);
//接收用戶發(fā)送的消息
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();
//發(fā)送消息
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('提示', '您已經掉線，無法發(fā)送消息!');
}
}
});
上面的代碼就是頁面完成加載后自動連接服務器，并創(chuàng)建展示界面的代碼。
注意
需要注意的兩點，在部署完成之后需要將在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參數(shù)的，現(xiàn)在的這個代碼是有這個參數(shù)了，7.0.3XX版本都是帶這個參數(shù)的，切記。
總結
使用WebSocket開發(fā)服務器推送非常方便，這個是個簡單的應用，其實還可以結合WebRTC實現(xiàn)視頻聊天和語音聊天。
實例下載
下載地址：demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了微服務間的接口調用feign，F(xiàn)eign是一種聲明式、模板化的HTTP客戶端。在spring cloud中使用Feign，可以做到類似于普通的接口的請求調用，感興趣的小伙伴可以參考閱讀2023-03-03
這篇文章主要介紹了使用@Transactional 設置嵌套事務不回滾問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
在編寫與 XML 數(shù)據(jù)交互的現(xiàn)代軟件應用時,有效地讀取和解析 XML 文件是至關重要的,本文旨在探討 Java 中處理 XML 文件的五種主要方法：DOM、SAX、StAX、JAXB 和 JDOM,我們將詳細介紹每種方法的工作原理、典型用途以及如何在 Java 程序中實現(xiàn)它們2024-05-05
關于Socket的解析以及雙方即時通訊的java實現(xiàn)方法
本篇文章主要介紹了關于Socket的解析以及雙方通訊的java實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
java線程之用Thread類創(chuàng)建線程的方法
本篇文章介紹了，Thread類創(chuàng)建線程的方法。需要的朋友參考下2013-05-05
這篇文章討論了Java面向對象概念中一個基本的概念–Field Hiding（隱藏成員變量），文中給大家介紹了java中的重寫知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了Java基于Base64實現(xiàn)編碼解碼圖片文件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了解決hibernate一對多注解懶加載失效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-10-10
Springboot實現(xiàn)Excel批量導入數(shù)據(jù)并保存到本地
這篇文章主要為大家詳細介紹了Springboot實現(xiàn)Excel批量導入數(shù)據(jù)并將文件保存到本地效果的方法，文中的示例代講解詳細，需要的可以參考一下2022-09-09
SpringBoot采用AJAX實現(xiàn)異步發(fā)布帖子詳解
Ajax是一種web應用技術，可以借助客戶端腳本（javascript）與服務端應用進行異步通訊，獲取服務端數(shù)據(jù)以后，可以進行局部刷新，進而提高數(shù)據(jù)的響應和渲染速度。所有的Ajax請求都會基于DOM（HTML元素）事件，通過XHR（XMLHttpRequest）對象實現(xiàn)與服務端異步通訊局部更新2022-08-08