上一篇文章，我们分享了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. vue 引用省市区三级联动(element-ui Cascader)

    npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...

  2. Java并发之锁升级：无锁->偏向锁->轻量级锁->重量级锁

    Java并发之锁升级:无锁->偏向锁->轻量级锁->重量级锁 对象头markword 在lock_bits为01的大前提下,只有当是否偏向锁位值为1的时候,才表明当前对象处于偏向锁定 ...

  3. Python - 面向对象编程 - __new()__ 和单例模式 

    单例模式 这是一种设计模式 设计模式是前任工作的总结和提炼,通常,被人们广泛流传的设计模式都是针对某一特定问题的成熟的解决方案 使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性 单 ...

  4. Linux proc文件系统小记

    序言: 当linux系统存在多个网口时(也可以是一个网口配置两个IP),每个网口配置不同的IP地址,并且分别连接到不同的电脑上,电脑分别配置与相连的网口统一网段的IP且将电脑网关设置为linux的网口 ...

  5. struts2执行流程和架构图

    一.struts2执行流程 二.架构图 只需要编写黄色部分的代码:

  6. shell编程之免交互

    目录: 一.Here Document 免交互 二.Expect 一.Here Document 免交互 使用I/O重定向的方式将命令列表提供给交互式程序或命令, 比如 ftp.cat 或 read ...

  7. Spring5（五）——AOP

    一.AOP 1.介绍 AOP(Aspect Oriented Programming),面向切面编程.它利用一种称为"横切"的技术,剖解开封装的对象内部,并将那些影响了多个类的公共 ...

  8. 法术迸发（Spellburst）

    描述 法术迸发 (EN:Spellburst ) 是一种在<通灵学园>中加入的关键字异能,在玩家打出一张法术牌后触发,只能触发一次. 若随从在法术结算过程中死亡,则不会触发效果 思路 首先 ...

  9. etcd学习(10)-etcd对比Consul和zooKeeper如何选型

    etcd选型对比 前言 基本架构和原理 etcd Consul ZooKeeper 选型对比 总结 参考 etcd选型对比 前言 对比 Consul, ZooKeeper.选型etcd有那些好处呢? ...

  10. 制作python程序windows安装包（飞机大战源码）

    本文以飞机大战源码为例: 1.首先使用pyinstaller -w xxx.py打包   -w的意思是不显示命令行:飞机大战源码由多个.py文件以及一些图片,音乐文件组成,我们将main.py打包, ...