FastAPI（56）- 使用 Websocket 打造一个迷你聊天室

背景

在实际项目中，可能会通过前端框架使用 WebSocket 和后端进行通信
这里就来详细讲解下 FastAPI 是如何操作 WebSocket 的

模拟 WebSocket 客户端

#!usr/bin/env python

# -*- coding:utf-8 _*-

"""

# author: 小菠萝测试笔记

# blog:  https://www.cnblogs.com/poloyy/

# time: 2021/10/5 5:26 下午

# file: 46_websocket.py

"""

import uvicorn

from fastapi import FastAPI, WebSocket

from fastapi.responses import HTMLResponse

app = FastAPI()

html = """

<!DOCTYPE html>

<html>

    <head>

        <title>小菠萝聊天室</title>

    </head>

    <body>

        <h1>小菠萝聊天室</h1>

        <form action="" onsubmit="sendMessage(event)">

            <input type="text" id="messageText" autocomplete="off"/>

            <button>Send</button>

        </form>

        <ul id='messages'>

        </ul>

        <script>

            // 加载页面，自动创建一个 WebSocket 连接

            var ws = new WebSocket("ws://localhost:8080/ws");

            // 收到消息

            ws.onmessage = function(event) {

                // 获取输入框的值

                var messages = document.getElementById('messages')

                // 创建一个 li 元素

                var message = document.createElement('li')

                // 接收 event 的 data

                var content = document.createTextNode(event.data)

                message.appendChild(content)

                messages.appendChild(message)

            };

            // 发送消息方法

            function sendMessage(event) {

                var input = document.getElementById("messageText")

                ws.send(input.value)

                input.value = ''

                event.preventDefault()

            }

        </script>

    </body>

</html>

"""

# 返回一段 HTML 代码给前端

@app.get("/")

async def get():

    return HTMLResponse(html)

@app.websocket("/ws")

async def websocket_endpoint(websocket: WebSocket):

    # 1、ws 连接

    await websocket.accept()

    while True:

        # 2、接收客户端发送的内容

        data = await websocket.receive_text()

        # 3、服务端发送内容

        await websocket.send_text(f"小菠萝收到的消息是: {data}")

if __name__ == '__main__':

    uvicorn.run(app="46_websocket:app", reload=True, host="127.0.0.1", port=8080)

启动 uvicorn 服务器，访问 127.0.0.1:8080/

客户端、服务端建立 WebSocket 连接成功

发送聊天信息

每发一条消息，均会显示在列表中

可以在其他地方使用 WebSocket

Depends
Security
Cookie
Header
Path
Query

在依赖项中使用 WebSocket

from typing import Optional

import uvicorn

from fastapi import FastAPI, WebSocket, Cookie, Query, status, Depends

from fastapi.responses import HTMLResponse

app = FastAPI()

html = """

<!DOCTYPE html>

<html>

    <head>

        <title>Chat</title>

    </head>

    <body>

        <h1>小菠萝聊天室</h1>

        <form action="" onsubmit="sendMessage(event)">

            <label>Item ID: <input type="text" id="itemId" autocomplete="off" value="foo"/></label>

            <label>Token: <input type="text" id="token" autocomplete="off" value="some-key-token"/></label>

            <button onclick="connect(event)">Connect</button>

            <hr>

            <label>Message: <input type="text" id="messageText" autocomplete="off"/></label>

            <button>Send</button>

        </form>

        <ul id='messages'>

        </ul>

        <script>

        var ws = null;

            function connect(event) {

                var itemId = document.getElementById("itemId")

                var token = document.getElementById("token")

                ws = new WebSocket("ws://localhost:8080/items/" + itemId.value + "/ws?token=" + token.value);

                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)

                };

                event.preventDefault()

            }

            function sendMessage(event) {

                var input = document.getElementById("messageText")

                ws.send(input.value)

                input.value = ''

                event.preventDefault()

            }

        </script>

    </body>

</html>

"""

@app.get("/")

async def get():

    return HTMLResponse(html)

async def get_cookie_or_token(

        websocket: WebSocket,

        session: Optional[str] = Cookie(None),

        token: Optional[str] = Query(None)

):

    # 模拟：如果 session 和 token 都为空，则关闭 websocket

    if session or token:

        return session or token

    await websocket.close(code=status.WS_1008_POLICY_VIOLATION)

