| 67 |
websocket前端基础示例vue3案例 |
<div style="color: #d1d3db; background-color: #1a1b1d; font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace; font-size: 13px; line-height: 22px; white-space: pre;">
<div><span style="color: #d5d8e0;"><!</span><span style="color: #f2858c;">DOCTYPE</span> <span style="color: #ded47e;">html</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">html</span> <span style="color: #ded47e;">lang</span>=<span style="color: #82d99f;">"en"</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">head</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">meta</span> <span style="color: #ded47e;">charset</span>=<span style="color: #82d99f;">"UTF-8"</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">title</span><span style="color: #d5d8e0;">></span>FastAPI + Vue 3 WebSocket<span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">title</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #737780;"><!-- 引入 Vue 3 CDN --></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">script</span><span style="color: #82d99f;"> </span><span style="color: #ded47e;">src</span><span style="color: #82d99f;">="https://unpkg.com/vue@3/dist/vue.global.js"</span><span style="color: #d5d8e0;">></</span><span style="color: #f2858c;">script</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">style</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">body</span><span style="color: #82d99f;"> { </span><span style="color: #d5d8e0;">font-family</span><span style="color: #82d99f;">: sans-serif; </span><span style="color: #d5d8e0;">padding</span><span style="color: #82d99f;">: </span><span style="color: #f48cca;">20px</span><span style="color: #82d99f;">; }</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">.chat-box</span><span style="color: #82d99f;"> { </span><span style="color: #d5d8e0;">border</span><span style="color: #82d99f;">: </span><span style="color: #f48cca;">1px</span><span style="color: #82d99f;"> solid #ccc; </span><span style="color: #d5d8e0;">padding</span><span style="color: #82d99f;">: </span><span style="color: #f48cca;">10px</span><span style="color: #82d99f;">; </span><span style="color: #d5d8e0;">height</span><span style="color: #82d99f;">: </span><span style="color: #f48cca;">300px</span><span style="color: #82d99f;">; </span><span style="color: #d5d8e0;">overflow-y</span><span style="color: #82d99f;">: scroll; </span><span style="color: #d5d8e0;">margin-bottom</span><span style="color: #82d99f;">: </span><span style="color: #f48cca;">10px</span><span style="color: #82d99f;">; }</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">.message</span><span style="color: #82d99f;"> { </span><span style="color: #d5d8e0;">margin</span><span style="color: #82d99f;">: </span><span style="color: #f48cca;">5px</span><span style="color: #82d99f;"> </span><span style="color: #f48cca;">0</span><span style="color: #82d99f;">; }</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">style</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">head</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">body</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">div</span> <span style="color: #ded47e;">id</span>=<span style="color: #82d99f;">"app"</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">h1</span><span style="color: #d5d8e0;">></span>WebSocket Chat (FastAPI)<span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">h1</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #737780;"><!-- 消息显示区域 --></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">div</span> <span style="color: #ded47e;">class</span>=<span style="color: #82d99f;">"chat-box"</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">div</span> <span style="color: #b38cff;">v-for</span>="(<span style="color: #ded47e;">msg</span>, <span style="color: #ded47e;">index</span>) <span style="color: #b38cff;">in</span> <span style="color: #ded47e;">messages</span>" :<span style="color: #ded47e;">key</span>="<span style="color: #ded47e;">index</span>" <span style="color: #ded47e;">class</span>=<span style="color: #82d99f;">"message"</span><span style="color: #d5d8e0;">></span>{{ <span style="color: #ded47e;">msg</span> }}<span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">div</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">div</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #737780;"><!-- 输入框：绑定 messageInput，回车键触发 sendMessage --></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">input</span> <span style="color: #ded47e;">v-model</span>="<span style="color: #ded47e;">messageInput</span>" @<span style="color: #ded47e;">keyup</span>.<span style="color: #ded47e;">enter</span>="<span style="color: #ded47e;">sendMessage</span>" <span style="color: #ded47e;">placeholder</span>=<span style="color: #82d99f;">"Type a message..."</span> <span style="color: #d5d8e0;">/></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">button</span> @<span style="color: #ded47e;">click</span>="<span style="color: #ded47e;">sendMessage</span>"<span style="color: #d5d8e0;">></span>Send<span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">button</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">p</span><span style="color: #d5d8e0;">></span>Status: {{ <span style="color: #ded47e;">status</span> }}<span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">p</span><span style="color: #d5d8e0;">></span></div>
<div> <span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">div</span><span style="color: #d5d8e0;">></span></div>
<br />
<div> <span style="color: #d5d8e0;"><</span><span style="color: #f2858c;">script</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">const</span><span style="color: #82d99f;"> { </span><span style="color: #80bbff;">createApp</span><span style="color: #82d99f;">, </span><span style="color: #80bbff;">ref</span><span style="color: #82d99f;">, </span><span style="color: #80bbff;">onMounted</span><span style="color: #82d99f;">, </span><span style="color: #80bbff;">onUnmounted</span><span style="color: #82d99f;"> } </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #ded47e;">Vue</span><span style="color: #82d99f;">;</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #f29d79;">createApp</span><span style="color: #82d99f;">({</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #f29d79;">setup</span><span style="color: #82d99f;">() {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 响应式状态定义</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">const</span><span style="color: #82d99f;"> </span><span style="color: #80bbff;">messages</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #f29d79;">ref</span><span style="color: #82d99f;">([]); </span><span style="color: #737780;">// 存储聊天记录</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">const</span><span style="color: #82d99f;"> </span><span style="color: #80bbff;">messageInput</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #f29d79;">ref</span><span style="color: #82d99f;">(</span><span style="color: #82d99f;">''</span><span style="color: #82d99f;">); </span><span style="color: #737780;">// 输入框内容</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">const</span><span style="color: #82d99f;"> </span><span style="color: #80bbff;">status</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #f29d79;">ref</span><span style="color: #82d99f;">(</span><span style="color: #82d99f;">'Disconnected'</span><span style="color: #82d99f;">); </span><span style="color: #737780;">// 连接状态</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">let</span><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #80bbff;">null</span><span style="color: #82d99f;">; </span><span style="color: #737780;">// WebSocket 实例</span></div>
<div><span style="color: #82d99f;"> </span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 生成一个随机的客户端 ID 用于演示</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">const</span><span style="color: #82d99f;"> </span><span style="color: #80bbff;">clientId</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #81cfe0;">Date</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">now</span><span style="color: #82d99f;">();</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 连接 WebSocket 函数</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">const</span><span style="color: #82d99f;"> </span><span style="color: #f29d79;">connect</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> () </span><span style="color: #b38cff;">=></span><span style="color: #82d99f;"> {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 创建 WebSocket 连接，指向 FastAPI 后端</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #b38cff;">new</span><span style="color: #82d99f;"> </span><span style="color: #81cfe0;">WebSocket</span><span style="color: #82d99f;">(</span><span style="color: #82d99f;">`ws://localhost:8005/ws/</span><span style="color: #f2858c;">${</span><span style="color: #80bbff;">clientId</span><span style="color: #f2858c;">}</span><span style="color: #82d99f;">`</span><span style="color: #82d99f;">);</span></div>
<div><span style="color: #82d99f;"> </span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 连接打开事件</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">onopen</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> () </span><span style="color: #b38cff;">=></span><span style="color: #82d99f;"> {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #80bbff;">status</span><span style="color: #82d99f;">.</span><span style="color: #e0e3ee;">value</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #82d99f;">'Connected'</span><span style="color: #82d99f;">;</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #80bbff;">messages</span><span style="color: #82d99f;">.</span><span style="color: #ded47e;">value</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">push</span><span style="color: #82d99f;">(</span><span style="color: #82d99f;">'System: Connected to server'</span><span style="color: #82d99f;">);</span></div>
<div><span style="color: #82d99f;"> };</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 收到消息事件</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">onmessage</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> (</span><span style="color: #ded47e;">event</span><span style="color: #82d99f;">) </span><span style="color: #b38cff;">=></span><span style="color: #82d99f;"> {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 将收到的消息添加到列表</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #80bbff;">messages</span><span style="color: #82d99f;">.</span><span style="color: #ded47e;">value</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">push</span><span style="color: #82d99f;">(</span><span style="color: #ded47e;">event</span><span style="color: #82d99f;">.</span><span style="color: #ded47e;">data</span><span style="color: #82d99f;">);</span></div>
<div><span style="color: #82d99f;"> };</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 连接关闭事件</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">onclose</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> () </span><span style="color: #b38cff;">=></span><span style="color: #82d99f;"> {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #80bbff;">status</span><span style="color: #82d99f;">.</span><span style="color: #e0e3ee;">value</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #82d99f;">'Disconnected'</span><span style="color: #82d99f;">;</span></div>
<div><span style="color: #82d99f;"> };</span></div>
<div><span style="color: #82d99f;"> };</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 发送消息函数</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">const</span><span style="color: #82d99f;"> </span><span style="color: #f29d79;">sendMessage</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> () </span><span style="color: #b38cff;">=></span><span style="color: #82d99f;"> {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">if</span><span style="color: #82d99f;"> (</span><span style="color: #80bbff;">messageInput</span><span style="color: #82d99f;">.</span><span style="color: #e0e3ee;">value</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">&&</span><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">&&</span><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;">.</span><span style="color: #e0e3ee;">readyState</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">===</span><span style="color: #82d99f;"> </span><span style="color: #81cfe0;">WebSocket</span><span style="color: #82d99f;">.</span><span style="color: #ded47e;">OPEN</span><span style="color: #82d99f;">) {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 发送消息到服务器</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">send</span><span style="color: #82d99f;">(</span><span style="color: #80bbff;">messageInput</span><span style="color: #82d99f;">.</span><span style="color: #e0e3ee;">value</span><span style="color: #82d99f;">);</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 清空输入框</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #80bbff;">messageInput</span><span style="color: #82d99f;">.</span><span style="color: #e0e3ee;">value</span><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;">=</span><span style="color: #82d99f;"> </span><span style="color: #82d99f;">''</span><span style="color: #82d99f;">;</span></div>
<div><span style="color: #82d99f;"> }</span></div>
<div><span style="color: #82d99f;"> };</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 组件挂载时自动连接</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #f29d79;">onMounted</span><span style="color: #82d99f;">(() </span><span style="color: #b38cff;">=></span><span style="color: #82d99f;"> {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #f29d79;">connect</span><span style="color: #82d99f;">();</span></div>
<div><span style="color: #82d99f;"> });</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #737780;">// 组件卸载时关闭连接，防止资源泄漏</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #f29d79;">onUnmounted</span><span style="color: #82d99f;">(() </span><span style="color: #b38cff;">=></span><span style="color: #82d99f;"> {</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">if</span><span style="color: #82d99f;"> (</span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;">) </span><span style="color: #ded47e;">ws</span><span style="color: #82d99f;">.</span><span style="color: #f29d79;">close</span><span style="color: #82d99f;">();</span></div>
<div><span style="color: #82d99f;"> });</span></div>
<br />
<div><span style="color: #82d99f;"> </span><span style="color: #b38cff;">return</span><span style="color: #82d99f;"> { </span><span style="color: #e0e3ee;">messages</span><span style="color: #82d99f;">, </span><span style="color: #e0e3ee;">messageInput</span><span style="color: #82d99f;">, </span><span style="color: #f29d79;">sendMessage</span><span style="color: #82d99f;">, </span><span style="color: #e0e3ee;">status</span><span style="color: #82d99f;"> };</span></div>
<div><span style="color: #82d99f;"> }</span></div>
<div><span style="color: #82d99f;"> }).</span><span style="color: #f29d79;">mount</span><span style="color: #82d99f;">(</span><span style="color: #82d99f;">'#app'</span><span style="color: #82d99f;">);</span></div>
<div><span style="color: #82d99f;"> </span><span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">script</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">body</span><span style="color: #d5d8e0;">></span></div>
<div><span style="color: #d5d8e0;"></</span><span style="color: #f2858c;">html</span><span style="color: #d5d8e0;">></span></div>
</div> |
1 |
20 |
1 |
3/7/26, 7:41 PM |
3/7/26, 7:41 PM |
View Edit Delete |