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;…

非堆成加密SM2算法java实现

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

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

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

如何高效去除论文中的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;白嫖勿扰

程序员的自我约束炼成记

自我约束&#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;用于分析和处理三维点云数据&#xff0c;以提取有用的信息并生成可视化结果。以下是常见的点云处理方法及其简要说明&#xff1a; 1. 点云预处理 滤波&#xff1a;去除噪声和无效点&#xff0c;如使用统计滤波、半径滤波等。下采样&a…

浏览器插件:Simple Allow Copy 正在监视你的一举一动

插件简述 "Simple Allow Copy"是一款可以帮助用户突破网页复制限制的浏览器扩展。它特别适用于那些禁止复制粘贴的网站&#xff0c;如百度文库、豆丁文库等。使用这款插件&#xff0c;用户可以轻松复制网页上的内容&#xff0c;无需手动输入或使用OCR工具。 该插件截…

电子签章 签到 互动 打卡 创意印章 支持小程序 H5 App

电子签章 签到 互动 打卡 创意印章 支持小程序 H5 App 定制化

彻底搞懂前端跨域解决方案

目录 1浏览器的同源策略 1.1同源策略概述 1.2什么是源&#xff08;origin&#xff09;&#xff1f; 2跨域会受到哪些限制 2.1限制DOM访问 2.2限制Cookie访问 2.3限制Ajax获取数据 3几个注意点 4CORS 解决 Ajax 跨域问题 4.1CORS 概述 4.2CORS 解决简单请求跨域 4.…

生成式人工智能(AIGC):开发者的得力助手还是职业威胁?

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 在当今软件开发领域&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;技术正在以前所未有的方式改变着开发者的工作…

Comparable 和 Comparator 接口的区别

Comparable 和 Comparator 接口的区别 1、Comparable 接口1.1 compareTo() 方法 2、Comparator 接口2.1 compare() 方法 3、 Comparable 和 Comparator 的区别总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java中&#xff0c;Compa…

keepalived安装使用

keeepalived介绍 Keepalived的作用是检测服务器的状态&#xff0c; 如果有一台web服务器宕机&#xff0c;或工作出现故障&#xff0c;Keepalived将检测到&#xff0c;并将有故障的服务器从系统中剔除&#xff0c;同时使用其他服务器代替该服务器的工作&#xff0c;当服务器工作…

pico+unity3d搭建环境

分别注册pico开发者平台和unity的账号密码 下载pico的sdk和unity开发软件 创建unity3d核心项目 在项目中找到窗口&#xff0c;包管理器&#xff0c;添加磁盘的包&#xff0c;选中sdk 安装后就可以使用pico的操作和演示&#xff1b; 剩下的看文档

C语言——基础框架、变量、运算符

基础框架&#xff1a; #include<stdio.h> //编译预处理指令int main() //程序的入口主函数main { //程序&#xff08;函数、功能&#xff09;结束标志return 0; //程序退出前返回给调用者&#xff08;操作系统&#xff09;的值…

不同型号的GD32 MCU如何区分?

大家是否碰到过以下应用场景&#xff1a;同一套软件代码希望跑在不同型号的GD32 MCU中&#xff0c;但有些地方需要根据MCU型号进行调整&#xff1f;或者上位机或其他MCU与GD32 MCU通信时需要知道对应的MCU型号是哪个&#xff1f; 此时&#xff0c;我们就需要了解如何获取以及区…

JANDEL探针四探头RM3-AR英国健德尔四探针手测

JANDEL探针四探头RM3-AR英国健德尔四探针手测