上一篇文章，我们分享了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. Linux--MySQL 日志管理、备份与恢复

    MySQL 日志管理.备份与恢复一.MySQL 日志管理二.数据库备份的重要性与分类  1.数据备份的重要性  2.从物理与逻辑的角度,备份分为  3.从数据库的备份策略角度,备份可分为三.常见的备份 ...

  2. 各种插值法的python实现

    一维插值 插值不同于拟合.插值函数经过样本点,拟合函数一般基于最小二乘法尽量靠近所有样本点穿过.常见插值方法有拉格朗日插值法.分段插值法.样条插值法. 拉格朗日插值多项式:当节点数n较大时,拉格朗日插 ...

  3. C# Dapper基本三层架构使用 （三、DAL）

    数据访问层(DAL),主要是存放对数据类的访问,即对数据库的添加.删除.修改.更新等基本操作 首先需要在UI层App.Config配置文件中增加连接字符串,如下所示 <connectionStr ...

  4. python模块--collections(容器数据类型)

    Counter类(dict的子类, 计数器) 方法 返回值类型 说明 __init__ Counter 传入可迭代对象, 会对对象中的值进行计数, 值为键, 计数为值 .elements() 迭代器 ...

  5. 第24篇-虚拟机对象操作指令之getfield

    getfield指令表示获取指定类的实例域,并将其值压入栈顶.其格式如下: getstatic indexbyte1 indexbyte2 无符号数indexbyte1和indexbyte2构建为(i ...

  6. java版gRPC实战之六：客户端动态获取服务端地址

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. pytest+allure基础知识

    介绍 pytest是基于unittest开发的另一款更高级更好用的单元测试框架 支持参数化 执行测试过程中可以将某些测试跳过(skip),或者对某些预期失败的case标记成失败 支持运行由 nose, ...

  8. HDU 6170 FFF at Valentine(强联通缩点+拓扑排序)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6165 题意:给你一个无环,无重边的有向图,问你任意两点,是否存在路径使得其中一点能到达另一点 解析:强 ...

  9. 整理STC延时函数时遇到的玄学问题

    void Delay { unsigned char i, j; i = 11; j = 190; do { while (--j); } while (--i); } void Delay { un ...

  10. 解决wampserver无法启动问题

    如果无法启动,找不到原因.直接依次点击打开到:控制面板--管理工具--事件查看器--windows日志--应用程序,查看对应进程错误信息对症下药即可. 我这个错误就是8099端口错误,运行cmd命令, ...