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.rhkb.cn/news/375682.html

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

相关文章

html5——CSS3_文本样式属性

目录 字体样式 字体类型 字体大小 字体风格 字体的粗细 文本样式 文本颜色 排版文本段落 文本修饰和垂直对齐 文本阴影 字体样式 字体类型 p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";} …

线性代数|机器学习-P23梯度下降

文章目录 1. 梯度下降[线搜索方法]1.1 线搜索方法&#xff0c;运用一阶导数信息1.2 经典牛顿方法&#xff0c;运用二阶导数信息 2. hessian矩阵和凸函数2.1 实对称矩阵函数求导2.2. 线性函数求导 3. 无约束条件下的最值问题4. 正则化4.1 定义4.2 性质 5. 回溯线性搜索法 1. 梯度…

Android --- Kotlin学习之路:自己写一个SDK给别的APP用(暴漏一个接口,提供学生的身高数据)

今天又来肝kotlin了&#xff0c;主题是&#xff1a;用kt写一个SDK给其他人用&#xff0c;这个小技能在项目中会经常用到&#xff0c;应该有很多小伙伴还不会用&#xff0c;不会的请往下看—⬇ 在项目里面新建一个module 选择Android library&#xff0c;然后点击finish就行了 …

css横向滚动条支持鼠标滚轮

在做视频会议的时候&#xff0c;标准模式视图会有顶部收缩的一种交互方式&#xff0c;用到了横向滚动&#xff1b;一般情况下鼠标滚轮只支持竖向滚动&#xff0c;这次写个demo是适配横向滚动&#xff1b; 效果图展示 实现横向滚动条顶部显示 <div className{style.remote_u…

FakeNewsGPT4:通过知识增强的大规模视觉语言模型推进多模态假新闻检测

FakeNewsGPT4: Advancing Multimodal Fake News Detection through Knowledge-Augmented LVLMs 论文地址:https://arxiv.org/abs/2403.01988https://arxiv.org/abs/2403.01988 1.概述 当前,多模态假新闻的大量涌现导致了显著的分布差异,这一现状亟需我们开发具备广泛适用性…

OpenGL笔记一之基础窗体搭建以及事件响应

OpenGL笔记一之基础窗体搭建以及事件响应 总结自bilibili赵新政老师的教程 code review! 文章目录 OpenGL笔记一之基础窗体搭建以及事件响应1.运行2.目录结构3.main.cpp4.CMakeList.txt 1.运行 2.目录结构 01_GLFW_WINDOW/ ├── CMakeLists.txt ├── glad.c ├── main…

映美精黑白相机IFrameQueueBuffer转halcon的HObject

映美精黑白相机&#xff0c;用wpfhalcon开发取图 1.到官网下载&#xff0c;开发包 1sdk 2c开发例子 3c#开发例子 引入TIS.Imaging.ICImagingControl35.dll 3.ICImagingControl使用这个类控制相机 /// <summary> /// 相机控制 /// </summary> public ICImagingC…

使用DeepWalk 和Word2Vec实现单词Embedding

0、准备“边”数据集Wiki_edgelist import pandas as pddf pd.read_csv(./data/wiki/Wiki_edgelist.txt, sep , headerNone, names["source", "target"]) df.head() 1、读入 起点-终点 边数据&#xff0c;构建图 # 1、读入 起点-终点 边数据&#xff0c…

代码随想录-暑假算法第一天(数组篇)

代码随想录-暑假算法第一天(数组篇) 1. 二分查找 力扣题目链接(opens new window) 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否…

无人机之摄影及录像技术篇

无人机摄影和录像技术利用飞行器搭载的摄像机在空中进行拍摄&#xff0c;以捕捉独特的视角和高质量的图像。这种技术在多个领域得到应用&#xff0c;如新闻报道、电影制作和广告拍摄等。下面将具体介绍无人机摄影和录像的技术要点&#xff1a; 一、设备选择 无人机型号&#…

Intel 和 ARM 对ROP/COP/JOP的缓解措施

