【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊
✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力
(图片来源网络,侵删)
✨ 个人主页:前端小白在前进的主页
🔥 系列专栏 : node.js学习专栏
⭐️ 个人社区 : 个人交流社区
🍀 学习格言: ☀️ 打不倒你的会使你更强!☀️
💯 刷题网站:这段时间有许多的小伙伴在问有没有什么好的刷题网站,博主在这里给大家推荐一款刷题网站:👉点击访问牛客网👈牛客网支持多种编程语言的学习,各大互联网大厂面试真题,从基础到拔高,快来体验一下吧!
(图片来源网络,侵删)
🔥前言
相信在上一篇的文章中大家对websocket的基本轮廓包括基础知识做了一定的了解学习,那么本篇文章将会从demo的角度去实现群聊和私聊的功能,一起来看看吧!
📃目录
- 实现效果
- 前台核心代码
- 设置不同状态
- 封装一个发送信息函数
- 后台核心代码
- 获取到token
- 封装一个给前端返回消息的函数
- 定义与前端一致的状态对象
- 封装一个js文件处理token
- 校验token
- 前台实现(所有代码)
- node后台实现(所有代码)
- 小结
实现效果
这里有个小遗憾,我忘给私聊添加一个简单的样式了,这也是最后我突然发现了,xdm,你们在下面可以去添加一下私聊的简单dom,我这里就用控制台打印实现了!
前台核心代码
设置不同状态
在这里设置了四种状态,每种状态对应着相应的功能,有获取群列表信息、转到群聊、转到私聊
const WebSocketType = { Error: 0, //错误 GroupList: 1,//群列表 GroupChat: 2,//群聊 SingleChat: 3//私聊 }
封装一个发送信息函数
因为我们给后端发送信息时只能传字符串,所以我们将传给后端的这个对象转换成字符串的形式,使用内置方法JSON.stringify()
(图片来源网络,侵删)function createMessage(type, data, to) { return JSON.stringify({ type, data, to }); }
后台核心代码
获取到token
使用js中的内置方法new URL()获取到请求地址的参数,注意,这里的req.url是请求地址后面的参数!
const myURL = new URL(req.url, "http://127.0.0.1:3000") const token = myURL.searchParams.get("token")
封装一个给前端返回消息的函数
与前台的代码相似,给前台对应的状态返回信息!
function createMessage(type, user, data) { return JSON.stringify({ type: type, user: user, data: data }); }
定义与前端一致的状态对象
实现与前台对象相对应的状态!
const WebSocketType = { Error: 0, //错误 GroupList: 1, //群列表 GroupChat: 2, //群聊 SingleChat: 3 //私聊 }
封装一个js文件处理token
const jwt = require('jsonwebtoken') const secret = 'ccc-data' const JWT = { //jwt的sign()生成token generate(value,expires) { return jwt.sign(value,secret,{expiresIn:expires}) }, //解密token,验证 verify(token) { try { return jwt.verify(token,secret) } catch (error) { return false } } } module.exports = JWT
校验token
这里校验token,成功后,就会给前台返回欢迎来到本聊天室的字样,并且给我们的句柄添加一个user属性,目的是让我们明确是谁进入到了聊天室,返回进入聊天室这个人的信息!
// 校验token const payload = JWT.verify(token) if (payload) { ws.send(createMessage(WebSocketType.GroupChat, null, '欢迎来到本聊天室')); ws.user = payload //群发 sendAll() } else { ws.send(createMessage(WebSocketType.Error, null, 'token过期')) }
前台实现(所有代码)
Document
欢迎来到聊天室
send h1.innerHTML = `${localStorage.getItem("username")}欢迎您来到聊天室` const WebSocketType = { Error: 0, //错误 GroupList: 1,//群列表 GroupChat: 2,//群聊 SingleChat: 3//私聊 } function createMessage(type, data, to) { return JSON.stringify({ type, data, to }); } const ws = new WebSocket(`ws://localhost:8080?token=${localStorage.getItem("token")}`) ws.onopen = () => { console.log('连接成功!'); } ws.onmessage = (msgObj) => { // console.log(msgObj.data); msgObj = JSON.parse(msgObj.data) switch (msgObj.type) { case WebSocketType.Error: localStorage.removeItem("token") location.href = '/login' break; case WebSocketType.GroupList: console.log(JSON.parse(msgObj.data)); const onlineList = JSON.parse(msgObj.data) h3.innerHTML = `` h3.innerHTML = `当前在线人数:${onlineList.length}` select.innerHTML = `` select.innerHTML = `All` + onlineList.map(item => `
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...