用node建立websocket通信实现聊天室

已于 2022-11-19 15:21:43 修改
阅读量921 收藏 2
点赞数 4
分类专栏： 前端笔记 周记 项目实战 文章标签： javascript 前端 websocket
于 2022-11-19 15:20:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Azbtt/article/details/127937175
版权
周记 同时被 3 个专栏收录
67 篇文章 1 订阅
订阅专栏
项目实战
17 篇文章 0 订阅
订阅专栏
前端笔记
16 篇文章 0 订阅
订阅专栏

1.简单的房间号聊天室

该聊天室为最基本的聊天室：

（1）浏览器端

<!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="day1.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="!isshow">
            姓名：<input type="text" v-model="name"><br>
            房间：<input type="text" v-model="roomid">
            <button @click="enter">进入聊天室</button>
        </div>
        <div v-else>
            <input type="text" v-model="msg">
            <button @click="sendmessage">发送信息</button>
            <button @click="closews">关闭ws</button>
            <span>在线人数:{{num}}</span>
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    {{item}}
                </li>
            </ul>
        </div>
    </div>
    <!-- <script src="day1.js"> -->
    <script>
        Vue.config.productionTip = false
        var app=new Vue({
            el:'#app',
            data(){
                return{
                    msg:'',
                    name:'',
                    isshow:false,
                    list:[],
                    ws:{},
                    num:0,
                    roomid:''
                }
            },
            mounted() {
                this.ws=new WebSocket('ws://127.0.0.1:3000');
                this.ws.onopen=this.onOpen;
                this.ws.onmessage=this.onMessage;
                this.ws.onclose=this.onClose;
                this.ws.onerror=this.onError;
            },
            methods: {
                sendmessage(){
                    this.list.push("我："+this.msg);
                    this.ws.send(JSON.stringify({
                        event:"message",
                        msg:this.msg,
                    }))
                    this.msg=''
                },
                onOpen(){
                    console.log("打开ws："+this.ws.readyState);
                },
                onMessage(event){
                    //用户未登录接收不到消息
                    if(!this.isshow){
                        return
                    }
                    var thismsg=JSON.parse(event.data);
                    console.log(thismsg);
                    this.num=thismsg.personnumber
                    if(thismsg.name==this.name){
                            return
                    }else{
                        if(thismsg.event=='enter'){
                            this.list.push(thismsg.name+"进入聊天室");
                        }else if(thismsg.event=='out'){
                            this.list.push(thismsg.name+"退出聊天室");
                        }else{
                            this.list.push(thismsg.name+"  :"+thismsg.msg);
                        } 
                    }
                },
                onClose(){
                    console.log("关闭ws:"+this.ws.readyState);
                },
                onError(){
                    console.log("出错:"+this.ws.readyState);
                },
                closews(){
                    this.ws.close()
                },
                enter(){
                    if(this.name.trim()===""||this.roomid.trim()===""){
                        alert("空")
                        return 
                    }
                    this.isshow=true;
                    this.ws.send(JSON.stringify({
                        event:"enter",
                        name:this.name,
                        roomid:this.roomid
                    }))
                }
            },
        })
    </script>
</body>
</html>

（2）服务器端

const WebSocket=require('ws');
const wss=new WebSocket.Server({port:3000});
let group={}
wss.on('connection',function connection(ws){
  console.log("---------------------");
  ws.on('message',function(msg){
    const msgobj=JSON.parse(msg);

    if(msgobj.event=='enter'){
      ws.name=msgobj.name;
      ws.roomid=msgobj.roomid;
      if(typeof group[ws.roomid]==='undefined'){
        group[ws.roomid]=1;
      }else{
        group[ws.roomid]++;
      }
    }
    wss.clients.forEach((client) => {
      //判断非自己的客户端
      if (client.readyState === WebSocket.OPEN&&client.roomid==ws.roomid){
        msgobj.name=ws.name;
        msgobj.personnumber=group[ws.roomid];
        client.send(JSON.stringify(msgobj))
      }
    }) 
  });
  ws.on('close',function(msg){
    if(ws.name){
      group[ws.roomid]--;
    }
    msgobj={}
    wss.clients.forEach((client) => {
      //判断非自己的客户端
      if (client.readyState === WebSocket.OPEN&&client.roomid==ws.roomid){
        msgobj.name=ws.name;
        msgobj.personnumber=group[ws.roomid];
        msgobj.event="out";
        client.send(JSON.stringify(msgobj))
      }
    }) 
  })
})

