上一篇文章，我们分享了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. Selenium4 IDE初体验

    今天闲来无事,尝试了一番Selenium4的IDE,提供了录制和回放的功能.下面是对它的简单介绍. 安装 下载地址:https://www.selenium.dev/selenium-ide/ 在下载 ...

  2. 性能测试工具JMeter 基础（三）—— 创建测试计划

    如何创建一个完整的测试计划? 安装好JMeter后,通过根目录下的bin目录中的jmeter.bat启动JMeter 添加线程组(Thread Group) 在 Test Plan 鼠标右键 Add- ...

  3. Abp VNext权限定义

    在Shop.Application.Contracts项目中Permissions目录下ShopPermissions定义权限名 namespace Shop.Permissions { public ...

  4. Android线程池使用介绍

    本文主要使用kotlin,讨论Android开发中的线程池用法. 我们想使用线程的时候,可以直接创建子线程并启动 Thread { Log.d("rfDev", "rus ...

  5. 【第四篇】- Maven 构建生命周期之Spring Cloud直播商城 b2b2c电子商务技术总结

    ​ ​ Maven 构建生命周期 Maven 构建生命周期定义了一个项目构建跟发布的过程. 一个典型的 Maven 构建(build)生命周期是由以下几个阶段的序列组成的: ​ 阶段 处理 描述 验证 ...

  6. Oracle列值拼接

    最近在学习的过程中,发现一个挺有意思的函数,它可实现对列值的拼接.下面我们来看看其具体用法. 用法: 对其作用,官方文档的解释如下: For a specified measure, LISTAGG  ...

  7. Django学习day15BBS项目开发4.0(完结)

    每日测验 """ 今日考题: 1.简述自定义标签,过滤器,inclusion_tag的方法,并简要说一说三者的特点及响应流程 2.简述个人侧边栏展示及筛选业务逻辑 3.简 ...

  8. Docker系列（23）- CMD和ENTRYPOINT的区别

    CMD和ENTRYPOINT的区别 CMD # 指定这个容器启动的时候要运行的命令,只有最后一个会生效,可被替代 ENTRYPOINT # 指定这个容器启动的时候要运行的命令,可以追加命令 测试CMD ...

  9. Centos8.X 搭建Grafana+Jmeter+Influxdb 性能实时监控平台

    前言 本篇文章引用了小菠萝测试笔记,大部分内容非原创,基于自身实操过程中,完善了部分. 本篇随笔是在Linux上搭建的,后面会补充在docker以及k8s上如何部署安装 工具介绍 工具 介绍 Jmet ...

  10. element-ui的Tree树组件使用技巧

    目录 1,前言 2,需求 3,解决思路 4,完整代码 5,总结 1,前言 最近这段时间在做一个新的模块,其中有一个三层的树结构,产品经理提出了一个很古怪的需求,整的我只能自己控制树的交互,写完之后,感 ...