FastAPI 学习之路（四十七）WebSockets（三）登录后才可以聊天
之前我们是通过前端自动生成的token信息，这次我们通过注册登录，保存到本地去实现。首先，我们实现一个登录页面，放在templates目录下。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div><p><input id="username" placeholder="用户名"></p><p><input id="password" placeholder="密码" type="password"></p><button id="login">登录</button>
</div>
<script>$('#login').click(function () {$.ajax({type: "post",url: "/token",contentType: "application/json; charset=utf-8",data: JSON.stringify({email: $("#username").val(),password: $("#password").val()}),success: function (data) {if (data['msg'] == "success") {window.localStorage.setItem("token", data['token'])window.location.href="/"}else {alert(data['msg'])}}})})
</script>
</body>
</html>
我们在后端去编写一个返回静态文件的页面，一个返回token的方法
def get_user_by_email(db: Session, email: str):user = db.query(User).filter(User.email == email).first()if not user:raise HTTPException(status_code=404, detail="this email not exists")return user@app.get("/login")
async def login(request: Request):return templates.TemplateResponse("login.html",{"request": request})@app.post("/token")
def generate_token(user: UserModel,db: Session = Depends(create_db)
):db_user = get_user_by_email(db, user.email)client_hash_password = user.password + "_hashed"if client_hash_password == db_user.hashed_password:return {"token": "lc-token-value", "msg": "success"}return {"token": None, "msg": "failed"}然后我们可以去启动下，当我们启动完成登录后发现本地存了token，那么这个时候我们需要改造下webchat.html，我们取本地的 token，同时也实现了一个退出的功能。
<!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>
<button onclick="logout()">退出</button>
<ul id='messages'>
</ul>
<script>var token=window.localStorage.getItem("token")if (token==null ){window.location.href="/login"}var ws = new WebSocket("ws://localhost:8000/items/ws?token="+token);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()}function logout() {window.localStorage.removeItem("token")window.location.href='/login'}
</script></body></html>
这样我们就可以登录后，然后去获取登录产生的token，然后和后端发发送消息，这样我们完成了一个登录聊天，退出后无法聊天的功能。我们如果直接访问聊天的页面，也是可以直接去定向到我们的登录的界面呢，我们的聊天是依赖于我们的登录的。
成功后才可以发送聊天内容
点击退出，直接退出回到登录页
本地存储也清空了
相关文章：
FastAPI 学习之路（四十七）WebSockets（三）登录后才可以聊天
之前我们是通过前端自动生成的token信息，这次我们通过注册登录，保存到本地去实现。首先，我们实现一个登录页面，放在templates目录下。 <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…...
数据结构—链式二叉树-C语言
代码位置：test-c-2024: 对C语言习题代码的练习 (gitee.com) 一、前言： 在现实中搜索二叉树为常用的二叉树之一，今天我们就要通过链表来实现搜索二叉树。实现的操作有：建二叉树、前序遍历、中序遍历、后序遍历、求树的节点个数、求…...
nginx代理gitee
背景 若干台agv设备，这些设备都是没有公网的(无法访问百度等)。 一台服务器(ubuntu20.04)有线可以公网，无线可以实现内部通信(agv，plc等设备)。 目的 agv每一次更新代码，拉取代码等都需要切换到有公网的网络，多台agv设…...
一款IM即时通讯聊天系统源码，包含app和后台源码
一款IM即时通讯聊天系统源码 聊天APP 附APP，后端是基于spring boot开发的。 这是一款独立服务器部署的即时通讯解决方案，可以帮助你快速拥有一套自己的移动社交、 企业办公、多功能业务产品。可以 独立部署！加密通道！牢牢掌握通…...
Camunda如何通过外部任务与其他系统自动交互
文章目录 简介流程图外部系统pom.xmllogback.xml监听类 启动流程实例常见问题Public Key Retrieval is not allowed的解决方法java.lang.reflect.InaccessibleObjectException 流程图xml 简介 前面我们已经介绍了Camunda的基本操作、任务、表： Camunda组件与服务与…...
Django ORM中ExpressionWrapper的用途
ExpressionWrapper 在 Django ORM 中，直接在 filter 方法中进行字段间的比较时，不能直接使用算术运算符（如 、-、*、/）来操作 F 对象，需要使用 ExpressionWrapper 来包装表达式并指定输出字段类型。 使用Q对象&#…...
什么软件修复视频画质比较好，视频画质修复工具
有些视频中可能会出现噪点、残影、颜色失真等问题，导致观看时体验感不太好，修复视频画质可以去除这些问题，使视频更加干净、清晰和真实。 高质量的视频画质能够提高观众的观看体验，让观众更加享受观看视频的过程。特别是在需要展示…...
效能工具：执行 npm start 可直接切换proxy代理UR后直接启动项目
1) 背景: 我们项目是2个前端3个后端的配置。前端和每个后端都有需要调试的接口。 因此经常切换vite.congig.js中的proxy后端代理链接，是挺麻烦的。 于是我研究如何能快速切换后端URL，所幸懒人有懒福，我找到了Inquirer 和 fs， 实…...
MongoDB自学笔记（一）
一、MongoDB简介 MongoDB是一款基于C开发的文档型数据库。与传统的关系型数据库有所不同，MongoDB面向的是文档，所谓的文档是一种名为BSON （Binary JSON：二进制JSON格式）是非关系数据库当中功能最丰富，最像…...
【AIGC】二、mac本地采用GPU启动keras运算
mac本地采用GPU启动keras运算 一、问题背景二、技术背景三、实验验证本机配置安装PlaidML安装plaidml-keras配置默认显卡 运行采用 CPU运算的代码step1 先导入keras包，导入数据cifar10，这里可能涉及外网下载，有问题可以参考[keras使用基础问题…...
【Qt】使用临时对象的坑
前言 使用临时对象时，一定要注意临时对象析构后是否会对代码造成影响，下面是一些可能出现的错误 std::string Widget::getStr() {return "nihao"; }void Widget::on_pushButton_clicked() {std::string objStr getStr();const char* str g…...
Apache-Flink未授权访问高危漏洞修复
漏洞等级 高危漏洞！！！ 一、漏洞描述 攻击者没有获取到登录权限或未授权的情况下，或者不需要输入密码，即可通过直接输入网站控制台主页面地址，或者不允许查看的链接便可进行访问，同时进行操作。 二、修复建议 根据业务/系统具体情况，结合如下建议做出具体选择： 配…...
Unable to obtain driver using Selenium Manager: Selenium Manager failed解决方案
大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...
（01）Unity使用在线AI大模型（使用百度千帆服务）
目录 一、概要 二、环境说明 三、申请百度千帆Key 四、使用千帆大模型 四、给大模型套壳 一、概要 在Unity中使用在线大模型分为两篇发布，此篇文档为在Python中使用千帆大模型，整体实现逻辑是：在Python中接入大模型—>发布为可传参的…...
Zed 编辑器发布了原生 Linux 版本
由 Rust 编写、GPU 加速的 Zed 文本编辑器终于提供了正式的 Linux 原生版本！在过去的几个月里，Zed 的 Linux 支持取得了长足的进步，现在已经进入了更正式的阶段。 今天，这款由前 Atom 开发人员创建的现代开源代码编辑器现在在 Li…...
安全入门day01
一、常用名词 1、前后端 （1）前端 前端主要负责用户界面的展示和交互。它通常包括HTML、CSS和JavaScript等技术的使用，也可能使用各种前端框架和库，如React、Vue.js、Angular等，来构建更加复杂和动态的用户界面。前端…...
基于Adaboost的数据分类算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于Adaboost的数据分类算法matlab仿真,分别对比线性分类和非线性分类两种方式。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 （完整程序…...
基于Java的斗地主游戏案例开发（做牌、洗牌、发牌、看牌
package Game;import java.util.ArrayList; import java.util.Collections;public class PokerGame01 {//牌盒//♥3 ♣3static ArrayList<String> list new ArrayList<>();//静态代码块//特点：随着类的加载而在加载的，而且只执行一次。stat…...
Ubuntu 22.04.4 LTS (linux) 安装certbot 免费ssl证书申请 letsencrypt
1 安装certbot sudo apt update sudo apt-get install certbot 2 申请letsencrypt证书 sudo certbot certonly --webroot -w 网站目录 -d daloradius.域名.com 3 修改nginx 配置ssl 证书 # 配置服务器证书 ssl_certificate /etc/letsencrypt/live/daloradius.域名.com/f…...
MT6825磁编码IC在智能双旋机器人中的应用
MT6825磁编码IC在智能双旋机器人中的应用，无疑为这一领域的创新和发展注入了新的活力。作为一款高性能的磁性位置传感器，MT6825以其独特的优势，在智能双旋机器人的运动控制、定位精度以及系统稳定性等方面发挥了关键作用。 www.abitions.com …...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...