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

  • 叮咚买菜怎么设置支付密码(叮咚买菜怎么设置登录密码)

    叮咚买菜怎么设置支付密码(叮咚买菜怎么设置登录密码)

  • 华为nova6红外线功能怎么使用(华为nova6红外线在哪)

    华为nova6红外线功能怎么使用(华为nova6红外线在哪)

  • 最后一页空白页怎么删除(最后一页空白页怎么删除不了)

    最后一页空白页怎么删除(最后一页空白页怎么删除不了)

  • iphone11屏幕旋转怎么设置(iphone11屏幕旋转失灵)

    iphone11屏幕旋转怎么设置(iphone11屏幕旋转失灵)

  • 申诉别人微信会被对方知道嘛(微信申诉会被坏人利用吗)

    申诉别人微信会被对方知道嘛(微信申诉会被坏人利用吗)

  • 荣耀v30pro耳机孔在哪里(荣耀v30pro耳机插孔)

    荣耀v30pro耳机孔在哪里(荣耀v30pro耳机插孔)

  • 蓝牙耳机发微信语音不清楚(蓝牙耳机发微信语音延迟怎么解决)

    蓝牙耳机发微信语音不清楚(蓝牙耳机发微信语音延迟怎么解决)

  • 华为翻新机能查出来吗(华为翻新机能查真伪吗)

    华为翻新机能查出来吗(华为翻新机能查真伪吗)

  • 拼多多限制推广什么意思(拼多多限制推广后出来还有用吗)

    拼多多限制推广什么意思(拼多多限制推广后出来还有用吗)

  • 历史记录删除了怎么恢复(历史记录删除了别人还能看见吗)

    历史记录删除了怎么恢复(历史记录删除了别人还能看见吗)

  • 苹果按键音关了还有声(iphone 按键音 关不掉)

    苹果按键音关了还有声(iphone 按键音 关不掉)

  • 无线键盘按什么键激活(无线键盘按什么键连接蓝牙)

    无线键盘按什么键激活(无线键盘按什么键连接蓝牙)

  • 乐视电视连不上网络怎么办(乐视电视连不上无线网络身份验证出现问题)

    乐视电视连不上网络怎么办(乐视电视连不上无线网络身份验证出现问题)

  • 12306怎么看候补人数(12306怎么看候补订单排在第几位)

    12306怎么看候补人数(12306怎么看候补订单排在第几位)

  • 手机显示安全模式怎么回事(手机显示安全模式怎么办解除)

    手机显示安全模式怎么回事(手机显示安全模式怎么办解除)

  • 淘宝天猫京东区别(天猫淘宝京东区别是什么?)

    淘宝天猫京东区别(天猫淘宝京东区别是什么?)

  • 字处理平均成绩怎么算(字处理中的平均成绩怎么算)

    字处理平均成绩怎么算(字处理中的平均成绩怎么算)

  • maisonkitsune啥牌子(maisonkitsune贵吗)

    maisonkitsune啥牌子(maisonkitsune贵吗)

  • 怎么把华为旧手机的东西导入华为新手机(怎么把华为旧手机的东西导入红米新手机)

    怎么把华为旧手机的东西导入华为新手机(怎么把华为旧手机的东西导入红米新手机)

  • 在win7系统中鼠标右击桌面没反应怎么办?(在windows7中,使用鼠标拖放功能)

    在win7系统中鼠标右击桌面没反应怎么办?(在windows7中,使用鼠标拖放功能)

  • 2015年4月4日摄于Tear Drop Arch附近的月全食,犹他州纪念碑谷 (© Alan Dyer/Alamy)

    2015年4月4日摄于Tear Drop Arch附近的月全食,犹他州纪念碑谷 (© Alan Dyer/Alamy)

  • 代扣代缴境外增值税可以抵扣
  • 利润10万企业所得税多少
  • 工程施工与工程结算在资产负债表里
  • 注册资本 投资比例
  • 办公家具发票要交税吗?
  • 利润为负数利润增长率怎么算
  • 设计服务类合同
  • 采购货款属于什么会计科目
  • 防伪税控系统服务费发票在哪里开
  • 直接转让土地使用权税费
  • 营改增后建筑公司账务处理
  • 增值税普通发票需要交税吗
  • 第三方用人单位应承担哪些责任
  • 注册资本未到位转让股权
  • 企业所得税连续3年亏损预警自查报告
  • 流动资产投资的特点有
  • 收到原未计入应收项目的交易性金融资产的利息
  • 扣押属于纳税担保吗
  • 津贴补助如何缴纳个税
  • 市政配套费交给哪个部门
  • 小规模需要公账还是私账
  • 自建房屋没有发票如何入账
  • 会务费税务处理
  • 以前年度资产损失,汇算清缴怎么填表
  • 苹果mac怎么复制文件到u盘 免费软件
  • 预付款项属于什么会计要素
  • 没收到电费账单怎么办
  • 圣克鲁斯群岛海战百度百科
  • kb4580419更新
  • 政府搬迁补偿款不够建房怎么办
  • php vr
  • 耕地开垦费计入土地成本吗
  • PHP:imagesetstyle()的用法_GD库图像处理函数
  • yolov5损失
  • php顺序查找和二分查找
  • 立陶宛广场
  • 免税需要什么条件
  • 贴现带息与不带息公式
  • 外汇返佣金
  • 发票抬头可以是两个人吗
  • u-net优点
  • wordpress all in one
  • 丧葬补贴金和抚恤金怎样领取
  • 经济独立可以做什么
  • 三代手续费的税率
  • 一联发票和二联发票
  • sql 按顺序查询
  • 未开票收入不入账以规避税收
  • 车辆保险费印花税计税金额含进项税吗
  • 出口退税一般程度是什么
  • 印花税征收范围口诀
  • 非盈利社会团体法人
  • 存货的进口关税计入成本吗
  • 出口抵减内销产品应纳税额在借方
  • 赔偿款从货款扣除怎么做账
  • 零余额账户银行回单
  • 行政单位收到银行存款利息的会计分录
  • 报销单与发票金额不符看什么
  • 金蝶银行存款日记账
  • 银行借款一年按多少天计算
  • 余额调节表怎么填写例题
  • mysql中的rand函数
  • 存储过程mysql
  • ubuntu20.04怎么用
  • centos怎么样
  • pcs system
  • smOutlookPack.exe - smOutlookPack是什么进程 什么文件
  • 防止linux断电系统崩溃
  • 删除同步中心图标
  • cocos2d官网
  • js 图片压缩库
  • JQueryEasyUI之DataGrid数据显示
  • word文件排序乱怎么恢复
  • 用Fragment+ViewPager搭建万能的android界面
  • 五十八二
  • 自定义dialog屏蔽按键
  • 税务局高风险是怎么办
  • 曲靖市国家税务局杨春天
  • 税金乘以12%是什么
  • 党风监督员监督和反应情况怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设