@app.websocket("/items/{item_id}/ws")

async def websocket_depends(

        websocket: WebSocket,

        item_id: str,

        q: Optional[str] = None,

        # 依赖项

        cookie_or_token: str = Depends(get_cookie_or_token)

):

    # 1、创建 websocket 连接

    await websocket.accept()

    while True:

        # 2、接收客户端发送的内容

        data = await websocket.receive_text()

        # 3、服务端发送内容

        await websocket.send_text(f"cookie or token value is:{cookie_or_token}")

        if q:

            # 4、如果有传查询参数 q，则再发一条

            await websocket.send_text(f"query param value is:{q}")

        # 5、最后再发一条信息

        await websocket.send_text(f"Message text was: {data}, for item ID: {item_id}")

if __name__ == '__main__':

    uvicorn.run(app="46_websocket:app", reload=True, host="127.0.0.1", port=8080)

发送聊天信息

不带查询参数 q

带查询参数 q

当 WebSocket 连接关闭时

await websocket.receive_text() 将引发 WebSocketDisconnect 异常，这不是期望看到的结果

处理断开连接和多个客户端

from typing import List

import uvicorn

from fastapi import FastAPI, WebSocket, WebSocketDisconnect, status

from fastapi.responses import HTMLResponse

app = FastAPI()

html = """

<!DOCTYPE html>

<html>

    <head>

        <title>Chat</title>

    </head>

    <body>

        <h1>WebSocket Chat</h1>

        <h2>Your ID: <span id="ws-id"></span></h2>

        <form action="" onsubmit="sendMessage(event)">

            <input type="text" id="messageText" autocomplete="off"/>

            <button>Send</button>

        </form>

        <ul id='messages'>

        </ul>

        <script>

            var client_id = Date.now()

            document.querySelector("#ws-id").textContent = client_id;

            var ws = new WebSocket(`ws://localhost:8080/ws/${client_id}`);

            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")

                ws.send(input.value)

                input.value = ''

                event.preventDefault()

            }

        </script>

    </body>

</html>

"""

# 返回一段 HTML 代码给前端

@app.get("/")

async def get():

    return HTMLResponse(html)

# 处理和广播消息到多个 WebSocket 连接

class ConnectionManager:

    def __init__(self):

        self.active_connections: List[WebSocket] = []

    async def connect(self, websocket: WebSocket):

        await websocket.accept()

        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):

        self.active_connections.remove(websocket)

    async def send_personal_message(self, message: str, websocket: WebSocket):

        await websocket.send_text(message)

    async def broadcast(self, message: str):

        for connection in self.active_connections:

            await connection.send_text(message)

manager = ConnectionManager()

@app.websocket("/ws/{client_id}")

async def websocket_endpoint(client_id: str, websocket: WebSocket):

    # 1、客户端、服务端建立 ws 连接

    await manager.connect(websocket)

    # 2、广播某个客户端进入聊天室

    await manager.broadcast(f"{client_id} 进入了聊天室")

    try:

        while True:

            # 3、服务端接收客户端发送的内容

            data = await websocket.receive_text()

            # 4、广播某个客户端发送的消息

            await manager.broadcast(f"{client_id} 发送消息：{data}")

            # 5、服务端回复客户端

            await manager.send_personal_message(f"服务端回复{client_id}：你发送的信息是：{data}", websocket)

    except WebSocketDisconnect:

        # 6、若有客户端断开连接，广播某个客户端离开了

        manager.disconnect(websocket)

        await manager.broadcast(f"{client_id} 离开了聊天室")

if __name__ == '__main__':

    uvicorn.run(app="48_websocket_handler:app", reload=True, host="127.0.0.1", port=8080)

模拟一个小型聊天室的场景
新的客户端进来，所有人都会收到新客户端进入聊天室的消息
某个客户端发送消息，所有人都能看到
某个客户端退出了（关闭浏览器），所有人都会收到该客户端退出聊天室的消息

浏览器打开三个 tab 均访问 127.0.0.1:8080

关掉其中一个客户端（tab）