2.添加鉴权:

（1）浏览器端

    <script>
        Vue.config.productionTip = false
        var app=new Vue({
            el:'#app',
            data(){
                return{
                    msg:'',
                    name:'',
                    isshow:false,
                    list:[],
                    ws:{},
                    num:0,
                    roomid:''
                }
            },
            mounted() {
                this.ws=new WebSocket('ws://127.0.0.1:3000');
                this.ws.onopen=this.onOpen;
                this.ws.onmessage=this.onMessage;
                this.ws.onclose=this.onClose;
                this.ws.onerror=this.onError;
            },
            methods: {
                sendmessage(){
                    this.list.push("我："+this.msg);
                    this.ws.send(JSON.stringify({
                        event:"message",
                        msg:this.msg,
                    }))
                    this.msg=''
                },
                onOpen(){
                    console.log("打开ws："+this.ws.readyState);
                    this.ws.send(JSON.stringify({
                        event:"auth",
                        message:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ind6eiIsImlhdCI6MTUxNjIzOTAyMn0.0WWry526SJ5FQ-9B7L_Y9dDBm16uh3o2LFR6ee8f_ew"//token数据
                    }))
                },
                onMessage(event){
                    //用户未登录接收不到消息
                    if(!this.isshow){
                        return
                    }
                    var thismsg=JSON.parse(event.data);
                    console.log(thismsg);
                    if(thismsg.event=='onauth'){
                        alert("请鉴权") 
                    }
                    this.num=thismsg.personnumber
                    if(thismsg.name==this.name){
                            return
                    }else{
                        if(thismsg.event=='enter'){
                            this.list.push(thismsg.name+"进入聊天室");
                        }else if(thismsg.event=='out'){
                            this.list.push(thismsg.name+"退出聊天室");
                        }else{
                            this.list.push(thismsg.name+"  :"+thismsg.msg);
                        } 
                    }
                },
                onClose(){
                    console.log("关闭ws:"+this.ws.readyState);
                },
                onError(){
                    console.log("出错:"+this.ws.readyState);
                },
                closews(){
                    this.ws.close()
                },
                enter(){
                    if(this.name.trim()===""||this.roomid.trim()===""){
                        alert("空")
                        return 
                    }
                    this.isshow=true;
                    this.ws.send(JSON.stringify({
                        event:"enter",
                        name:this.name,
                        roomid:this.roomid
                    }))
                }
            },
        })
    </script>

（2）服务器端

安装jsonwebtoken：

npm i jsonwebtoken

const WebSocket=require('ws');
const http=require('http');
const wss=new WebSocket.Server({noServer:true});
const server=http.createServer();
const jwt=require('jsonwebtoken');
const { log } = require('console');
let group={}
wss.on('connection',function connection(ws){
    console.log("---------------------");
    ws.on('message',function(msg){
        const msgobj=JSON.parse(msg);
        if(msgobj.event=='enter'){
            ws.name=msgobj.name;
            ws.roomid=msgobj.roomid;
            if(typeof group[ws.roomid]==='undefined'){
                group[ws.roomid]=1;
            }else{
                group[ws.roomid]++;
            }
        }
        //鉴权：
        if(msgobj.event==="auth"){
            jwt.verify(msgobj.message,"wzz",(err,decode)=>{
                if(err){
                    console.log("auth error");
                    return
                }else{
                    console.log(decode);
                    ws.isAuth=true;
                    return
                }
            })
        }
        if(!ws.isAuth){
            ws.send(JSON.stringify({
                event:"onauth",
                message:"please auth again"
            }))
        }
        wss.clients.forEach((client) => {
            //判断非自己的客户端
            if (client.readyState === WebSocket.OPEN&&client.roomid==ws.roomid){
                msgobj.name=ws.name;
                msgobj.personnumber=group[ws.roomid];
                client.send(JSON.stringify(msgobj))
            }
        }) 
    });
    ws.on('close',function(msg){
        if(ws.name){
            group[ws.roomid]--;
        }
        msgobj={}
        wss.clients.forEach((client) => {
            //判断非自己的客户端
            if (client.readyState === WebSocket.OPEN&&client.roomid==ws.roomid){
                msgobj.name=ws.name;
                msgobj.personnumber=group[ws.roomid];
                msgobj.event="out";
                client.send(JSON.stringify(msgobj))
            }
        }) 
    })
})
server.on('upgrade' , function upgrade( request,socket,head){
    console.log("request :  "+JSON.stringify(request.headers));
    // authenticate(request, (err, client) => {
    //     if (err||!client) {
    //         socket.destroy();
    //         return;
    //     }
        wss.handleUpgrade( request, socket, head,function done(ws){
            wss.emit('connection',ws,request);
        })
    // })
})
server.listen(3000)