文章目录 前言一、ROP1.1 Intel1.2 ARM 二、COP/JOP2.1 Intel2.2 ARM 前言 前向转移(forward)&#xff1a;将控制权定向到程序中一个新位置的转移方式, 就叫做前向转移, 比如jmp和call指令。这里我们主要保护的间接跳转&#xff0c;间接跳转是运行时才知道函数地址&#xff0c…

Python数据分析-Excel和 Text 文件的读写操作

1.Excel和 Text 文件的读写操作 1. Text 文件读写包 import sys print(sys.argv[0]) print(__file__) print(sys.path[0]) qopen(sys.path[0] "\out.txt","w",encodingutf-8) q.write(这个是测试一下) q.close() print(done)open 语句可以打开的创建text…

Androidstudio安卓开发,SharedPreferences实现登录注册

1. 项目涉及到的技术点 SharedPreferences的使用 2. 效果图 3. 实现过程 注册布局文件&#xff1a;activity_register.xml <?xml version"1.0" encoding"utf-8"?> <androidx.appcompat.widget.LinearLayoutCompat xmlns:android"http:…

【密码学】消息认证

你发送给朋友一条消息&#xff08;内容&#xff1a;明天下午来我家吃饭&#xff09;&#xff0c;这一过程中你不想让除你朋友以外的人看到消息的内容&#xff0c;这就叫做消息的机密性&#xff0c;用来保护消息机密性的方式被叫做加密机制。 现在站在朋友的视角&#xff0c;某一…

css预编译器--sass

Sass Sass 提供了 变量&#xff08;variables&#xff09;、嵌套规则&#xff08;nested rules&#xff09;、 混合&#xff08;mixins&#xff09;、 函数&#xff08;functions&#xff09;&#xff0c;目前我使用最多的还是变量和嵌套规则&#xff0c;貌似目前css也支持嵌套…

华为HCIP Datacom H12-821 卷38

1.多选题 下面关于 BGP中的公认属性的描述&#xff0c;正确的是 A、公认必遵属性是所有BGP路由器都识别&#xff0c;且必须存在于Updata消息中心 B、BGP必须识别所有公认属性 C、公认属性分为公认必遵和可选过渡两种 D、公认任意属性是所有BGP造由器都可以识别&#xff0c…

第100+15步 ChatGPT学习:R实现Ababoost分类

基于R 4.2.2版本演示 一、写在前面 有不少大佬问做机器学习分类能不能用R语言&#xff0c;不想学Python咯。 答曰&#xff1a;可&#xff01;用GPT或者Kimi转一下就得了呗。 加上最近也没啥内容写了&#xff0c;就帮各位搬运一下吧。 二、R代码实现Ababoost分类 &#xff…

mybatis动态传入参数 pgsql 日期 Interval ,day,minute

mybatis动态传入参数 pgsql 日期 Interval 在navicat中&#xff0c;标准写法 SELECT * FROM test WHERE time > (NOW() - INTERVAL 5 day)在mybatis中&#xff0c;错误写法 SELECT * FROM test WHERE time > (NOW() - INTERVAL#{numbers,jdbcTypeINTEGER} day)报错内…

根据脚手架archetype快速构建spring boot/cloud项目

1、找到archetype&#xff0c;并从私仓下载添加archetype到本地 点击IDEA的file&#xff0c;选择new project 选择maven项目&#xff0c;勾选create from archetype 填写archetype信息&#xff0c;&#xff08;repository填写私仓地址&#xff09; 2、选择自定义的脚手架arche…

C++进阶:继承和多态

文章目录 ❤️继承&#x1fa77;继承与友元&#x1f9e1;继承和静态成员&#x1f49b;菱形继承及菱形虚拟继承&#x1f49a;继承和组合 ❤️多态&#x1fa77;什么是多态&#xff1f;&#x1f9e1;多态的定义以及实现&#x1f49b;虚函数&#x1f49a;虚函数的重写&#x1f499…