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

  • 小米应用安装权限管理在哪里(小米的软件安装权限)

    小米应用安装权限管理在哪里(小米的软件安装权限)

  • windows11怎么改账户名字(windows11怎么改账户管理员)

    windows11怎么改账户名字(windows11怎么改账户管理员)

  • 苹果13什么时候开售(苹果13什么时候发售的)

    苹果13什么时候开售(苹果13什么时候发售的)

  • 电脑怎么转换图片格式(电脑怎么转换图片文件格式)

    电脑怎么转换图片格式(电脑怎么转换图片文件格式)

  • 抖音0播放是怎么回事(抖音0播放解决方法)

    抖音0播放是怎么回事(抖音0播放解决方法)

  • 抖音儿童模式如何打开

    抖音儿童模式如何打开

  • soul卸载了别人还能发信息给你吗(soul卸载了别人擦灰)

    soul卸载了别人还能发信息给你吗(soul卸载了别人擦灰)

  • 央视直播间在哪里看(央视频直播在哪看)

    央视直播间在哪里看(央视频直播在哪看)

  • 手机仅还原系统怎么设置(苹果手机怎么还原以前的系统)

    手机仅还原系统怎么设置(苹果手机怎么还原以前的系统)

  • 苹果美版卡贴机是什么意思(苹果美版卡贴机信号稳定吗)

    苹果美版卡贴机是什么意思(苹果美版卡贴机信号稳定吗)

  • 苹果q币能干嘛(苹果手机q币可以用来干嘛)

    苹果q币能干嘛(苹果手机q币可以用来干嘛)

  • 手机怎么变成了usb模式充电(手机怎么变成了灰色)

    手机怎么变成了usb模式充电(手机怎么变成了灰色)

  • 华为手机信号满格网速太慢是什么原因(华为手机信号满格却无法连接网络)

    华为手机信号满格网速太慢是什么原因(华为手机信号满格却无法连接网络)

  • nx616j是什么机型(nx616j是什么手机)

    nx616j是什么机型(nx616j是什么手机)

  • 网易云音乐怎么查访客 (网易云音乐怎么导入本地歌曲)

    网易云音乐怎么查访客 (网易云音乐怎么导入本地歌曲)

  • 快手在哪关闭礼物特效(快手关闭礼物)

    快手在哪关闭礼物特效(快手关闭礼物)

  • qq资料卡点赞为什么不显示(qq资料卡点赞为什么不能取消)

    qq资料卡点赞为什么不显示(qq资料卡点赞为什么不能取消)

  • ps如何载入素材(ps怎么加载素材)

    ps如何载入素材(ps怎么加载素材)

  • 华为mate20出厂自带膜吗(华为mate20pro出厂设置)

    华为mate20出厂自带膜吗(华为mate20pro出厂设置)

  • 小米8找不到开发者选项(小米8找不到开机选项)

    小米8找不到开发者选项(小米8找不到开机选项)

  • 苹果手表345的区别(苹果手表3456区别)

    苹果手表345的区别(苹果手表3456区别)

  • 看快手直播对方能看到我吗(看快手直播对方会看到你视频吗)

    看快手直播对方能看到我吗(看快手直播对方会看到你视频吗)

  • 火山视频如何增加火力(火山视频如何增加粉丝)

    火山视频如何增加火力(火山视频如何增加粉丝)

  • 如何使用windows恶意软件删除工具(如何使用windows10自带杀毒)

    如何使用windows恶意软件删除工具(如何使用windows10自带杀毒)

  • 绿萝怎么扦插,绿萝扦插方法(图文)(绿萝怎么扦插?)

    绿萝怎么扦插,绿萝扦插方法(图文)(绿萝怎么扦插?)

  • 个体工商户要报工商年报吗?
  • 收到劳务发票还未付款
  • 城市基础设施配套费减免
  • 企业所得税的减免税额和抵免税额区别
  • 等线支付给劳务派遣单位的工资怎么做账
  • 资产管理公司的使命
  • 五金配件领用管理流程
  • 税收优惠抵扣
  • 小汽车的增值税怎么算
  • 自产产品用于业务宣传确认收入吗
  • 现金日记账划线更正法
  • 应收账款未收到是否要交税
  • 公司为职工在异地买医保
  • 来料加工账务处理方法
  • 电商支付的刷单费怎样做记账凭证?
  • 印刷配件有哪些
  • 企业并购金额如何确定
  • 海关进口增值税专用缴款书图片
  • 小型微利企业预缴所得税税率
  • 开了增值税专用发票对方不付款可以申请冻结对方公帐嘛
  • 怎么作废未使用的发票
  • 预缴税款是开票金额的多少
  • 上年度多计提的工资怎么冲减
  • 应交税费应交增值税明细科目设置
  • 1697510605
  • 发票冲红后是否可以重开
  • win11系统更新卡在25%
  • 计提职工薪酬怎么算
  • 电脑开机画面都是英文怎么处理
  • win11 桌面右键
  • 苹果推送ios15
  • PHP:spl_autoload()的用法_spl函数
  • 企业并购特殊性税务处理
  • 非货币性资产交换的记忆口诀
  • windows7旗舰版最新版本
  • 月末结转本年利润怎么算
  • 增值税专用发票有几联?
  • 机器学习中的数学原理——对数似然函数
  • Yii2表单事件之Ajax提交实现方法
  • discuz论坛安装步骤
  • 研发支出的相关理论基础有哪些
  • 收取的水电费怎么入账
  • dede后台左侧菜单空白或不显示的解决办法(完美解决)
  • 进项税额已经抵扣
  • 小规模纳税人税率2023年是多少
  • 递延收益分摊是当月还是次月
  • 接受劳务应付未付款费用
  • 印花税计入会计什么科目
  • 垃圾清运费属于什么服务
  • 可供出售金融资产名词解释
  • 制造费用和直接人工的关系
  • 银行定期利息怎么算一年
  • 房地产结转收入的条件
  • 装修费用摊销计入什么科目
  • 应付账款的账务怎么处理
  • 其他贷款服务计入什么科目
  • 售后租回会计处理分录
  • 其他综合收益 综合收益
  • freebsd使用
  • boxjs
  • win8系统开机直接进入桌面
  • windows xp打开服务
  • u极速u盘装系统
  • ubuntu 20.04 服务器
  • 电脑ems是什么意思啊
  • win10 自带软件
  • windows xp的电脑
  • mmtray2k.exe有什么作用 是什么进程 mmtray2k进程查询
  • z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
  • Android OpenGL ES(七)----理解纹理与纹理过滤
  • 在shell命令行方式下,一行只能
  • jni静态注册和动态注册
  • vue左侧菜单栏实现
  • unity3d CarWaypoints插件
  • jquery删除table行
  • android对话框setview用法
  • js获取
  • 消防咨询电话24小时
  • 贵州企业申报系统
  • 福建电子税务局社保缴费操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设