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

  • 消费税是指什么税
  • 暴利税怎么计算
  • 出口不退税进项税如何处理
  • 结转和结转到的区别
  • 所得税申报表的营业收入包括营业外收入吗
  • 职工的困难补助计入什么科目
  • 年末暂估下年怎么入账
  • 公司在筹备阶段可以不交社保
  • 税款滞纳金计入成本费用还是营业外
  • 个税系统如何升级到最新版本
  • 网络团购的类型
  • 长期股权投资的账务处理
  • 外购固定资产账务处理
  • 注销税务登记申请书
  • 会计上的未达账项是什么
  • 企业收到的政府补贴,怎么入账
  • 税务局申请发票
  • 地税的发票
  • 母子公司划转房产怎么办
  • 印花税税率需要记忆吗
  • 承兑汇票漏章证明怎么写?
  • 现金短缺或溢余的账务处理业务题
  • 合伙制创投企业与合伙制创投基金
  • 银行贷款的坏账是什么意思
  • 简易计税劳务分包发票可以差额抵扣吗
  • 什么是额定功率和峰值功率
  • 代扣代缴的城建税和教育费附加按委托方所在地的税率
  • 资产负债表日后事项涵盖期间
  • 计提债券本年利息分录
  • 苹果手机上传速度很慢
  • 汇算清缴申报表怎么填
  • win10显示我的电脑
  • 收入汇缴账户可以冻结吗
  • 提高支票处理效率的有效方法是
  • 连接云服务器超时
  • 劳动保护经费
  • 我找到了这个
  • 债券转换是什么意思
  • 接受投资收到的现金计入
  • 销售材料账务处理
  • 机器学习中的数学原理——过拟合、正则化与惩罚函数
  • println参数
  • cp命令使用
  • vant ui
  • centos8 mongodb
  • 个税由公司承担怎么计算工资
  • 事业单位长期应付款呆账怎样处理好
  • sql查询结果分页
  • 企业需要购买两种保险吗
  • 哪些所得需要去税务登记
  • 月底留抵税额需要结转吗
  • 小规模代开增值税专用发票怎么操作?
  • 小规模纳税人财务报表季报怎么填
  • 资产负债表调整事项
  • 农产品收购进项税抵扣会计分录
  • 企业所得税汇算清缴调增的项目有哪些
  • 企业购买国债逆回购怎么操作
  • 外币投资计入什么科目
  • 银行代扣水电费发票到哪里打
  • 红字冲销表示负数吗
  • 银行回单超过三个月可以补打吗
  • 本地发生住宿费怎么办
  • mysql 5.7启动
  • windows组合快捷键
  • win8怎样关闭系统更新
  • linux readelf命令
  • win7总是弹出广告怎么办
  • win8休眠如何唤醒
  • cocos2dx官方文档
  • unity3d怎么用
  • shell输出1到100
  • jQuery中$.ajax()方法参数解析
  • js中tolocalestring
  • unity 角色
  • jQuery中each()、find()和filter()等节点操作方法详解(推荐)
  • 曲靖市税务局领导班子
  • 水电费的增值税专用税可抵扣进项
  • 党员e先锋中的支部云课堂在哪
  • 泉港国税电子税务局官网
  • 企业并购重组的方式有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设