FastAPI（56）- 使用 Websocket 打造一个迷你聊天室的更多相关文章

学习WebSocket(二):使用Spring WebSocket做一个简单聊天室
聊天室高频率.低延时完全符合websocket的特点,所以聊天室使用websocket再适合不过了. 聊天室的功能并没有比上一节代码多多少,主要在握手阶段对用户的session做处理,对用户的消息进行 ...
nodejs与websocket模拟简单的聊天室
nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...
Python开发一个WEB聊天室
项目实战:开发一个WEB聊天室功能需求: 用户可以与好友一对一聊天可以搜索.添加某人为好友用户可以搜索和添加群每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以删除.添加. ...
Node.js+websocket+mongodb实现即时聊天室
ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...
基于 OpenResty 实现一个 WS 聊天室
基于 OpenResty 实现一个 WS 聊天室 WebSocket WebSocket 协议分析 WebSocket 协议解决了浏览器和服务器之间的全双工通信问题.在WebSocket出现之前,浏览 ...
Django中使用websocket并实现简易聊天室
django使用websocket并实现简易聊天室 django默认只支持http协议如果你想让django即支持http协议又支持websocket协议,则需要做以下配置前期配置前提需要安装c ...
如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
html5 WebSocket 与 PHP socket 聊天室原理
html js <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

MVVMLight学习笔记（七）---Messenger使用
一.概述 Messenger中文解释为信使的意思,顾名思义,在MvvmLight中,它的主要作用是用于View和ViewModel.ViewModel和ViewModel之间的通信. 考虑以下场景: ...
centos7 修改时间
2021-07-28 查看日志时发现系统时间不正确,故修改时间 # 查看当前系统时间 date # 修改当前系统时间 date -s "2021-7-28 17:03:00" # ...
移动端ios上下滑动翻页事件失效
移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...
安装redis 6.0.6
1.规划目录:下载目录.安装目录.redis数据目录mkdir -p /data/appmkdir -p /opt/redis_cluster/redis_6379/{conf,logs,pid}mk ...
MySQL版本浅介
一.关于MySQL发行版介绍: 1. MySQL官方发行版 MySQL是最流行的数据库,主要特点: 简单:MySQL使用很简单,可以无师自通地参照文档安装运行和使用MySQL,几乎没有什么门槛. 开源 ...
剑指offer（一）——二维数组中的查找
题目描述在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...
TDSQL（MySQL版）之DB组件升级
随着数据库产品的更新迭代,修复bug等等,产品避免不了会出现升级的需求.TDSQL(MysqL版)也会有这方面的需求.接下来我就说说如何对现有TDSQL(MySQL版)集群组件进行升级,而不影响业务. ...
☕【Java技术指南】「并发编程专题」Fork/Join框架基本使用和原理探究（基础篇）
前提概述 Java 7开始引入了一种新的Fork/Join线程池,它可以执行一种特殊的任务:把一个大任务拆成多个小任务并行执行. 我们举个例子:如果要计算一个超大数组的和,最简单的做法是用一个循环在一 ...
Git 系列教程（13）- 分支管理
查看分支列表 $ git branch iss53 * master testing 注意 master 分支前的 * 字符:它代表现在 checkout 的那一个分支(也就是说,当前 HEAD 指 ...
【曹工杂谈】Maven底层容器Plexus Container的前世今生，一代芳华终落幕
Maven底层容器Plexus Container的前世今生,一代芳华终落幕前言说实话,我非常地纠结,大家平时只是用Maven,对于内部的实现其实也不关心,我现在非要拉着大家给大家讲.这就有个问题 ...

FastAPI（56）- 使用 Websocket 打造一个迷你聊天室

背景

模拟 WebSocket 客户端

启动 uvicorn 服务器，访问 127.0.0.1:8080/

发送聊天信息

可以在其他地方使用 WebSocket

在依赖项中使用 WebSocket

发送聊天信息

当 WebSocket 连接关闭时

处理断开连接和多个客户端

浏览器打开三个 tab 均访问 127.0.0.1:8080

关掉其中一个客户端（tab）

FastAPI（56）- 使用 Websocket 打造一个迷你聊天室的更多相关文章

随机推荐

热门专题