位置: IT常识 - 正文

【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊(node实战)

编辑:rootadmin
【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊

推荐整理分享【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊(node实战),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:node实战,node基础知识,nodejs进阶,nodejs进阶,node 入门,nodejs进阶,nodejs进阶,nodejs 深入浅出,内容如对您有帮助,希望把文章链接给更多的朋友!

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强!☀️ 💯 刷题网站:这段时间有许多的小伙伴在问有没有什么好的刷题网站,博主在这里给大家推荐一款刷题网站:👉点击访问牛客网👈牛客网支持多种编程语言的学习,各大互联网大厂面试真题,从基础到拔高,快来体验一下吧!

🔥前言

相信在上一篇的文章中大家对websocket的基本轮廓包括基础知识做了一定的了解学习,那么本篇文章将会从demo的角度去实现群聊和私聊的功能,一起来看看吧!

📃目录实现效果前台核心代码设置不同状态封装一个发送信息函数后台核心代码获取到token封装一个给前端返回消息的函数定义与前端一致的状态对象封装一个js文件处理token校验token前台实现(所有代码)node后台实现(所有代码)小结实现效果

这里有个小遗憾,我忘给私聊添加一个简单的样式了,这也是最后我突然发现了,xdm,你们在下面可以去添加一下私聊的简单dom,我这里就用控制台打印实现了!

前台核心代码设置不同状态【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊(node实战)

在这里设置了四种状态,每种状态对应着相应的功能,有获取群列表信息、转到群聊、转到私聊

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文件处理tokenconst 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过期')) }前台实现(所有代码)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./stylesheets/chat.css"></head><body> <h1 id="h1">欢迎来到聊天室</h1> <h3 id="h3"></h3> <input type="text" id="text"><button id="send">send</button> <select id="select"></select> <div id="chat"></div> <!-- 建立socket连接,带着token,后端验证 --> <script> 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 = `<option value="all">All</option>` + onlineList.map(item => ` <option value="${item.username}">${item.username}</option> `).join('') break; case WebSocketType.GroupChat: console.log((msgObj.user ? msgObj.user.username : '广播') + ':' + msgObj.data); var para = document.createElement("p"); var node = document.createTextNode((msgObj.user ? msgObj.user.username : '广播') + ':' + msgObj.data); para.appendChild(node); chat.appendChild(para); break; case WebSocketType.SingleChat: console.log(msgObj.user.username + ':' + msgObj.data); break; } } send.onclick = () => { if (select.value === 'all') { // console.log('群发'); ws.send(createMessage(WebSocketType.GroupChat, text.value)) } else { // console.log('私聊'); ws.send(createMessage(WebSocketType.SingleChat, text.value, select.value)) } } </script></body></html>node后台实现(所有代码)//websocket响应const { json } = require('express');const WebSocket = require('ws');const JWT = require('../util/jwt');const WebSocketServer = WebSocket.WebSocketServerconst wss = new WebSocketServer({ port: 8080});wss.on('connection', function connection(ws, req) { const myURL = new URL(req.url, "http://127.0.0.1:3000") console.log(req.url); //获取到token,随后进行验证 const token = myURL.searchParams.get("token") // 校验token const payload = JWT.verify(token) console.log(payload); if (payload) { ws.send(createMessage(WebSocketType.GroupChat, null, '欢迎来到本聊天室')); ws.user = payload //群发 sendAll() } else { ws.send(createMessage(WebSocketType.Error, null, 'token过期')) } ws.on('message', function message(data) { console.log('received: %s', data); const msgObj = JSON.parse(data) //解析前台传来的数据 switch (msgObj.type) { //通过switch分支来进行不同状态的相应操作 case WebSocketType.GroupList: //获取进入聊天室的人员列表 ws.send(createMessage(WebSocketType.GroupList, null, JSON.stringify(Array.from(wss.clients).map(item => item.user)))) //由于返回的类型是set集合,所以我们通过Array.from()转化为真正的数组! break; case WebSocketType.GroupChat: //群聊分支 //转发给其他人 wss.clients.forEach(function each(client) { if (client.readyState === WebSocket.OPEN) { client.send(createMessage(WebSocketType.GroupChat, ws.user,msgObj.data),{binary : false}) } }); break; case WebSocketType.SingleChat: //私聊分支 wss.clients.forEach(function each(client) { // console.log(client.user); console.log(ws.user); if (client.user.username === msgObj.to && client.readyState === WebSocket.OPEN) { client.send(createMessage(WebSocketType.SingleChat, ws.user,msgObj.data),{binary : false}) } }); break; } }); ws.on('close', () => { wss.clients.delete(ws.user) sendAll() })});const WebSocketType = { Error: 0, //错误 GroupList: 1, //群列表 GroupChat: 2, //群聊 SingleChat: 3 //私聊}function createMessage(type, user, data) { return JSON.stringify({ type: type, user: user, data: data });}const sendAll = () => { //转发给其他人 wss.clients.forEach(function each(client) { if (client.readyState === WebSocket.OPEN) { client.send(createMessage(WebSocketType.GroupList, null, JSON.stringify(Array.from(wss.clients).map(item => item.user)))) } });}小结

