Spring Boot學習分享(七)——整合WebSocket開發多個聊天室多人線上實時通訊
阿新 • • 發佈：2019-01-06
（一）使用原生WebSocket的註解編寫服務端
由於想要實現可以統計具體線上人數，而因為想要設計成多個房間同時進行，如果使用Spring自帶的以Stomp為協議的WebSocket實現則比較繁瑣，必須配置攔截器，由於攔截器可以得到的引數比較少，必須注入其它的輔助類來進行房間的確認以及當前人數的統計併發送，所以個人覺得還是直接使用原生的WebSocket進行程式設計爽一點，不過也可能是我沒有想到更好的解決方案，SpringBoot的官方文件也沒怎麼仔細鑽研=。=
下面是具體的實現程式碼，這裡使用註解進行程式設計，是在網上一個博主的程式碼上進行更改的。
使用前的一點配置，不加上的話可能將無法成功註冊WebSocket服務
/**
* 對WebSocket進行配置
* 這裡使用Stomp協議
*
* @author MDY
*/
@Configuration
public class WebSocketConfig {
/**
* 是用程式設計式WebSocket需要的一個bean
* 聽說是註冊埠。。
*/
@Bean
public ServerEndpointExporter aaaserverEndpointExporter() {
return new ServerEndpointExporter();
}
由於使用的是SpringBoot，自動裝載bean的時候可能因為順序的原因出現各種問題，像是沒有得到註解裝飾
下面的程式碼可能會出現bean值為空的情況。
/**
* 加上RestController註解,使其可以響應檔案上傳連結
* 如果不註冊成控制層則必須加一個元件掃描，否則將無法註冊
* 所有的message都將使用json進行傳輸
* 可以根據連結的直接得到roomName
* 關於服務層的注入，只能通過Spring容器的上下文來進行賦值，否則會得到空值
* ChatMessage為自己定義的進行資訊傳輸的類，這裡全部將其轉為JSON，方便解析
*
* @author MDY
*/
@ServerEndpoint(value = "/consult/{roomName}" 下面則是前端頁面的簡單實現，從網上直接找到的
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>網路聊天室</title>
</head>
<style type="text/css">
.msg_board {
width: 644px;
height: 200px;
border: solid 1px darkcyan;
padding: 5px;
overflow-y: scroll;
// 文字長度大於div寬度時換行顯示
word-break: break-all;
}
/*set srcoll start*/
::-webkit-scrollbar
{
width: 10px;
height: 10px;
background-color: #D6F2FD;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
/*border-radius: 5px;*/
background-color: #D6F2FD;
}
::-webkit-scrollbar-thumb
{
height: 20px;
/*border-radius: 10px;*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #89D7F7;
}
/*set srcoll end*/
</style>
<body>
<label>房間名</label>
<input id="input_roomName" size="10" maxlength="10">
<input type="button" value="進入聊天室" onclick="initWebSocket()" />
<input type="button" value="退出聊天室" onclick="closeWs()" /><br>
<div class="msg_board"></div>
<input id="input_msg" size="43" maxlength="40">
<input type="button" value="傳送" onclick="send_msg()" />
</body>
<script type="text/javascript">
var webSocket;
function send_msg() {
if (webSocket != null) {
var input_msg = document.getElementById("input_msg").value.trim();
if (input_msg == "") {
return;
}
webSocket.send(input_msg);
// 清除input框裡的資訊
document.getElementById("input_msg").value = "";
} else {
alert("您已掉線，請重新進入聊天室...");
}
};
function closeWs() {
webSocket.close();
};
function initWebSocket() {
var roomName = document.getElementById("input_roomName").value;
// 房間名不能為空
if (roomName == null || roomName == "") {
alert("請輸入房間名");
return;
}
if ("WebSocket" in window) {
if (webSocket == null) {
//連結和埠號必須要正確，如何還是報404錯誤，那就是WebSocket服務沒有啟動
var url = "ws://localhost:8010/consult/" + roomName;
// 開啟一個 web socket
webSocket = new WebSocket(url);
} else {
alert("您已進入聊天室...");
}
webSocket.onopen = function () {
alert("已進入聊天室，暢聊吧...");
};
webSocket.onmessage = function (evt) {
var msg_board = document.getElementsByClassName("msg_board")[0];
var received_msg = evt.data;
var old_msg = msg_board.innerHTML;
msg_board.innerHTML = old_msg + received_msg + "<br>";
// 讓滾動塊往下移動
msg_board.scrollTop = msg_board.scrollTop + 40;
};
webSocket.onclose = function () {
// 關閉 websocket，清空資訊板
alert("連線已關閉...");
webSocket = null;
document.getElementsByClassName("msg_board")[0].innerHTML = "";
};
}
else {
// 瀏覽器不支援 WebSocket
alert("您的瀏覽器不支援 WebSocket!");
}
}
</script>
</html>最後是Java的簡單超實現，這裡就不整合SpringBoot了
所需的依賴
<dependency>
<groupId>org.java-websocket</groupId>
<artifactId>Java-WebSocket</artifactId>
<version>1.3.8</version>
</dependency>簡單實現，沒什麼比較坑的地方，直接用就可以了
WebSocketClient webSocketClient = new WebSocketClient(URI.create("ws://localhost:8010/consult/637"), new Draft_6455()) {
@Override
public void onOpen(ServerHandshake serverHandshake) {
System.out.println("連結建立成功");
}
@Override
public void onMessage(String s) {
System.out.println(s);
}
@Override
public void onClose(int i, String s, boolean b) {
System.out.println("連結斷開");
}
@Override
public void onError(Exception e) {
System.out.println(e.getMessage());
}
};
webSocketClient.connect();
}