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

03-09 1213阅读 0评论

✅ 作者简介：一名普通本科大三的学生，致力于提高前端开发能力

$【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊,【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,访问,第1张$

（图片来源网络，侵删）

✨ 个人主页：前端小白在前进的主页

🔥 系列专栏： node.js学习专栏

⭐️ 个人社区 : 个人交流社区

🍀 学习格言: ☀️ 打不倒你的会使你更强！☀️

💯 刷题网站：这段时间有许多的小伙伴在问有没有什么好的刷题网站，博主在这里给大家推荐一款刷题网站:👉点击访问牛客网👈牛客网支持多种编程语言的学习，各大互联网大厂面试真题，从基础到拔高，快来体验一下吧！

（图片来源网络，侵删）

🔥前言

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

📃目录

实现效果
前台核心代码

设置不同状态
封装一个发送信息函数
后台核心代码

获取到token
封装一个给前端返回消息的函数
定义与前端一致的状态对象
封装一个js文件处理token
校验token
前台实现(所有代码)
node后台实现(所有代码)

小结

实现效果

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

前台核心代码

设置不同状态

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

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文件处理token

const 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过期'))
    }

前台实现(所有代码)



    
    
    
    Document
    


    欢迎来到聊天室
    
    send
    
    
    
    
        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 = `All` + onlineList.map(item => `