場景：
1、WebSocket協(xié)議是用于前后端長連接交互的技術(shù)，此技術(shù)多用于交互不斷開的場景。特點是連接不間斷、更輕量，只有在關(guān)閉瀏覽器窗口、或者關(guān)閉瀏覽器、或主動close，當(dāng)前會話對象才會關(guān)閉。
2、相較于 Http/Https?通信只能由客戶端主動發(fā)起請求，而 Socket?通信不僅能由客戶端主動發(fā)起請求、服務(wù)端也可能主動給客戶端推送消息
這里只是簡單的記錄一下使用方式
一、服務(wù)端
1、導(dǎo)入 websocket 依賴
<!-- Socket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2、配置 WebSocket 通信協(xié)議標(biāo)準(zhǔn)(服務(wù)端點導(dǎo)出)對象
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}說明：
如果沒有配置 WebSocket 通信協(xié)議標(biāo)準(zhǔn)對象，可能會導(dǎo)致如下錯誤：
錯誤一：
VM105:1 WebSocket connection to 'ws://xxx:7002' failed: Error during WebSocket handshake: Unexpected response code: 404
錯誤二：
This request has been blocked; this endpoint must be available over WSS.
錯誤三：
VM78:1 WebSocket connection to 'wss://xxx:7002' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR
錯誤四(沒有攜帶token或密鑰)：
VM78:1 WebSocket connection to 'wss://xxx:7002' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR3、服務(wù)端的四個注解方法，對應(yīng)觸發(fā)事件
@OnOpen：連接成功交互初始化
@OnMessage：消息事件
@OnClose：關(guān)閉事件
@OnError：異常事件
4、websocket 事件服務(wù)類，可以理解為Restful Api的映射類(controller)
@Slf4j
@Component
@ServerEndpoint("/websocket/msg/{userId}")
public class WsMessageService {
//與某個客戶端的連接會話，通過此會話對象給客戶端發(fā)送數(shù)據(jù)
private Session session;
//concurrent包的線程安全Set，用來存放每個客戶端對應(yīng)的WebSocket對象。
//注：泛型是當(dāng)前類名
//private static Set<WsMessageService> webSockets = new CopyOnWriteArraySet<>();
private static Map<String, WsMessageService> webSocketsBeanMap = new ConcurrentHashMap<>();
//用來保存在線連接數(shù)
//private static Map<String, Session> sessionPool = new HashMap<>();
//每次連接都是一個新的會話對象，線程安全的
String userId;
@OnOpen
public void onOpen(Session session, @PathParam(value = "userId") String userId) {
this.session = session;
this.userId = userId;
webSocketsBeanMap.put(userId, this);
log.info("OnOpen連接成功，userId：{}，當(dāng)前在線人數(shù)：{}", userId, this.getOnLineCount());
}
@OnMessage
public void onMessage(String message) throws IOException {
Session session = webSocketsBeanMap.get(this.userId).session;
if (ObjectUtil.isNull(session) || !session.isOpen()) {
return;
}
log.info("收到客戶端的消息:" + message);
this.session.getBasicRemote().sendText(String.valueOf(this.getOnLineCount()));
}
@OnClose
public void onClose() throws IOException {
log.info("會話關(guān)閉，關(guān)閉會話的用戶Id為：{}", this.userId);
webSocketsBeanMap.remove(this.userId);
log.info("當(dāng)前在線人數(shù)：{}", this.getOnLineCount());
}
@OnError
public void onError(Session session, Throwable error) {
log.error("連接錯誤：" + error.getMessage());
error.printStackTrace();
}
/**
* <p>返回在線人數(shù)</p>
*
* @author hkl
* @date 2023/2/16
*/
private int getOnLineCount() {
return webSocketsBeanMap.size();
}
}?到這里服務(wù)端demo已經(jīng)完成，可以使用瀏覽器、HTML頁面、Apipost測試
二、測試驗證
連接語法：ws://IP地址:端口號
1、使用 Apipost?工具測試
【1】下載安裝 Apipost
【2】輸入訪問地址、連接、發(fā)送消息，如下
2、用瀏覽器測試
第1步：var ws = new WebSocket("ws://localhost:7000/mpj/websocket/1");
第2步：console.log("連接狀態(tài)：", ws.readyState);
連接狀態(tài)說明：
0：CONNECTING，表示正在連接。
1：OPEN，表示連接成功，可以通信了。
2：CLOSING，表示連接正在關(guān)閉。
3：CLOSED，表示連接已經(jīng)關(guān)閉，或者打開連接失敗
第3步：ws.send("hello");?
示例如下：
?服務(wù)端收到消息：
3、使用 html?頁面編寫js腳本測試
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>WebSocket測試</title>
<script>
function initWebSocket(wsUri) {
var websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
console.log('連接建立中... '+wsUri);
};
websocket.onclose = function(evt) {
console.log('連接關(guān)閉中...', evt);
};
websocket.onmessage = function(evt) {
console.log('收到來自服務(wù)端的消息：', evt.data);
};
websocket.onerror = function(evt) {
console.log('發(fā)生錯誤...', evt);
};
return websocket;
}
//在此配置 websocket 的地址
var websocket = initWebSocket("ws://localhost:6000/mpj/websocket/msg/1");
var msg, i = 0;
var loop = setInterval(function(){
msg = "Hello " +(i++);
if(websocket.readyState == WebSocket.OPEN) {
websocket.send(msg);
console.log('已發(fā)送消息：' +msg);
} else{
clearInterval(loop);
console.log('連接已關(guān)閉，拜拜~');
}
}, 3000);
</script>
</head>
<body>請按 F12 打開控制臺查看消息
</body>
</html>運行如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-780779.html
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-780779.html
到了這里，關(guān)于SpringBoot集成WebSocket實現(xiàn)客戶端與服務(wù)端長連接通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
