FastAPI 二（简单的多人聊天室WebSocket）

简单的多人聊天室

1.复制官网代码并启动一个简单的服务

https://fastapi.tiangolo.com/advanced/websockets/

复制

现在不需要关注太多，只是熟悉一下FastApi
我现在复制并创建了一个名为main.py的文件，内容如下

from fastapi import FastAPI
from starlette.responses import HTMLResponse
from starlette.websockets import WebSocket

app = FastAPI()

html = """
<!DOCTYPE html>
<html>
    <head>
        <title>Chat</title>
    </head>
    <body>
        <h1>WebSocket Chat</h1>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off"/>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
        <script>
            var ws = new WebSocket("ws://localhost:8000/ws");
            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>
"""
# @app.get("/")告诉FastAPI如何去处理请求
# 路径 /
# 使用get操作
@app.get("/")
async def get():
   # 返回表单信息
    return HTMLResponse(html)

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"Message text was: {data}")

启动

打开cmd输入以下命令
uvicorn main:app --reload
Windows启动成功显示如下

(FastApi) C:\Users\admin\Desktop\FastAPI>uvicorn main:app --reload
�[32mINFO�[0m:     Uvicorn running on �[1mhttp://127.0.0.1:8000�[0m (Press CTRL+C to quit)
�[32mINFO�[0m:     Started reloader process [�[36m�[1m8532�[0m]
�[32mINFO�[0m:     Started server process [�[36m1952�[0m]
�[32mINFO�[0m:     Waiting for application startup.
�[32mINFO�[0m:     Application startup complete.

群发

打开以下链接
http://localhost:8000/
如果一切顺利的话，可以看到以下内容。
这里是我输入了一些内容

1579225770(1).png

到这里可能你已经发现了，现在并不是一个聊天室，就算你打开了多个页面也不能互相交流，只能看到自己发送的内容

2.思考如何修改

参考
https://www.starlette.io/websockets/
我们把代码修改为类(Class)的形式，内容如下文件名为main2.py
请复制以下代码

from fastapi import FastAPI
# 基于类的视图模式来处理HTTP方法和WebSocket会话。
from starlette.endpoints import WebSocketEndpoint, HTTPEndpoint
from starlette.responses import HTMLResponse
# 路由
from starlette.routing import Route, WebSocketRoute

html = """
<!DOCTYPE html>
<html>
    <head>
        <title>Chat</title>
    </head>
    <body>
        <h1>WebSocket Chat</h1>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off"/>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
        <script>
            var ws = new WebSocket("ws://localhost:8000/ws");
            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>
"""

class Homepage(HTTPEndpoint):
    async def get(self, request):
        return HTMLResponse(html)


class Echo(WebSocketEndpoint):
    encoding = "text"
    
    # 连接
    async def on_connect(self, websocket):
        await websocket.accept()
        
    # 收发
    async def on_receive(self, websocket, data):
        await websocket.send_text(f"Message text was: {data}")
        
    # 断开
    async def on_disconnect(self, websocket, close_code):
        pass

routes = [
    Route("/", Homepage),
    WebSocketRoute("/ws", Echo)
]

app = FastAPI(routes=routes)

打开cmd输入以下命令
uvicorn main2:app --reload
打开以下链接
http://localhost:8000/
输入一些内容，发现和函数的写法并没有什么区别，依然是单人聊天。
接下来让我们思考一下

问题1.如何转发多人消息

我想让这个on_receive函数在发送内容的时候发送给连接上的所有人

思考

# 收发
async def on_receive(self, websocket, data):
        await websocket.send_text(f"Message text was: {data}")

可以看到每次发送都要使用websocket.send_text方法
每个加入连接的用户都是一个websocket对象
我能不能把这个对象保存下来每次发送的时候循环所有对象发送呢

行动

本着最简单的方法，我做了以下修改

创建了一个database.py文件来存websocket对象

# 没错 这个文件就只有一个名为info的列表
info = []

在用户连接的时候保存websocket对象

# 先引用刚刚创建的database.py文件里的info
from database import info
""" ...省略内容... """
# 连接
    async def on_connect(self, websocket):
        await websocket.accept()
        # 保存websocket对象
        info.append(websocket)
        # 打印一下
        print(info)

在发送信息的时候给所有websocket对象发送

# 收发
    async def on_receive(self, websocket, data):
        for wbs in info:
            await wbs.send_text(f"Message text was: {data}")

连接断开的时候删除websocket对象

    # 断开
    async def on_disconnect(self, websocket, close_code):
        # 删除websocket对象
        info.remove(websocket)
        # 再打印看看
        print(info)
        pass

修改后的内容如下

from fastapi import FastAPI
# 基于类的视图模式来处理HTTP方法和WebSocket会话。
from starlette.endpoints import WebSocketEndpoint, HTTPEndpoint
from starlette.responses import HTMLResponse
# 路由
from starlette.routing import Route, WebSocketRoute
from database import info

html = """
<!DOCTYPE html>
<html>
    <head>
        <title>Chat</title>
    </head>
    <body>
        <h1>WebSocket Chat</h1>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off"/>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
        <script>
            var ws = new WebSocket("ws://localhost:8000/ws");
            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>
"""

class Homepage(HTTPEndpoint):
    async def get(self, request):
        return HTMLResponse(html)

class Echo(WebSocketEndpoint):
    encoding = "text"
    
    # 连接
    async def on_connect(self, websocket):
        await websocket.accept()
         # 保存websocket对象
        info.append(websocket)
        # 打印一下
        print(info)
        
    # 收发
    async def on_receive(self, websocket, data):
        for wbs in info:
            await wbs.send_text(f"Message text was: {data}")
        
    # 断开
    async def on_disconnect(self, websocket, close_code):
        # 删除websocket对象
        info.remove(websocket)
        # 再打印看看
        print(info)
        pass

routes = [
    Route("/", Homepage),
    WebSocketRoute("/ws", Echo)
]

app = FastAPI(routes=routes)

启动

这里我打开了两个页面，可以看到两个页面都收到了消息，也看到了两个websocket对象

1579230009.jpg

3.添加用户标识

虽然已经达到了群发的作用，但是根本分不清到底是谁在发送消息
这里我就不写思考流程了，靠猜
这里也修改了页面内容

from fastapi import FastAPI
from starlette.endpoints import WebSocketEndpoint, HTTPEndpoint
from starlette.responses import HTMLResponse
from starlette.routing import Route, WebSocketRoute
from database import info

html = """
<!DOCTYPE html>
<html>
    <head>
        <title>Chat</title>
    </head>
    <body>
        <h1>WebSocket Chat</h1>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off" placeholder="" />
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
        <script>
            document.getElementById("messageText").placeholder="第一次输入内容为昵称";
        
            var ws = new WebSocket("ws://localhost:8000/ws");
            
            // 接收
            ws.onmessage = function(event) {
                // 获取id为messages的ul标签内
                var messages = document.getElementById('messages')
                // 创建li标签
                var message = document.createElement('li')
                // 创建内容
                var content = document.createTextNode(event.data)
                // 内容添加到li标签内
                message.appendChild(content)
                // li标签添加到ul标签内
                messages.appendChild(message)
            };
            
            var name = 0;
            // 发送
            function sendMessage(event) {
                var input = document.getElementById("messageText")
                ws.send(input.value)
                input.value = ''
                event.preventDefault()
                
                if (name == 0){
                    document.getElementById("messageText").placeholder="";
                    name = 1;
                }
            }
        </script>
    </body>
</html>
"""

class Homepage(HTTPEndpoint):
    async def get(self, request):
        return HTMLResponse(html)


class Echo(WebSocketEndpoint):
    encoding = "text"
    
    # 修改socket
    async def alter_socket(self, websocket):
        socket_str = str(websocket)[1:-1]
        socket_list = socket_str.split(' ')
        socket_only = socket_list[3]
        return socket_only
    
    # 连接 存储
    async def on_connect(self, websocket):
        await websocket.accept()
        
        # 用户输入名称
        name = await websocket.receive_text()
        
        socket_only = await self.alter_socket(websocket)
        # 添加连接池 保存用户名
        info[socket_only] = [f'{name}', websocket]

        # 先循环 告诉之前的用户有新用户加入了
        for wbs in info:
            await info[wbs][1].send_text(f"{info[socket_only][0]}-加入了聊天室")
        
        print(info)
        
    # 收发
    async def on_receive(self, websocket, data):
        socket_only = await self.alter_socket(websocket)
        
        for wbs in info:
            await info[wbs][1].send_text(f"{info[socket_only][0]}: {data}")
        

    # 断开 删除
    async def on_disconnect(self, websocket, close_code):
        socket_only = await self.alter_socket(websocket)
        # 删除连接池
        info.pop(socket_only)
        print(info)
        pass

routes = [
    Route("/", Homepage),
    WebSocketRoute("/ws", Echo)
]

app = FastAPI(routes=routes)

启动

可以看到现在发送的消息前已经加上了用户的标识，其实只是把info的列表改为了字典，稍微修改了以下页面。

1579231220(1).jpg

ORZ太懒了

其实还有很多需要优化的地方，看到的话可以自己试试
1，用户第一次输入的内容为昵称是否合适
2，用户退出没有群发退出消息
3，页面优化 ① 聊天内容太多无法显示

最后编辑于：2020.02.02 18:14:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,313评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,369评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,916评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,333评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,425评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,481评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,491评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,268评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,719评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,004评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,179评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,832评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,510评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,153评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,402评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,045评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,071评论 2赞 352