（3）node端

可直接传递token：

const WebSocket=require('ws');
const ws=new WebSocket('ws://127.0.0.1:3000',{
    headers:{
        token:'213'
    }
});

3.心跳检查断线重连

（1）浏览器端

    <script>
        Vue.config.productionTip = false
        var app=new Vue({
            el:'#app',
            data(){
                return{
                    msg:'',
                    name:'',
                    isshow:false,
                    list:[],
                    ws:{},
                    num:0,
                    roomid:'',
                    handle:{}   
                }
            },
            // mounted() {
            //     this.ws=new WebSocket('ws://127.0.0.1:3000');
            //     this.ws.onopen=this.onOpen;
            //     this.ws.onmsg=this.onmsg;
            //     this.ws.onclose=this.onClose;
            //     this.ws.onerror=this.onError;
            // },
            methods: {
                init() {
                    this.ws=new WebSocket('ws://127.0.0.1:3000');
                    this.ws.onopen=this.onOpen;
                    this.ws.onmessage=this. onMessage;
                    this.ws.onclose=this.onClose;
                    this.ws.onerror=this.onError;
                },
                sendmsg(){
                    this.list.push("我："+this.msg);
                    this.ws.send(JSON.stringify({
                        event:"msg",
                        msg:this.msg,
                    }))
                    this.msg=''
                },
                onOpen(){
                    console.log("打开ws："+this.ws.readyState);
                    this.ws.send(JSON.stringify({
                        event:"auth",
                        msg:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.33NBeLKafs6unecYcSJl7QUlfv3DfYvdf2TXSEPNYiY"//token数据
                    }))
                    this.ws.send(JSON.stringify({
                        event:"enter",
                        name:this.name,
                        roomid:this.roomid
                    }))
                },
                onMessage(event){
                    //用户未登录接收不到消息
                    if(!this.isshow){
                        return
                    }
                    var thismsg=JSON.parse(event.data);
                    console.log(thismsg);
                    switch(thismsg.event){
                        case 'onauth':
                            alert("请鉴权") 
                            break;
                        case 'enter':
                            this.list.push(thismsg.name+"进入聊天室");
                            break;
                        case 'out':
                            this.list.push(thismsg.name+"退出聊天室");
                            break;
                        case 'heartbeat':
                            this.checkServer()
                            this.ws.send(JSON.stringify({
                                event:"heartbeat",
                                msg:"pong"
                            }))
                            break;
                        default:
                            if(thismsg.name!==this.name){
                                this.list.push(thismsg.name+"  :"+thismsg.msg);
                            }  
                    }
                    this.num=thismsg.pnum
                },
                onClose(){
                    console.log("关闭ws:"+this.ws.readyState);
                },
                onError(){
                    console.log("出错:"+this.ws.readyState);
                    //连接失败后一秒进行断线重连
                    var that=this
                    setTimeout(function(){
                        that.init()
                    },1000)
                },
                closews(){
                    this.ws.close()
                },
                enter(){
                    if(this.name.trim()===""||this.roomid.trim()===""){
                        alert("空")
                        return 
                    } 
                    this.isshow=true;
                    this.init()
                },
                checkServer(){  
                    var that=this
                    clearTimeout(this.handle)
                    this.handle=setTimeout(function(){
                        that.onClose()
                        that.init()
                    },1000+500)
                }
            },
        })
    </script>

（2）服务器端

