基於SpringBoot+WebSocket搭建一個簡單的多人聊天系統
前言
今天閒來無事，就來瞭解一下WebSocket協議。來簡單瞭解一下吧。
WebSocket是什麼
首先了解一下WebSocket是什麼？WebSocket是一種在單個TCP連線上進行全雙工通訊的協議。這是一種比較官方的說法，簡單點來說就是，在一次TCP連線中，通訊的雙方可以相互通訊。比如A和B在打電話，A說話的時候，B也可以說話來進行資訊的互動，這就叫做全雙工通訊。對應的是單工通訊，和半雙工通訊，單工通訊就是隻能由A向B通訊，比如電腦和印表機。半雙工通訊是可以AB可以互相通訊，但是同一時間只能進行單向通訊，比如對講機。
WebSocket與http有啥區別
相同點
都建立在TCP之上，通過TCP協議來傳輸資料。
不同點
HTTP協議為單向協議，即瀏覽器只能向伺服器請求資源，伺服器才能將資料傳送給瀏覽器，而伺服器不能主動向瀏覽器傳遞資料。分為長連線和短連線，短連線是每次http請求時都需要三次握手才能傳送自己的請求，每個request對應一個response；長連線是短時間內保持連線，保持TCP不斷開，指的是TCP連線。
WebSocket一種雙向通訊協議，在建立連線後，WebSocket伺服器和客戶端都能主動的向對方傳送或接收資料，就像Socket一樣，不同的是WebSocket是一種建立在Web基礎上的一種簡單模擬Socket的協議；WebSocket需要通過握手連線，類似於TCP它也需要客戶端和伺服器端進行握手連線，連線成功後才能相互通訊。WebSocket在建立握手連線時，資料是通過http協議傳輸的，“GET/chat HTTP/1.1”，這裡面用到的只是http協議一些簡單的欄位。但是在建立連線之後，真正的資料傳輸階段是不需要http協議參與的。
用處
WebSocket解決客戶端發起多個http請求到伺服器資源瀏覽器必須要經過長時間的輪詢問題。
使用WebSocket搭建一個多人聊天系統
- 引入WebSocket的jar包
Gradle：
compile group: 'org.springframework.boot',name: 'spring-boot-starter-websocket',version: '2.1.8.RELEASE'複製程式碼Maven：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.1.8.RELEASE</version>
</dependency>複製程式碼 - 新增對WebSocket的支援
注入ServerEndpointExporter，這個bean會自動註冊使用了@ServerEndpoint註解宣告的Websocket endpoint。
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @author: zp
* @Date: 2019-09-18 10:03
* @Description:
*/
@Configuration
public class AppConfiguration {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
複製程式碼- 建立WebSocket的實現類
@ServerEndpoint("/webSocket/{page}")中的值就是需要訪問的地址，和Controller中的@RequestMapping有點類似。然後實現@OnOpen（開啟連線）,@OnClose（關閉連線）,@onMessage（收到訊息）,@Error（觸發異常）。
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;
/**
* @author: zp
* @Date: 2019-09-20 15:12
* @Description:
*/
@Component
@ServerEndpoint("/webSocket/{page}")
public class WebSocket {
private Logger log = LoggerFactory.getLogger(this.getClass());
/**
* 用來記錄房間的人數
*/
private static AtomicInteger onlinePersons = new AtomicInteger(0);
/**
* 用來記錄房間及人數
*/
private static Map<String,Set> roomMap = new ConcurrentHashMap(8);
@OnOpen
public void open(@PathParam("page") String page,Session session) throws IOException {
Set set = roomMap.get(page);
// 如果是新的房間，則建立一個對映，如果房間已存在，則把使用者放進去
if(set == null){
set = new CopyOnWriteArraySet();
set.add(session);
roomMap.put(page,set);
}else{
set.add(session);
}
// 房間人數+1
onlinePersons.incrementAndGet();
log.info("新使用者{}進入聊天,房間人數:{}",session.getId(),onlinePersons);
}
@OnClose
public void close(@PathParam("page") String page,Session session){
// 如果某個使用者離開了，就移除相應的資訊
if(roomMap.containsKey(page)){
roomMap.get(page).remove(session);
}
// 房間人數-1
onlinePersons.decrementAndGet();
log.info("使用者{}退出聊天,onlinePersons);
}
@OnMessage
public void reveiveMessage(@PathParam("page") String page,Session session,String message) throws IOException {
log.info("接受到使用者{}的資料:{}",message);
// 拼接一下使用者資訊
String msg = session.getId()+" : "+ message;
Set<Session> sessions = roomMap.get(page);
// 給房間內所有使用者推送資訊
for(Session s : sessions){
s.getBasicRemote().sendText(msg);
}
}
@OnError
public void error(Throwable throwable){
try {
throw throwable;
} catch (Throwable e) {
log.error("未知錯誤");
}
}
}複製程式碼寫個超級簡單的頁面測試一下
前端有點菜，寫不出好看的ui，見諒～
<html>
<head>
<meta charset="UTF-8"></meta>
<title>springboot專案WebSocket測試demo</title>
</head>
<body>
<h3>springboot專案websocket測試demo</h3>
<h4>測試說明</h4>
<h5>文字框中資料資料，點選‘傳送測試’，文字框中的資料會傳送到後臺websocket，後臺接受到之後，會再推送資料到前端，展示在下方；點選關閉連線，可以關閉該websocket；可以跟蹤程式碼，瞭解具體的流程；程式碼上有詳細註解</h5>
<br />
<input id="text" type="text" />
<button onclick="send()">傳送測試</button>
<hr />
<button onclick="clos()">關閉連線</button>
<hr />
<div id="message"></div>
<script>
var websocket = null;
if('WebSocket' in window){
websocket = new WebSocket("ws://127.0.0.1:9999/webSocket/1");
}else{
alert("您的瀏覽器不支援websocket");
}
websocket.onerror = function(){
setMessageInHtml("send error！");
}
websocket.onopen = function(){
setMessageInHtml("連線成功！")
setTimeout(function(){setMessageInHtml("歡迎來到這裡！")
},2000)
}
websocket.onmessage = e => setMessageInHtml(e.data)
websocket.onclose = function(){
setMessageInHtml("連線斷開！")
}
window.onbeforeunload = function(){
clos();
}
function setMessageInHtml(message){
document.getElementById('message').innerHTML += message+"</br>";
}
function clos(){
websocket.close(3000,"強制關閉");
}
function send(){
var msg = document.getElementById('text').value;
websocket.send(msg);
}
</script>
</body>
</html>複製程式碼測試
後記
希望我們每天都有一點小收穫～
如果覺得有用就關注我吧～