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,然后和后端发发送消息,这样我们完成了一个登录聊天,退出后无法聊天的功能。我们如果直接访问聊天的页面,也是可以直接去定向到我们的登录的界面呢,我们的聊天是依赖于我们的登录的。

 

成功后才可以发送聊天内容

点击退出,直接退出回到登录页

本地存储也清空了

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/45349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP单商户微店b2c商城微信小程序系统源码

打造专属线上购物空间&#x1f6cd;️ &#x1f680;【开篇&#xff1a;解锁新零售时代新风尚】&#x1f680; 在这个数字化飞速发展的时代&#xff0c;线上购物已成为我们日常生活不可或缺的一部分。对于单商户而言&#xff0c;拥有一个专属的B2C商城微信小程序&#xff0c;…

SHAP(SHapley Additive exPlanations)算法

SHAP&#xff08;SHapley Additive exPlanations&#xff09;算法是一种用于解释机器学习模型的方法&#xff0c;它基于博弈论中的 Shapley 值。 Shapley 值原本用于解决合作博弈中参与者对总收益贡献的分配问题。SHAP 算法将每个特征值对模型输出的贡献视为一种“公平”的分配…

【番外】Springboot集成推荐配置及十问RocketMQ

文章目录 Springboot推荐配置方式十问1. 为什么springboot系统集成只有一个producer&#xff0c;并集成到RocketMQTemplate里面&#xff1f;2. 为什么consumer必须要再额外使用一个MessageListener来处理消息&#xff1f;3. 一个系统只用一个producer和consumer可不可行&#x…

非堆成加密SM2算法java实现

基于SM2算法的Java示例代码&#xff0c;展示了如何进行公钥加密、私钥解密、私钥签名和公钥验签。 非堆成加密公私钥使用学习请查看&#xff1a;非堆成加密公私钥使用-CSDN博客 RSA算法&#xff1a;非堆成加密RSA算法java实现-CSDN博客 代码示例 展示了以下步骤&#xff1a…

Xcode打包与发布全攻略:将你的应用带上App Store

标题&#xff1a;Xcode打包与发布全攻略&#xff1a;将你的应用带上App Store 在应用开发旅程的最后阶段&#xff0c;打包和发布流程是将应用呈现给用户的关键步骤。Xcode&#xff0c;作为iOS和macOS应用开发的官方工具&#xff0c;提供了一套完整的打包和发布机制。本文将详细…

图形化编程题库:Scratch图形化编程1~4真题及答案汇总

图形化编程题库全面覆盖Scratch编程学习&#xff0c;精心整理了从基础到进阶的1~4级真题及详尽答案汇总。无论您是Scratch编程初学者还是寻求提升的练习者&#xff0c;这里都能找到丰富的练习题资源&#xff0c;助力您通过实战加深理解&#xff0c;掌握图形化编程的精髓与技巧。…

Centos7 yum 报错「Errno 256」No more mirrors to try 解决方法

解决方案大致有三种 一、更新yum 二、若不行&#xff0c;可能是因为DNS不稳定吧&#xff0c;因为yum安装时会从三个”repo源“&#xff08;base&#xff0c;extras&#xff0c;updates&#xff09;随机获取地址 三、分析总结法 背景 我使用yum方式安装软件时&#xff0c;比…

在Qt C++项目中调用7z API实现压缩和解压

文章目录 在Qt C++项目中调用7z API实现压缩和解压前置条件步骤一:配置7z库下载7z源码编译7z库步骤二:在Qt项目中集成7z库创建Qt项目配置.pro文件添加7z头文件步骤三:实现压缩功能创建压缩函数调用压缩函数步骤四:实现解压功能创建解压函数调用解压函数结论参考Win11下编译…

如何高效去除论文中的AI痕迹?AI助手在此,为你指点迷津

试试这四款AI论文工具和降重技术&#xff01; 在科研领域&#xff0c;AI写作工具如同新一代的科研利器&#xff0c;它们能够极大提高文献查阅、思路整理和表达优化的效率&#xff0c;本质上促进了科研工作的进步。AI写作工具不仅快速获取并整理海量信息&#xff0c;还帮助我们…

