基於Tomcate、java、websocket 簡單線上聊天
阿新 • • 發佈：2018-12-29
基於Tomcate、java、websocket 簡單線上聊天
前言
一直以來對於這個線上聊天有很大興趣，但是一直沒有學習入口，可能也是因為工作原因，沒精力去深究這玩意，前段時間為了瞭解這個socket，還專門看了幾章TCP/IP協議,想說稍微瞭解瞭解，後來沒堅持兩天，為什麼呢！ 看不懂... 後來直接上手吧，各種socket，執行緒。終於像個樣了，不過是以圖形化介面的形式展示出來，不像我想象中那樣，之後又看看了看這個websocket,說實話挺厲害，簡單的兩個介面就可以實現。至於原理嘛，我就不在這瞎吹了，大家可以在網上看看。
web.xml配置
跟所有servlet 在web.xml進行配置
<servlet>
<servlet-name>socketHome</servlet-name>
<servlet-class>SocketServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>socketHome</servlet-name>
<url-pattern>/ws</url-pattern>
</servlet-mapping 後臺程式碼
SocketServer.java，ws://協議的請求就必須實現WebSocketServlet這個類
import java.util.concurrent.atomic.AtomicInteger;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
/**
*
* @author wangbg 通訊入口
*/ MessageInbound.java,WebSocket連線物件類
程式碼中的主要實現了onOpen、onTextMessage方法，分別處理使用者上線、傳送訊息,還有onClose方法 不過我沒有實現。
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import net.sf.json.JSONObject;
import org.apache.catalina.websocket.WsOutbound;
/**
*
* @author wangbg 通訊互動
*/
@SuppressWarnings("deprecation")
public class MessageInbound extends
org.apache.catalina.websocket.MessageInbound {
private final String user;
public MessageInbound(String user) {
// TODO Auto-generated constructor stub
this.user = user;
}
public String getUser() {
return this.user;
}
/**
* 使用者連線觸發事件 1 向連線池添加當前使用者 2 向線上使用者傳送當前使用者上線訊息 3 向當前使用者傳送線上使用者列表
*/
@Override
protected void onOpen(WsOutbound outbound) {
// TODO Auto-generated method stub
super.onOpen(outbound);
// 向連線池添加當前使用者
InboundPool.addInbound(this);
JSONObject result = new JSONObject();
// 向線上使用者傳送當前使用者上線訊息
InboundPool.sendMessage(this.user + "上線");
// 向當前使用者傳送線上使用者列表
result = new JSONObject();
result.element("onlineUser", InboundPool.getOnlineUser());
InboundPool.sendMessageToUser(this.user, result.toString());
}
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
// TODO Auto-generated method stub
}
/**
* 客戶端傳送訊息時觸發
*/
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// TODO Auto-generated method stub
InboundPool.sendMessage(this.user + ":" + message.toString());
}
}InboundPool.java,連線物件池，管理線上使用者的連線
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import net.sf.json.JSONObject;
import org.apache.catalina.websocket.WsOutbound;
/**
*
* @author wangbg 通訊互動
*/
@SuppressWarnings("deprecation")
public class MessageInbound extends
org.apache.catalina.websocket.MessageInbound {
private final String user;
public MessageInbound(String user) {
// TODO Auto-generated constructor stub
this.user = user;
}
public String getUser() {
return this.user;
}
/**
* 使用者連線觸發事件 1 向連線池添加當前使用者 2 向線上使用者傳送當前使用者上線訊息 3 向當前使用者傳送線上使用者列表
*/
@Override
protected void onOpen(WsOutbound outbound) {
// TODO Auto-generated method stub
super.onOpen(outbound);
// 向連線池添加當前使用者
InboundPool.addInbound(this);
JSONObject result = new JSONObject();
// 向線上使用者傳送當前使用者上線訊息
InboundPool.sendMessage(this.user + "上線");
// 向當前使用者傳送線上使用者列表
result = new JSONObject();
result.element("onlineUser", InboundPool.getOnlineUser());
InboundPool.sendMessageToUser(this.user, result.toString());
}
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
// TODO Auto-generated method stub
}
/**
* 客戶端傳送訊息時觸發
*/
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// TODO Auto-generated method stub
InboundPool.sendMessage(this.user + ":" + message.toString());
}
}index.jsp 頁面訪問及互動
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<body>
<input type="text" id="message" size="60" />
<input type="button" id="send" value="傳送" />
<br>
<div id="panel"></div>
</body>
<script type="text/javascript">
var panel = document.getElementById('panel');
var message = document.getElementById('message');
var send = document.getElementById('send')
// 控制檯輸出物件
var console = {
log : function(text) {
panel.innerHTML += text + "<br>";
}
};
// WebSocket
var socketBox = {
socket : null, // WebSocket連線物件
host : '', // WebSocket連線 url
connect : function() { // 連線伺服器
window.WebSocket = window.WebSocket || window.MozWebSocket;
if (!window.WebSocket) { // 檢測瀏覽器支援
console.log('Error: 請升級到ie10+瀏覽器 .');
return;
}
// 建立連線並註冊響應函式
this.socket = new WebSocket(this.host);
this.socket.onopen = function() {
console.log("連線伺服器.");
};
this.socket.onmessage = function(res) {
if (res.type == "message") {
console.log(res.data);
}
};
this.socket.onclose = function() {
console.log("伺服器斷開 .");
socketBox.socket.onclose();
socketBox.socket = null; // 清理
};
},
send : function(message) { // 傳送訊息方法
if (this.socket) {
this.socket.send(message);
return true;
}
console.log('請先連線伺服器 !!!');
return false;
}
};
// 初始化WebSocket連線 url
socketBox.host = (window.location.protocol == 'http:') ? 'ws://' : 'wss://';
socketBox.host += window.location.host + '/websocket/ws';
// 初始化按鈕點選事件函式
send.onclick = function() {
var ms = message.value;
if (!ms)
return;
if (!socketBox.send(ms))
return;
message.value = '';
};
if (!socketBox.socket)
socketBox.connect();
</script>
</body>
</html>