上一篇文章，我们分享了WebSockets一些入门的，我们这节课，在原来的基础上，对于讲解的进行一个演示。我们最后分享了依赖token等。首先我们对上次的代码进行调整。

我们之前分享FastAPI 学习之路（三十八）Static Files，我们分享了动态文件的使用，我们按照之前分享的。将之前代码的静态文件抽离出来。

放在了templates下面的webchat.html。

<!DOCTYPE html>

<html>

<head>

    <title>Chat</title>

</head>

<body>

<h1>WebSocket 聊天</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/items/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>

我们对于main里面的代码调整为

from typing import Optional

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

from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="./templates")

@app.get("/")

async def get(request: Request):

    return templates.TemplateResponse(

        "webchat.html",

        {

            "request": request

        }

    )

async def get_cookie_or_token(

    websocket: WebSocket,

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

    token: Optional[str] = Query(None),

):

    if session is None and token is None:

        await websocket.close(code=status.WS_1008_POLICY_VIOLATION)

    return session or token

@app.websocket("/items/ws")

async def websocket_endpoint(

    websocket: WebSocket,

    cookie_or_token: str = Depends(get_cookie_or_token),

):

    await websocket.accept()

    while True:

        data = await websocket.receive_text()

        await websocket.send_text(f"消息是: {data}")

但是我们之前的html代码去调试的时候，发现报错，因为我们需要依靠session或者token。那么我们需要对html进行调整。

<!DOCTYPE html>

<html>

    <head>

        <title>Chat</title>

    </head>

    <body>

        <h1>WebSocket Chat</h1>

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

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

            <button onclick="connect(event)">链接</button>

            <hr>

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

            <button>发送</button>

        </form>

        <ul id='messages'>

        </ul>

        <script>

        var ws = null;

            function connect(event) {

                var token = document.getElementById("token")

                ws = new WebSocket("ws://localhost:8000/items/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>

其实我们就是增加了带了token。

但是我们直接点击发送。无法发送消息，但是我们增加了带token之后就可以发送成功了。

这样我们的WebSockets就可以带token来做登录了，但是我们的token呢，只是做了简单的校验。那么我们是不是可以和登录退出放在一起呢。肯定是可以的，我们在下次分享的时候将登录退出分享出来。

文章首发在公众号，欢迎关注。

FastAPI 学习之路（四十六）WebSockets（二）的更多相关文章

  1. FastAPI 学习之路（十六）Form表单

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  2. FastAPI 学习之路（十八）表单与文件

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  3. FastAPI 学习之路（十九）处理错误

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  4. FastAPI 学习之路（十四）响应模型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  5. FastAPI 学习之路（十二）接口几个额外信息和额外数据类型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  6. FastAPI 学习之路（十五）响应状态码

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  7. FastAPI 学习之路（十）请求体的字段

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  8. Dynamic CRM 2013学习笔记（四十六）简单审批流的实现

    前面介绍过自定义审批流: Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示 Dynamic CRM 2013学习笔记(二十一)自定义审批流2 - 配置按钮 Dynamic ...

  9. Hive学习之路 （十六）Hive分析窗口函数(四) LAG、LEAD、FIRST_VALUE和LAST_VALUE

    数据准备 数据格式 cookie4.txt cookie1, ::,url2 cookie1, ::,url1 cookie1, ::,1url3 cookie1, ::,url6 cookie1, ...

  10. Kubernetes学习之路（十六）之存储卷

    目录 一.存储卷的概念和类型 二.emptyDir存储卷演示 三.hostPath存储卷演示 四.nfs共享存储卷演示 五.PVC和PV的概念 六.NFS使用PV和PVC 1.配置nfs存储 2.定义 ...

随机推荐

  1. Photoshop 批量修改图像大小

  2. 剑指 Offer 33. 二叉搜索树的后序遍历序列

    剑指 Offer 33. 二叉搜索树的后序遍历序列 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历结果.如果是则返回 true,否则返回 false.假设输入的数组的任意两个数字都互不相同. ...

  3. 录制脚本启动报错：target controller is configured to “use recording Controller” but no such controller exists,ensure you add a Recording Controller as child of Thread Group node to start recording correctly

    使用JMeter自带录制脚本元件录制,已配置好代理,启动时报错,如图 解决方案: 未指定录制请求信息的存放位置,下拉选择后重新启动即可 对于代理配置有疑问可见性能测试工具JMeter 基础(四)-- ...

  4. Python - 文件模式a+读取不了文件

    代码 f = open('test/gbk.txt', 'a+', encoding='utf-8') print(f.readline()) 最终的执行结果是输出空,为什么呢? a+模式打开文件指针 ...

  5. Appium问题解决方案（9）- Original error: Failed to launch Appium Settings app: Condition unmet after 5090 ms

    背景 执行代码报错 解决方法 该问题并不常见,主要是手机操作系统的问题 程序无法无法自动打开appiumsettings,那么我们可以手动打开appiumsettings服务(程序没有界面,会出现打开 ...

  6. python面向对象(封装,继承,多态)

    python面向对象(封装,继承,多态) 学习完本篇,你将会深入掌握 如何封装一个优雅的借口 python是如何实现继承 python的多态 封装 含义: 1.把对象的属性和方法结合成一个独立的单位, ...

  7. springboot整合jsp报错

    今天在学springboot整合jsp时遇到了一个问题,虽然jsp不被spring官方推荐使用,但抱着学习的心态还是想解决一下这个问题.在写好了需要pom文件之后,访问网站得到了500的错误提示,后台 ...

  8. html回车键搜索内容

    window.onkeydown = function(e){ // elsinput是搜索框 if(e.keyCode === 13 && elsinput.is(':focus') ...

  9. Shell系列（27）- 条件判断之两个整数比较

    两个整数之间比较 Liunx中,都是字符型,但是加了数值比较的选项,所以自动将他们转换成了整数型进行比较,不需要对这些参数进行变量转换或者重新声明 测试选项 作用 整数1 -eq 整数2 判断整数1是 ...

  10. P1013 [NOIP1998 提高组] 进制位

    解析 看到这道题时,有没有想到搜索?然后就是一通码......然后过了. 但是,真的要用搜索吗? 我们可以观察一下.对于n进制中的数ii,如果ii加上某一个数jj会变成两位数,那么可以得到如下不等式: ...