const WebSocket=require('ws');
const http=require('http');
const wss=new WebSocket.Server({noServer:true});
const server=http.createServer();
const jwt=require('jsonwebtoken');
const timeInterval=1000
let group={}
wss.on('connection',function connection(ws){
    ws.isAlive=true;
    ws.on('message',function(msg){
        const msgobj=JSON.parse(msg);
        if(msgobj.event=='enter'){
            ws.name=msgobj.name;
            ws.roomid=msgobj.roomid;
            if(typeof group[ws.roomid]==='undefined'){
                group[ws.roomid]=1;
            }else{
                group[ws.roomid]++;
            }
        }
        //鉴权：
        if(msgobj.event==="auth"){
            jwt.verify(msgobj.msg,"wzz",(err,decode)=>{
                if(err){
                    console.log("auth error");
                    ws.send(JSON.stringify({
                        event:"onauth",
                        msg:"please auth again"
                    }))
                    return
                }else{
                    console.log(decode);
                    ws.isAuth=true;
                    return
                }
            })
            return
        }
        if(!ws.isAuth){
            return 
        }
        //心跳监测：
        if(msgobj.event=='heartbeat'&&msgobj.msg=="pong"){
            ws.isAlive=true
            return
        }else{
            // return
        }

        wss.clients.forEach((client) => {
            //判断非自己的客户端
            if (client.readyState === WebSocket.OPEN&&client.roomid==ws.roomid){
                msgobj.name=ws.name;
                msgobj.pnum=group[ws.roomid];
                client.send(JSON.stringify(msgobj))
            }
        }) 
    });
    ws.on('close',function(msg){
        if(ws.name){
            group[ws.roomid]--;
        }
        msgobj={}
        wss.clients.forEach((client) => {
            //判断非自己的客户端
            if (client.readyState === WebSocket.OPEN&&client.roomid==ws.roomid){
                msgobj.name=ws.name;
                msgobj.pnum=group[ws.roomid];
                msgobj.event="out";
                client.send(JSON.stringify(msgobj))
            }
        }) 
    })
})
server.on('upgrade' , function upgrade( request,socket,head){
    wss.handleUpgrade( request, socket, head,function done(ws){
        wss.emit('connection',ws,request);
    })
})
setInterval(() => {
    wss.clients.forEach((ws) => {
        if(!ws.isAlive&&ws.roomid){
            group[ws.roomid]--;
            delete ws['roomid']
            return  ws.terminate()
        }
        ws.isAlive=false;
        ws.send(JSON.stringify({
            event:'heartbeat',
            pnum:group[ws.roomid],
            msg:'ping',
        }))
    }) 
},timeInterval);
server.listen(3000)

