Python网页版如何实现WebSocket通信_Python网页版WebSocket实时通信开发指南-Python教程-PHP中文网

Python网页版如何实现WebSocket通信_Python网页版WebSocket实时通信开发指南

雪夜

发布： 2025-11-17 23:55:02

原创

910人浏览过

使用FastAPI搭建WebSocket服务，前端通过JavaScript连接，实现双向实时通信。后端用@app.websocket定义接口，管理连接列表并广播消息；前端创建WebSocket实例，监听onmessage事件接收数据，调用send发送消息。配合HTML页面和输入交互，完成简单聊天功能。注意处理异常、清理连接及心跳保活，确保稳定性。

python网页版如何实现websocket通信_python网页版websocket实时通信开发指南

要在Python网页版中实现WebSocket通信，核心是使用支持异步处理的后端框架配合前端JavaScript建立长连接。WebSocket能实现客户端与服务器之间的双向实时通信，非常适合聊天应用、实时数据推送等场景。下面从后端搭建、前端连接到完整示例，一步步说明如何开发。

选择合适的Python后端框架

Python中常用的WebSocket支持框架有以下几种：

FastAPI + Uvicorn：基于ASGI的现代框架，原生支持WebSocket，开发效率高
Sanic：异步Web框架，性能优秀，语法类似Flask
Tornado：老牌异步框架，自带WebSocket模块，适合独立部署

推荐使用FastAPI，因其文档清晰、集成简单，且可直接通过@app.websocket装饰器定义接口。

使用FastAPI搭建WebSocket服务端

安装依赖：

立即学习“Python免费学习笔记（深入）”；

pip install fastapi uvicorn websockets

登录后复制

编写后端代码（main.py）：

from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponse
<p>app = FastAPI()</p><h1>存储所有活动连接</h1><p>active_connections = []</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/950">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680003823895.png" alt="ViiTor实时翻译">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/950">ViiTor实时翻译</a>
                            <p>AI实时多语言翻译专家！强大的语音识别、AR翻译功能。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ViiTor实时翻译">
                                <span>116</span>
                            </div>
                        </div>
                        <a href="/ai/950" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ViiTor实时翻译">
                        </a>
                    </div>
                <p>@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept()
active_connections.append(websocket)
try:
while True:
data = await websocket.receive_text()</p><h1>广播消息给所有连接</h1><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">        for connection in active_connections:
            if connection != websocket:
                await connection.send_text(f"收到: {data}")
except:
    active_connections.remove(websocket)</code></pre>

登录后复制

启动服务：

uvicorn main:app --reload

登录后复制

前端页面通过JavaScript连接WebSocket

创建一个简单的HTML页面，使用浏览器原生WebSocket API连接后端：

<!DOCTYPE html>
<html>
<body>
  <input type="text" id="message" placeholder="输入消息"/>
  <button onclick="sendMessage()">发送</button>
  <div id="output"></div>
<p><script>
const ws = new WebSocket("ws://127.0.0.1:8000/ws");</p><pre class="brush:php;toolbar:false;"><code>ws.onmessage = function(event) {
  const output = document.getElementById("output");
  const msg = document.createElement("p");
  msg.textContent = event.data;
  output.appendChild(msg);
};

function sendMessage() {
  const input = document.getElementById("message");
  ws.send(input.value);
  input.value = "";
}

登录后复制

</script> </body> </html>

将该页面返回给用户，可在FastAPI中添加路由：

@app.get("/", response_class=HTMLResponse)
def get_page():
    with open("index.html", "r") as f:
        return f.read()

登录后复制

处理连接管理与异常情况

实际开发中需注意连接状态管理：

在try...finally中确保断开时清理连接列表
设置心跳机制防止连接超时关闭
对敏感数据做校验和过滤
生产环境使用Nginx反向代理时，确保配置了正确的Upgrade头

例如增强异常处理：

finally:
    if websocket in active_connections:
        active_connections.remove(websocket)

登录后复制

基本上就这些。只要后端用FastAPI这类支持异步的框架开启WebSocket路径，前端用new WebSocket(url)连接并监听消息，就能实现双向实时通信。不复杂但容易忽略的是连接维护和错误恢复逻辑，上线前务必测试断网重连等情况。

以上就是Python网页版如何实现WebSocket通信_Python网页版WebSocket实时通信开发指南的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

python多线程中join的应用场景 Python导入模块错误ImportError产生原因与解决方案如何一键重建 Python 环境 Python代码怎样进行数据排序 Python代码实现多种排序算法的方法 Python数据类型有哪些_Python数据类型全面解析与使用场景