这些代码看起来觉得好多好多呀,其实我们滤清思路分析一下,可以发现前后端是对应着的,按着对应关系一一去写代码就会非常轻松,这里的代码逻辑相对来说还是很清晰的,本篇文章到这里就结束了!下周开始不定时要进行js的重生之路了,将会结合许许多多的demo带领大家去学习js,不至于到头来啥也不会,少年,继续加油吧!

注意:登录功能的设置token,以及axios的拦截器将会在以后的node项目实战中与大家见面,我们之前学了jwt,相信大家会写一个登录的接口和简单页面!

👑书写不易,希望大家能够给予三连支持,期待我更好的文章哟👑

本文链接地址:https://www.jiuchutong.com/zhishi/297735.html 转载请保留说明!

上一篇:HTML侧边导航栏(html导航栏边框)

下一篇:重磅!openAI开放chatGPT模型APIgpt-3.5-turbo,成本直降90%!(openapi开放平台)

  • 微信三天未读消息会消失吗(微信三天未读消息)

    微信三天未读消息会消失吗(微信三天未读消息)

  • u盾是干嘛用的(u盾怎么用)

    u盾是干嘛用的(u盾怎么用)

  • 抖音直播怎么开始(抖音直播怎么开声音)

    抖音直播怎么开始(抖音直播怎么开声音)

  • airpods是有延迟的吗(airpods 有延迟)

    airpods是有延迟的吗(airpods 有延迟)

  • 苹果xs发热卡顿严重(苹果xs发热卡顿怎么办)

    苹果xs发热卡顿严重(苹果xs发热卡顿怎么办)

  • 最近访客30什么意思(最近访客显示30但点开啥也没有)

    最近访客30什么意思(最近访客显示30但点开啥也没有)

  • 快速打开任务栏管理器的快捷键(快速打开任务栏图标)

    快速打开任务栏管理器的快捷键(快速打开任务栏图标)

  • iphone共享我的位置要不要打开(iPhone共享我的位置别人能看到吗)

    iphone共享我的位置要不要打开(iPhone共享我的位置别人能看到吗)

  • 微信有自动回复吗(微信有自动回复机器人吗)

    微信有自动回复吗(微信有自动回复机器人吗)

  • 快手发私信频繁怎么办(快手发私信频繁要过多长时间)

    快手发私信频繁怎么办(快手发私信频繁要过多长时间)

  • iponexr和ipone11的区别(ipnonexr和iphone11)

    iponexr和ipone11的区别(ipnonexr和iphone11)

  • 怎么鉴别airpods2真假(怎么鉴别airpods)

    怎么鉴别airpods2真假(怎么鉴别airpods)

  • 手机电池温度45度正常吗(手机电池温度45度)

    手机电池温度45度正常吗(手机电池温度45度)

  • 天猫退货送的积分退吗(天猫积分退货成功后会不会返还)

    天猫退货送的积分退吗(天猫积分退货成功后会不会返还)

  • 小米大屏手机有哪些(小米大屏手机有哪些款式)

    小米大屏手机有哪些(小米大屏手机有哪些款式)

  • 微控制器特点(微控制器的特点)

    微控制器特点(微控制器的特点)

  • 怎么用apple pay取钱(apple pay的钱能取出来吗)

    怎么用apple pay取钱(apple pay的钱能取出来吗)

  • 小米6充电器头多少w(小米充电器头可以充苹果手机吗)

    小米6充电器头多少w(小米充电器头可以充苹果手机吗)

  • 手机微云怎么打开(手机微云怎么打开磁力)

    手机微云怎么打开(手机微云怎么打开磁力)

  • ps暂存盘c盘怎么清除(ps暂存盘已满怎么清理c盘)

    ps暂存盘c盘怎么清除(ps暂存盘已满怎么清理c盘)

  • ipad充电为什么超级慢(ipad充电为什么是黄色)

    ipad充电为什么超级慢(ipad充电为什么是黄色)

  • 荣耀20支持屏下指纹吗(荣耀20可以触屏亮屏吗)

    荣耀20支持屏下指纹吗(荣耀20可以触屏亮屏吗)

  • 怎么制作生日视频照片(怎么制作生日视频微信)

    怎么制作生日视频照片(怎么制作生日视频微信)

  • 快手怎么评论别人作品(快手怎么评论别人作品才好听)

    快手怎么评论别人作品(快手怎么评论别人作品才好听)

  • Windows 10找不到共享计算机怎么办(windows10找不到用户和组)

    Windows 10找不到共享计算机怎么办(windows10找不到用户和组)

  • win10远程连接切换用户重复输入登录密码解决教程(win10 打开远程连接)

    win10远程连接切换用户重复输入登录密码解决教程(win10 打开远程连接)

  • 关税完税价格是指什么意思
  • 企业银行流水可以同步到T+软件中,自动生成凭证了
  • 非独立核算增值税在哪里交
  • 小规模纳税人注册资金最高多少
  • 去年的物业费今年缴,有罚款吗
  • 小规模差额申报怎么申报
  • 特许权使用费计算公式
  • 资源税征税范围有哪些
  • 其他应收款是否要收利息
  • 小规模购买金税盘可以全额抵扣吗
  • 购买固定资产没付款怎么入账
  • 工程保险费属于企业管理费吗
  • 企业营改增后的会计处理有何变化
  • 转让金融资产的税率
  • 营改增建筑业税率是多少
  • 物业签订的合同
  • 不动产的进项税额分两年抵扣吗?
  • 应交增值税计提表表格
  • 进项发票账务处理
  • 生活垃圾处理项目基础金融产品包括
  • 个体户需不需要银行开户
  • 滞留海关发票是谁开
  • 按揭的车可以只买交强险吗
  • 电脑温度过高会怎么样
  • 预收款项的减少
  • PHP:Memcached::deleteByKey()的用法_Memcached类
  • window10黑白模式
  • GrooveMonitor.exe是什么进程?GrooveMonitor.exe可以禁用卸载吗?
  • php如何重启
  • php判断字符串长度的方法
  • 退回已修改是什么意思
  • 罂粟的花季
  • 布鲁克斯岭
  • 美轮美奂的对象是什么
  • laravel技巧
  • 蓬莱德尔塔
  • 显示国家税务总局东莞分局打来电话是诈骗还是正规电话
  • pico实例
  • 应收账款属于会计的哪个要素
  • 资产减值损失的大幅度变动
  • 个人代人开普票要交几个点税
  • 保险公司工伤怎么赔付
  • 在校大学生可以考教师资格证吗
  • 电商收服务费合法吗
  • 营改增试点纳税人提供技术转让
  • 无偿划拨土地需要提折旧吗
  • 非税收入如何退款
  • 质量问题举例
  • 其他综合收益转出
  • 停车费怎么入账会计分录
  • 子公司和区域公司的区别
  • 商业零售企业商品进销差价
  • linux怎么禁用防火墙
  • 电脑鼠标滑动时没法动,怎么办?
  • win7怎么彻底删除文件
  • 以管理员的身份运行是什么意思win10
  • vista windows
  • linux/unix
  • wcu.exe是什么
  • .exe是啥程序
  • ubuntu如何启动
  • linux系统中用户账户有哪些分类
  • windows7调制解调器在在哪里打开
  • 如何重设苹果手机的ID密码
  • windows窗口跑到了侧面
  • win8.1 升级
  • 如何将win10系统从c盘迁移到d盘
  • android内存优化面试
  • unity game optimization
  • jquery2
  • 一个android项目一般包含哪些目录?各有什么用途?
  • 新的开始励志句子
  • [置顶]JM259194
  • python写出来的程序怎么用
  • [置顶]马粥街残酷史
  • javascript截图找图
  • 什么是增值税免抵税额
  • 石油产品消费税征收
  • 2020年小规模纳税人普票免税政策
  • 税务数字证书怎么下载安装
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设