阿泽不会飞
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用nodejs搭建聊天室
HAI6545的博客
01-17 2262
搭建一个服务器 //引入fs var fs = require('fs') //引入http var http = require('http') var date = new Date() /** * @FormDate 格式化时间 * @param {*} date 当前时间 */ function FormDate(date) { return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date
Node.js - 200 多行代码实现 Websocket 协议
全栈前端精选
08-12 425
温馨提示：因微信中外链都无法点击，请通过文末的”“阅读原文”到技术博客中完整查阅版；（本文整理自技术博客） A、预备工作1、序最近正在研究 Websocke...
利用websocket实现一个聊天demo（超简单node版）
前端成长之路
12-03 1144
闲来无事做，刚好最近了解了websocket，那就利用websocket实现一个简单的聊天功能； 两个页面a,b。在a页面输入内容发送后，在b页面打印出来，反之亦然；
webSocket+Node+Js实现在线聊天（包含所有代码）
最新发布
见贤思齐焉，见不贤内自省
05-24 865
webSocket+Node+Js实现在线聊天（包含所有代码）
Zipkin-1.19.0学习系列2：Nodejs范例(Client Send,Client Receive))
weixin_34416754的博客
01-05 428
2019独角兽企业重金招聘Python工程师标准>>> ...
利用NodeJs+WebSocket做个简单的聊天室
weixin_43844158的博客
07-21 3079
WebSocket说明 WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接（就是客户端和服务器之间搭建了一条高速公路），并进行双向数据传输 Node.js说明 Node.js的本质就是运行...
基于Node.js的WebSocket通信实现
10-20
在Node.js中实现WebSocket通信，通常会借助第三方库，如`websocket`或`ws`。本例中选择了`ws`库，它是Node.js社区广泛使用的WebSocket库，具有性能优异和API简洁的特点。首先，你需要通过npm安装`ws`库： ```bash ...
Node.js websocket使用socket.io库实现实时聊天室
01-02
之前用java jsp写过一个聊天，其实实现逻辑并不难，只是大部分时间都用在UI的设计上，其实现原理就是一个基于websocket的通信，要想做一个好的聊天室，我觉得大部分精力可能更应该花在与用户的视觉层交互上。...
利用html5的websocket实现websocket聊天室
09-28
WebSocket 的应用远不止聊天室，它可以用于实时股票报价、在线游戏、协作编辑等多种场景，因为它能够提供低延迟、高效的双向通信。然而，也需要注意 WebSocket 的跨域问题和安全性，例如实施适当的认证和授权机制来...
express框架实现基于Websocket建立的简易聊天室
08-29
在本篇文章中，我们将使用Express框架实现基于Websocket建立的简易聊天室。 一、WebSocket简介 WebSocket是一种基于TCP协议的双向通信协议，它允许客户端和服务器之间进行实时通信。WebSocket协议的最大优点是它...
node.js + websocket实现一个简单的聊天室
m0_49728769的博客
10-29 483
一、websocket是什么？ WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 二、实现过程 1.前端界面显示部分 <!DOCTYPEhtml> <htmllang="en"> <head> <met...
NodeJS简易聊天室
05-09
采用Node.JS基于Express和Socket.IO构建一个简易的聊天服务器。代码虽然简单，包括前端浏览器脚本和服务器端脚本，代码量比较少，但结构上覆盖了关键的Socket.IO广播知识点,程序员可以以此快速了解到服务器向客户端浏览器推送信息的方法。由此可以启发其他的应用技术。该资源为绿色版，只要你的机子上已经安装了node，就可以直接运行。
nodejs实现的聊天室
11-09
简单的多房间聊天室，Nodejs实现多房间简易聊天室功能
使用Nodejs做websocket服务端与客户端实现即时聊天
08-07
NULL 博文链接：https://21jhf.iteye.com/blog/2139906
NodeJs终端聊天室
08-22
NodeJs终端聊天室一个是server.js服务器商程序 client.js 是客户端程序，先启动服务端，再启动客户动，及可
Websocket：vue + node 实现实时通信
爱勇宝
07-31 1160
WebSocket对于每一个前端开发人员来说是必须要掌握的，以前遇到此类问题我会使用轮询。但轮询有它自己的缺点，这里不进行赘述，希望自己能越来越好，也希望我写的笔记能给解开你的燃眉之急。...
node.js聊天室
m0_73287366的博客
05-04 194
聊天室
关于 nodejs-websocket 的 wss 设置
TorchCqs的博客
06-05 2731
2021.3.27，在写不要做微信小程序挑战后端部署时，因微信小程序需要开发者提供 wss，类似于 http + ssl，但是后端没有考虑到nodejs-websocket 在网络上相关教程之少，陷于 wss 的配置之中。 起初考虑通过 nginx 代理一手，但可能姿势不对，一直无法代理成功，nginx不熟，所以在一通搞鼓之后，放弃了nginx方案。接着是考虑更换 nodejs 的 socket 框架。主流的 websocket 是 ws 模块和 socket.io 模块，但是仔细看了一下具体业务需求：
nodejs WebSocket协议实践
在下月亮有何贵干
04-27 1126
学习一下 WebSocket 协议，在这之前我使用 nodejs-websocket 这个包解决，使用比较简单，但是我发现那样不利于自己对该协议的理解，于是我打算用比较官方的依赖 ws 包来进行 WebSocket 协议实践。
使用websocket实现聊天室
08-02
使用WebSocket实现聊天室可以通过以下步骤进行： 1. 创建WebSocket连接：在前端代码中，使用JavaScript的WebSocket对象创建与服务器的WebSocket连接。可以使用WebSocket的构造函数传入服务器的URL来创建连接。[2] ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿泽不会飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值