位置: 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开放平台)

  • 苹果12专注模式怎么关闭(苹果12专注模式在哪)

    苹果12专注模式怎么关闭(苹果12专注模式在哪)

  • 京东查物流单号查询在哪(京东查物流单号查询)

    京东查物流单号查询在哪(京东查物流单号查询)

  • 微信实名认证怎么弄(微信实名认证怎么换人)

    微信实名认证怎么弄(微信实名认证怎么换人)

  • 荣耀30青春版怎么显示网速(荣耀30青春版怎么看电池健康)

    荣耀30青春版怎么显示网速(荣耀30青春版怎么看电池健康)

  • iphonexs顶部听筒声音好小

    iphonexs顶部听筒声音好小

  • 小米开热点电脑搜不到(小米开热点电脑无法连接到这个网络)

    小米开热点电脑搜不到(小米开热点电脑无法连接到这个网络)

  • 与设计测试数据无关的文档是什么(设计测试数据的技术包括数据划分)

    与设计测试数据无关的文档是什么(设计测试数据的技术包括数据划分)

  • 闲鱼申请退款卖家不理(闲鱼申请退款卖家不同意)

    闲鱼申请退款卖家不理(闲鱼申请退款卖家不同意)

  • 喵喵机打印出来是空白(喵喵机打印出来很浅)

    喵喵机打印出来是空白(喵喵机打印出来很浅)

  • 不拆机让耳机弹片回(不拆机让耳机弹出广告)

    不拆机让耳机弹片回(不拆机让耳机弹出广告)

  • xsmax来电闪光灯怎么设置(苹果xsmax来电闪光灯打开了怎么不闪?)

    xsmax来电闪光灯怎么设置(苹果xsmax来电闪光灯打开了怎么不闪?)

  • 小米手环4怎么查询激活保修期(小米手环4怎么开机)

    小米手环4怎么查询激活保修期(小米手环4怎么开机)

  • 微信加人红字多久能解除(微信加人红名后怎么恢复)

    微信加人红字多久能解除(微信加人红名后怎么恢复)

  • 抖音音浪分成比例(抖音音浪分成比为什么是0)

    抖音音浪分成比例(抖音音浪分成比为什么是0)

  • ctrl c是什么快捷键(ctrl快捷键)

    ctrl c是什么快捷键(ctrl快捷键)

  • win7怎么设置兼容模式(win7怎么设置兼容模式F12)

    win7怎么设置兼容模式(win7怎么设置兼容模式F12)

  • 手机为什么一直是2g网(手机为什么一直自动重启)

    手机为什么一直是2g网(手机为什么一直自动重启)

  • oppo手机怎么重新录入面部(oppo手机怎么重设账号密码)

    oppo手机怎么重新录入面部(oppo手机怎么重设账号密码)

  • 连续选中是按哪个(连续选中和不连续选中)

    连续选中是按哪个(连续选中和不连续选中)

  • 货拉拉押金多久可以退(货拉拉要交多少钱押金)

    货拉拉押金多久可以退(货拉拉要交多少钱押金)

  • 怎么在手机上查询社保缴费情况(怎么在手机上查高考分数)

    怎么在手机上查询社保缴费情况(怎么在手机上查高考分数)

  • 微信打不开录音文件m4a(微信打不开录音mp3)

    微信打不开录音文件m4a(微信打不开录音mp3)

  • Linux怎么使用压缩和解压到指定目录的命令?(linux中压缩)

    Linux怎么使用压缩和解压到指定目录的命令?(linux中压缩)

  • 小规模纳税人升级一般纳税人流程
  • 两处以上取得工资如何交社保
  • 出口货物备案单证目录在哪里
  • 连锁店每个店都要独立核算吗
  • 个人收外汇有限制吗
  • 纳税人经营所得预缴申报表怎么填
  • 用外购存货投资分录怎么写?
  • 卖下脚料怎么做分录
  • 政府补助的失业金发放准时吗
  • 计提的利息汇算清缴前没发放,需要交企业所得税吗
  • 技术维护费280全额抵扣会计分录
  • 研发准备金的计提比例是多少
  • 对方已经认证的发票怎么作废
  • 补偿金超过平均工资三倍
  • 老会计有多厉害
  • 旅行社的税
  • 增值税发票单位可以不填吗
  • 哪些情况下,企业需要进行分销渠道设计决策
  • 小规模纳税人购买货物怎么入账
  • abs应付债券
  • 工程哪些材料可以做
  • 个人以非货币性资产投资个人所得税
  • 酒店兼营行为的税务处理?
  • win10玩游戏太卡了
  • 事业单位固定资产计提折旧
  • win8系统出现你的电脑遇到问题需要重新启动
  • linux系统中用户账户有哪些分类
  • linux的vi编辑器怎么用
  • 建筑施工企业关键技术岗位八大员配置要求
  • 所有者权益变动表图片
  • vue使用render
  • 很有意思的一段话
  • 本季度企业所得税
  • 子公司注销母子关系流程
  • php常用array函数
  • input输入框非空验证
  • 再生资源增值税退税优惠政策
  • 交易性金融资产入账价值怎么计算
  • 残保金是用人单位还是用工单位承担
  • 企业所得税本期已预交怎么算
  • 应收账款能想到什么
  • 凭样品销售
  • 可视化调参
  • 旅游费怎么记账
  • python中的比较
  • 支付宝提取到公积金账户
  • 现金付款凭证是发票吗
  • 固定补贴是否属于社保
  • 企业亏损了
  • mysql drop from
  • 企业对公帐户怎么转出私人帐户
  • 纳税申报人的对象是哪些
  • 本年利润总额是什么
  • 支付贷款手续费怎么入账
  • 汇算清缴期间费用社保填哪里
  • 汇算清缴补交的所得税怎么记帐
  • 主营业务利润率反映了企业的什么能力
  • 小规模纳税人开专票税率是多少?
  • 办公家具可以一次性抵扣吗?
  • sql server2008启动
  • mac安装mysql
  • 群发网址
  • vmware虚拟机找不到了
  • macbookair断网
  • window打开注册表
  • centos8终端
  • 笔记本隐藏功能
  • win7不同用户下装不同软件
  • win8计算机配置在哪
  • javascript事件委托的用法及其好处简析
  • js发送ajax请求
  • jquery lt
  • node.js使用教程
  • 基于python的研究
  • iterator python
  • 商业发票发票号怎么填写
  • 纳税工会经费申请怎么写
  • 营业税金及附加结转分录
  • 北京国家税务局总局官网
  • 课税对象与征税对象一样吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设