FastAPI 学习之路(五十一)WebSockets(七)实现一对一聊天

基于上一篇内容,其实这个一对一也比较简单,我们在之前的websockets管理中已经实现了一对一发消息的内容,这次呢,我们只需要实现一对一如何处理消息即可。

复制代码
import json


@app.websocket("/ws/{user}")
async def websocket_one_to_one(
        websocket: WebSocket,
        user: str,
        cookie_or_token: str = Depends(get_cookie_or_token)
):
    """一对一聊天"""
    await ws_manager.connect(user, websocket)
    try:
        while True:
            data = await websocket.receive_text()  # 前端发送的数据是:ws.send(input.value+"?"+username.value)
            await ws_manager.send_other_message(message=json.loads(data.split("?")[0]), user=data.split("?")[1])
    except WebSocketDisconnect as e:
        await ws_manager.disconnect(user, websocket)

其实也比较简单,还是之前的方法,只是对应的path不一样,而且要发送给用户的消息使用了"?"拼接,实际上,可以作为参数带过来,这只是讲个思路,并且我们要发送给的人也在前端页面选择或者填写。

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
</head>
<body>
<h1>WebSocket</h1>
<form action="" onsubmit="sendMessage(event)">
    <input type="text" id="messageText" value="要发送的消息" autocomplete="off"/>
      <input type="text" id="username" value="要发送的用户" autocomplete="off"/>
    <button>Send</button>
</form>
<button onclick="logout()">退出</button>
<ul id='messages'>
</ul>
<script>
    var  token=window.localStorage.getItem("token")
    if (token==null ){
        window.location.href="/login"
    }
    var ws = new WebSocket("ws://localhost:8000/ws/"+token+"?token="+token);

    ws.onmessage = function (event) {

        var messages = document.getElementById('messages')

        var message = document.createElement('li')

        var content = document.createTextNode(event.data)

        message.appendChild(content)

        messages.appendChild(message)

    };

    function sendMessage(event) {

        var input = document.getElementById("messageText")
        var username = document.getElementById("username")

        ws.send(input.value+"?"+username.value)

        // input.value = ''

        event.preventDefault()

    }
    function logout() {
        window.localStorage.removeItem("token")
        window.location.href='/login'
    }
</script>

</body>

</html>

这里使用填写的方式,新增一个input标签,让用户来自己填写要发送给的用户,这样就完成了一个简单的一对一的聊天demo。

测试效果,分别登录两个用户,给对方发送消息:

可以看到消息已经接收成功,反之发送也是可以的,你也可以增加第三个人看是否能发送成功

相关推荐
像风一样自由202021 小时前
FastMCP与FastAPI:构建自定义MCP服务器
服务器·microsoft·fastapi
数据智能老司机2 天前
使用 FastAPI 构建生成式 AI 服务——与生成模型的实时通信
llm·openai·fastapi
数据智能老司机2 天前
使用 FastAPI 构建生成式 AI 服务——AI集成与模型服务
llm·openai·fastapi
十分钟空间2 天前
有哪些常用的Python后端开发框架?
python·flask·fastapi
老大白菜3 天前
FastAPI WebSocket 聊天应用详细教程
websocket·网络协议·fastapi
众智创新团队6 天前
Flutter与FastAPI的OSS系统实现
flutter·fastapi·oss
Light608 天前
Python依赖注入完全指南:高效解耦、技术深析与实践落地
python·设计模式·单元测试·fastapi·依赖注入·解耦
SpikeKing8 天前
Server - 使用 FastAPI + OpenTelemetry + Zipkin 搭建 Python 服务
python·api·fastapi·zipkin·opentelemetry
趣谈AI9 天前
使用Trae编辑器开发Python Api (FastApi 框架)
python·编辑器·fastapi
Amd79413 天前
FastAPI依赖注入性能优化策略
单例模式·性能优化·fastapi·依赖注入·错误处理·异步编程·缓存机制