Vue+TypeScript+SpringBoot的WebSocket基础教学

成品图： 

 对WebSocket的理解（在使用之前建议先了解Tcp，三次握手，四次挥手 ）：

        首先页面与WebSocket建立连接、向WebSocket发送信息、后端WebSocket向所有连接上WebSoket的客户端发送当前信息。

推荐浏览网站：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">发送</button></div></div>
</template><script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';interface Message {sender: string;content: string;
}// 消息列表
const messages = ref<Message[]>([]);// 当前用户输入的消息
const newMessage = ref('');// 假设的发送方
const currentUser = 'User1';// WebSocket 对象
let socket: WebSocket | null = null;// 连接 WebSocket，并处理接收和发送消息的逻辑
const connectWebSocket = () => {socket = new WebSocket('ws://localhost:8667/VirtuLab_back/chat'); // 连接到后端 WebSocket// WebSocket 打开时触发socket.onopen = () => {console.log('WebSocket 连接已建立');};// 接收 WebSocket 消息时触发socket.onmessage = (event: MessageEvent) => {const data = JSON.parse(event.data); // 假设收到的消息是 JSON 格式console.log('WebSocket 对话已建立');console.log(data)messages.value.push({ sender: data.sender, content: data.content });};// WebSocket 关闭时触发socket.onclose = () => {console.log('WebSocket 连接已关闭');};// WebSocket 出现错误时触发socket.onerror = (error) => {console.error('WebSocket 错误:', error);};
};// 发送消息
const sendMessage = () => {if (newMessage.value.trim() !== '' && socket && socket.readyState === WebSocket.OPEN) {const message = {sender: currentUser,content: newMessage.value};socket.send(JSON.stringify(message)); // 发送 JSON 格式的消息到服务器newMessage.value = ''; // 清空输入框}
};// 当组件挂载时连接 WebSocket
onMounted(() => {connectWebSocket();
});// 当组件卸载时关闭 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>