新建网站如何让百度收录,制作网页爱心代码,祭祀网站建设方案,手机应用开发工具成品图#xff1a; 对WebSocket的理解#xff08;在使用之前建议先了解Tcp#xff0c;三次握手#xff0c;四次挥手 #xff09;#xff1a; 首先页面与WebSocket建立连接、向WebSocket发送信息、后端WebSocket向所有连接上WebSoket的客户端发送当前信息。
推荐浏览网站…成品图 对WebSocket的理解在使用之前建议先了解Tcp三次握手四次挥手 首先页面与WebSocket建立连接、向WebSocket发送信息、后端WebSocket向所有连接上WebSoket的客户端发送当前信息。
推荐浏览网站WebSocket 是什么你需要知道的一切 第一步在后端引入WebSocket依赖 !-- WebSocket --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-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 ListWebSocketSession 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通信
templatediv classchat-containerdiv classchat-headerh3在线聊天/h3/divdiv classchat-messages!-- 显示消息列表 --divv-for(message, index) in messages:keyindexclassmessage-item:class{my-message: message.sender currentUser}strong{{ message.sender }}:/strongdiv classmessage-content{{ message.content }}/div/div/divdiv classchat-inputinputv-modelnewMessagekeyup.entersendMessagetypetextplaceholder输入消息classmessage-input/button clicksendMessage classsend-button发送/button/div/div
/templatescript setup langts
import { ref, onMounted, onUnmounted } from vue;interface Message {sender: string;content: string;
}// 消息列表
const messages refMessage[]([]);// 当前用户输入的消息
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();}
});
/scriptstyle 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
