基於Tomcat7、Java、WebSocket的服務器推送聊天室實例。本站提示廣大學習愛好者：（基於Tomcat7、Java、WebSocket的服務器推送聊天室實例）文章只能為提供參考，不一定能成為您想要的結果。以下是基於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：
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 class="feature-list" >
<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 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;
}
}
});
這段代碼次要是完成了展現音訊的容器，上面就是頁面加載完成後開端執行的代碼：
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
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支持。
