websocket前端基础示例vue3案例

Title websocket前端基础示例vue3案例
Framework Vue3
User wy8817399@vip.qq.com
Id 67
Created 3/7/26, 7:41 PM
Modified 3/7/26, 7:41 PM
Published Yes
Content
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FastAPI + Vue 3 WebSocket</title>
    <!-- 引入 Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .chat-box { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; margin-bottom: 10px; }
        .message { margin: 5px 0; }
    </style>
</head>
<body>
    <div id="app">
        <h1>WebSocket Chat (FastAPI)</h1>
        <!-- 消息显示区域 -->
        <div class="chat-box">
            <div v-for="(msg, index) in messages" :key="index" class="message">{{ msg }}</div>
        </div>
        <!-- 输入框：绑定 messageInput，回车键触发 sendMessage -->
        <input v-model="messageInput" @keyup.enter="sendMessage" placeholder="Type a message..." />
        <button @click="sendMessage">Send</button>
        <p>Status: {{ status }}</p>
    </div>

    <script>
        const { createApp, ref, onMounted, onUnmounted } = Vue;

        createApp({
            setup() {
                // 响应式状态定义
                const messages = ref([]); // 存储聊天记录
                const messageInput = ref(''); // 输入框内容
                const status = ref('Disconnected'); // 连接状态
                let ws = null; // WebSocket 实例
               
                // 生成一个随机的客户端 ID 用于演示
                const clientId = Date.now();

                // 连接 WebSocket 函数
                const connect = () => {
                    // 创建 WebSocket 连接，指向 FastAPI 后端
                    ws = new WebSocket(`ws://localhost:8005/ws/${clientId}`);
                   
                    // 连接打开事件
                    ws.onopen = () => {
                        status.value = 'Connected';
                        messages.value.push('System: Connected to server');
                    };

                    // 收到消息事件
                    ws.onmessage = (event) => {
                        // 将收到的消息添加到列表
                        messages.value.push(event.data);
                    };

                    // 连接关闭事件
                    ws.onclose = () => {
                        status.value = 'Disconnected';
                    };
                };

                // 发送消息函数
                const sendMessage = () => {
                    if (messageInput.value && ws && ws.readyState === WebSocket.OPEN) {
                        // 发送消息到服务器
                        ws.send(messageInput.value);
                        // 清空输入框
                        messageInput.value = '';
                    }
                };

                // 组件挂载时自动连接
                onMounted(() => {
                    connect();
                });

                // 组件卸载时关闭连接，防止资源泄漏
                onUnmounted(() => {
                    if (ws) ws.close();
                });

                return { messages, messageInput, sendMessage, status };
            }
        }).mount('#app');
    </script>
</body>
</html>