C++心决之stl中那些你不知道的秘密(string篇)

目录 1. 为什么学习string类&#xff1f; 1.1 C语言中的字符串 2. 标准库中的string类 2.1 string类 2.2 string类的常用接口说明 1. string类对象的常见构造 2. string类对象的操作 3.vs和g下string结构的说明 3. string类的模拟实现 3.2 浅拷贝 3.3 深拷贝 3.4 写…

基于springboot的鲜花管理系统

系统文档需要联系&#xff0c;白嫖勿扰

四大内网穿透利器对比

本文精选四款市场上的佼佼者——巴比达、花生壳、Frp及NatApp&#xff0c;详细剖析它们的特点与优势&#xff0c;助力企业和个人用户精准选择&#xff0c;其中特别强调了巴比达在企业级安全访问方面的突出贡献。 1. 巴比达 特点 深度安全防护&#xff1a;巴比达提供全方位安…

软设模式之状态模式

设计模式中状态模式的意图是&#xff1a;允许一个对象在其内部状态被改变时改变它的行为 打个比方&#xff0c;在一款即时战略游戏中设计一辆坦克&#xff0c;坦克有普通攻击状态&#xff0c;还有一防空状态。通过设计一个坦克抽象父类&#xff0c;再在下面设计一个具体坦克子…

一文带你入门机器学习超参数优化算法

专栏介绍 1.专栏面向零基础或基础较差的机器学习入门的读者朋友,旨在利用实际代码案例和通俗化文字说明,使读者朋友快速上手机器学习及其相关知识体系。 2.专栏内容上包括数据采集、数据读写、数据预处理、分类\回归\聚类算法、可视化等技术。 3.需要强调的是,专栏仅介绍主…

程序员的自我约束炼成记

自我约束&#xff0c;是一个人能否走向成功的关键&#xff0c;不知道你是否同意&#xff1f;搞编程10几年了&#xff0c;从来不觉得有什么了不起的&#xff0c;但可以不断自我更新&#xff0c;学习新技术&#xff0c;自我约束力起了很大的作用&#xff0c;对我而言&#xff0c;…

“南征北战”| 卓翼飞思技术领航,助力人工智能大赛上海赛区选拔赛圆满落幕

卓翼飞思继6月支持辽宁赛区选拔赛圆满收官后&#xff0c;近日再次技术助力&#xff0c;为上海赛区的比赛画上圆满句号。值得一提的是&#xff0c;在此次比赛中来自上海工程技术大学、同济大学、上海商学院、上海农林职业技术学院&#xff0c;使用卓翼飞思设备的5支参赛队伍&…

Monaco 使用 DefinitionProvider

DefinitionProvider 可以弹出方法定义&#xff0c;效果如下&#xff0c;按住 command 鼠标左键&#xff0c;弹出方法说明。 点击时 Monaco Editor 会调用注册函数&#xff0c;注册函数返回文件地址和需要显示的位置&#xff0c;实现代码如下 return monaco.languages.register…

参与开源项目的经验和收获

关于当前开源项目的发展趋势&#xff0c;我认为有以下几个显著的特点&#xff1a; 快速增长的参与度和社区规模&#xff1a;随着全球化和互联网的普及&#xff0c;开源项目的参与度和社区规模在快速增长。无论是大型企业还是个人开发者&#xff0c;都越来越倾向于参与开源项目…

#if defined(WEBRTC_USE_H264) webrtc.a的宏机制

#ifndef是 if not define的缩写,#ifdef 是 if define 的缩写。 define有两种,一种是单纯宏定义,一种是定义宏为特定值。 #define WEBRTC_USE_H264#defined WEBRTC_USE_H264 11.1定义值用作预处理: #define A 0

常见点云处理总结汇总

点云处理是一系列操作和技术&#xff0c;用于分析和处理三维点云数据&#xff0c;以提取有用的信息并生成可视化结果。以下是常见的点云处理方法及其简要说明&#xff1a; 1. 点云预处理 滤波&#xff1a;去除噪声和无效点&#xff0c;如使用统计滤波、半径滤波等。下采样&a…