成品圖：?

?對WebSocket的理解（在使用之前建議先了解Tcp，三次握手，四次揮手 ）：

????????首先頁面與WebSocket建立連接、向WebSocket發(fā)送信息、后端WebSocket向所有連接上WebSoket的客戶端發(fā)送當(dāng)前信息。

推薦瀏覽網(wǎng)站：WebSocket 是什么？你需要知道的一切

第一步：在后端引入WebSocket依賴?

        <!--        WebSocket         --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

第二步：在后端配置WebSocket?

package cn.ryanfan.virtulab_back.config;import cn.ryanfan.virtulab_back.websocket.ChatHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(new ChatHandler(), "/chat").setAllowedOrigins("*");}
}

第三步：建立WebSocket自定義支持?

package cn.ryanfan.virtulab_back.websocket;import lombok.extern.slf4j.Slf4j;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;import java.util.ArrayList;
import java.util.List;
@Slf4j
public class ChatHandler extends TextWebSocketHandler {private final List<WebSocketSession> sessions = new ArrayList<>();@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {sessions.add(session);}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {for (WebSocketSession s : sessions) {if (s.isOpen()) {s.sendMessage(message);}}}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {sessions.remove(session);}
}

?第四步：在前端開啟WebSocket通信

<template><div class="chat-container"><div class="chat-header"><h3>在線聊天</h3></div><div class="chat-messages"><!-- 顯示消息列表 --><divv-for="(message, index) in messages":key="index"class="message-item":class="{'my-message': message.sender === currentUser}"><strong>{{ message.sender }}:</strong><div class="message-content">{{ message.content }}</div></div></div><div class="chat-input"><inputv-model="newMessage"@keyup.enter="sendMessage"type="text"placeholder="輸入消息"class="message-input"/><button @click="sendMessage" class="send-button">發(fā)送</button></div></div>
</template><script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';interface Message {sender: string;content: string;
}// 消息列表
const messages = ref<Message[]>([]);// 當(dāng)前用戶輸入的消息
const newMessage = ref('');// 假設(shè)的發(fā)送方
const currentUser = 'User1';// WebSocket 對象
let socket: WebSocket | null = null;// 連接 WebSocket，并處理接收和發(fā)送消息的邏輯
const connectWebSocket = () => {socket = new WebSocket('ws://localhost:8667/VirtuLab_back/chat'); // 連接到后端 WebSocket// WebSocket 打開時(shí)觸發(fā)socket.onopen = () => {console.log('WebSocket 連接已建立');};// 接收 WebSocket 消息時(shí)觸發(fā)socket.onmessage = (event: MessageEvent) => {const data = JSON.parse(event.data); // 假設(shè)收到的消息是 JSON 格式console.log('WebSocket 對話已建立');console.log(data)messages.value.push({ sender: data.sender, content: data.content });};// WebSocket 關(guān)閉時(shí)觸發(fā)socket.onclose = () => {console.log('WebSocket 連接已關(guān)閉');};// WebSocket 出現(xiàn)錯(cuò)誤時(shí)觸發(fā)socket.onerror = (error) => {console.error('WebSocket 錯(cuò)誤:', error);};
};// 發(fā)送消息
const sendMessage = () => {if (newMessage.value.trim() !== '' && socket && socket.readyState === WebSocket.OPEN) {const message = {sender: currentUser,content: newMessage.value};socket.send(JSON.stringify(message)); // 發(fā)送 JSON 格式的消息到服務(wù)器newMessage.value = ''; // 清空輸入框}
};// 當(dāng)組件掛載時(shí)連接 WebSocket
onMounted(() => {connectWebSocket();
});// 當(dāng)組件卸載時(shí)關(guān)閉 WebSocket
onUnmounted(() => {if (socket) {socket.close();}
});
</script><style scoped>
.chat-container {width: 400px;border: 1px solid #ccc;border-radius: 8px;display: flex;flex-direction: column;justify-content: space-between;height: 500px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);background-color: #ffffff;
}.chat-header {padding: 15px;background-color: #007bff;color: white;text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;font-weight: bold;
}.chat-messages {flex: 1;padding: 15px;overflow-y: auto;background-color: #f9f9f9;border-bottom: 1px solid #ddd;
}.message-item {margin-bottom: 10px;padding: 10px;border-radius: 8px;
}.my-message {background-color: #007bff;color: white;align-self: flex-end;
}.message-content {margin-top: 5px;
}.chat-input {display: flex;padding: 10px;background-color: #f1f1f1;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;
}.message-input {flex: 1;padding: 10px;border: 1px solid #ccc;border-radius: 4px;margin-right: 10px;transition: border-color 0.3s;
}.message-input:focus {border-color: #007bff;outline: none;
}.send-button {padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;
}.send-button:hover {background-color: #0056b3;
}
</style>