nodejs websocket 实现简易聊天室功能

最新推荐文章于 2024-05-05 11:29:27 发布
最新推荐文章于 2024-05-05 11:29:27 发布
阅读量792 收藏 8
点赞数
原文链接：https://blog.csdn.net/u011723584/article/details/89301012
版权

文章目录


首先说明，以下代码都是基于 Nodejs+webSocket搭建多人聊天室实现，我只是复现了一遍，画了张图供自己理解。

数据格式及大致过程简图：
在这里插入图片描述

1. 服务端 app.js 代码

const ws = require('nodejs-websocket')

const broadcast = (str) => {
    server.connections.forEach((connect) => {
        connect.sendText(JSON.stringify(str))
    })
}

const getAllChatter = ()=>{
      let chartterArr = [];
      server.connections.forEach((connect)=>{
          console.log(connect.nickname)
          chartterArr.push({name:connect.nickname})
      });
    return chartterArr;
};

const server = ws.createServer((connect) => {
    connect.on('text', (str) => {
        let data = JSON.parse(str)
        console.log(data);
        switch (data.type) {
            case 'setName': 
                connect.nickname = data.nickname
                // 广播XXX进入房间;
                broadcast({
                    type: 'serverInformation',
                    message: data.nickname + '进入房间'
                })
                // 广播更新在线用户列表
                broadcast({
                    type: 'chatterList',
                    list: getAllChatter()
                })
                break;
            case 'chat': 
                // 广播这条信息;
                broadcast({
                    type: 'chat',
                    name: connect.nickname,
                    message: data.message
                })
                break;
            default: break;
        }
    })

    connect.on('close', () => {
        broadcast({
            type: 'serverInformation',
            message: connect.nickname + '离开房间'
        })

        broadcast({
            type: 'chatterList',
            list: getAllChatter()
        })
    })

    connect.on('error', (err) => {
        console.log(err)
    })
}).listen(3000, () => {
    console.log('server running')
})

2. 客户端 app.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多人聊天室</title>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <div class="all">
        <div class = 'person'><text id="onLine">在线人数</text></div>
        <div class="contain">
            <div class="content" id="content"></div>
        </div>
        <div class="footer">
            <input placeholder="设置用户名." name="userName" id="userName"/>
            <button id="setName">设置</button>
            <textarea placeholder="输入您要发送的消息" id="message" name="message"></textarea>
            <button id="sendMessage">发送</button>
        </div>
    </div>

    <div class = "all2">
        <div class="title"><text>在线用户列表：</text></div>
        <div id="userList" class="userList">

        </div>
    </div>

    <script type="text/javascript" language="JavaScript">
        //定义全局的变量
        let ws = null;

        //封装获取时间的函数
        Date.prototype.Format = function (fmt) {
            //author: xjj
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };

        // 封装：接收后台消息后创建div 
        const createDivWithData = (data) => {
            let outer = document.createElement('div')
            let div_time = document.createElement('p')
            let div_msg = document.createElement('p')

            switch (data.type) {
                case 'serverInformation': 
                    div_time.innerHTML = new Date().Format('yyyy-MM-dd hh:mm:ss')
                    div_msg.innerHTML = data.message;
                    break;

                case 'chat':
                    div_time.innerHTML = new Date().Format('yyyy-MM-dd hh:mm:ss')
                    div_msg.innerHTML = data.name + '：' + data.message;
                    break;
                
            }

            outer.appendChild(div_time)
            outer.appendChild(div_msg)

            return outer
        }

        // 封装：向后台发送消息
        const sendMsgToServer = () => {
            let message = document.getElementById('message')
            if (!message.value) return
            let data = {
                type: 'chat',
                message: message.value
            }
            ws.send(JSON.stringify(data))
            message.value = ''
        }
    
        //封装：向后台设置用户名
        const sendNicknameToServer = () => {
            let setName = document.getElementById('setName')
            setName.onclick = () => {
                let nickName = document.getElementById('userName')
                let data = {
                    type: 'setName',
                    nickname: nickName.value
                }
                if (nickName.value){
                    ws.send(JSON.stringify(data))
                }
                setName.setAttribute('disabled', true);
                setName.style.display = 'none'
                nickName.setAttribute('disabled', true)
            }
        }

        ws = new WebSocket('ws://127.0.0.1:3000')

        ws.onopen = () => {
            sendNicknameToServer()
        }
        
        document.getElementById('sendMessage').onclick = sendMsgToServer

        ws.onmessage = (e) => {
            let data = JSON.parse(e.data)
            if (data.type == 'chatterList') {
                let list = data.list
                let length = list.length
                let chatterList = document.getElementById('userList')
                document.getElementById('onLine').innerText = `在线人数：${length}人`
                
                for(let i = 0; i < length; i++) {
                    let chatterDiv = document.createElement('p')
                    chatterDiv.innerText = list[i].name
                    chatterList.appendChild(chatterDiv)
                }
            } else {
                let con = document.getElementById('content')
                con.appendChild(createDivWithData(data))
            }
            
        }
    </script>
</body>
</html>

3. 样式代码 app.css

.all{
    width: 400px;
    height: 500px;
    border: 1px dotted grey;
    float: left;
    margin-left: 20px;
}
.person {
    width: 400px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.contain {
    width: 400px;
    height: 350px;
}

#content{
    width: 99%;
    height: 100%;
    overflow-y: auto;
}

.footer {
    width: 100%;
    height: 100px;
    border: 1px solid green;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.footer input{
    width: 70px;
    height: 50px;
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 5%;
}
.footer button{
    width: 50px;
    height: 50px;
    float: left;
    background-color: deepskyblue;
    border-radius: 10%;
    margin-right: 5px;
}
.footer textarea{
    width: 200px;
    height: 80px;
    overflow-y: scroll;
    float: left;
    margin-right: 5px;
    border-radius: 5%;
}

/*在线用户的列表*/
.all2{
    width: 150px;
    height: 500px;
    border:1px dotted green;
    float: left;
}

.title{
    width: 150px;
    height:50px;
    line-height: 50px;
    background-color: bisque;
}

.userList{
    overflow-y: scroll;
    height: 450px;
}

4. nodemon 辅助开发

安装：npm i nodemon -g --save
启动：nodemon app
避免每次修改服务器代码都要手动重启服务器

越来越棒鸭
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Node.js】WebSocket 全面解析+实战演练——（Nodejs实现简易聊天室）
Allen-
04-29 1420
WebSocket是一种在单个TCP连接上提供全双工通信能力的协议。简单来说，它允许客户端和服务器互相推送数据，无需重复建立连接，大大提升了交互效率和实时性🚀。WebSocket为现代Web应用带来了革命性的实时通信能力，无论是即时通讯、实时数据分析还是游戏开发，它都是不可或缺的工具箱成员🛠️。
nodeJS+websocket创建聊天室
weixin_43970400的博客
05-19 648
nodeJS websocket 聊天室 websocket创建简单的聊天室 多人聊天室
NodeJS实现一个聊天室功能
10-15
主要介绍了NodeJS实现一个聊天室功能，本文实例截图相结合给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
nodejs-chatroom:NodeJS聊天室版本0.1。 基本实现
05-14
nodejs聊天室 NodeJS聊天室版本0.1。 基本实现。 演示版
nodejs的ws+vue3编写聊天室的demo
lucky_ly的博客
05-05 495
nodejs编写ws服务是非常简单高效的，nodejs有众多的实现ws的库，如ws,SocketIO等，nodejs的事件线程是单线程的，所以不要在事件线程内做阻塞性的操作，耗时的操作交给工作线程或者子进程操作。我使用nodejs+vue3实现了写了个简单的聊天室demo。
nodejs+websocket简易聊天室的学习
weixin_45993900的博客
05-01 1817
老师要求做一个仿探探 的小程序项目，我很不幸的成为了混子小组里的一个不那么混的混子，然后恰逢假期，学习了一下nodejs上传图片并将相对路径保存到数据库， 本以为完成这个就可以开摆，但我太天真了，几个老外比我还能摆，一放假就不知道迷失在了哪个窑子。只好再对聊天室，聊天功能小作研究，以下是我记录下的一些重点，以供大家参考。 websocket 实现简单的客户端与服务端连接 先放前端代码 <!DOCTYPE html> <html lang="en"> <head>
websocket实现简易聊天室
qq_47199913的博客
04-27 3466
websocket
WebSocket+NodeJS实现简单的聊天室功能
weixin_62328265的博客
03-01 621
WebSocket+NodeJS实现简单的聊天室功能。
前端websocket实现简易聊天室
qq_43742385的博客
11-17 2745
分为客户端和服务端，客户端就是一个简单的html页面，服务端使用node进行编写。具体代码如下 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>websoket</title> </head> <body> <h1>chat room</h1> <in.
Nodejs实现多房间简易聊天室功能
10-19
【Node.js实现多房间简易聊天室功能】 在本文中，我们将探讨如何使用Node.js构建一个支持多房间聊天的简易聊天室。首先，我们要明白这个聊天室有两个主要组成部分：前端界面和服务器端。前端用于用户交互，而服务器...
nodejs和react实现即时通讯简易聊天室功能
10-16
在本文中，我们将探讨如何使用Node.js和React构建一个简易的即时通讯聊天室。这个功能的实现基于Node.js作为后端服务器，React作为前端框架，同时利用Socket.IO库来处理实时通信。 首先，我们需要初始化一个新的...
nodejs&websocket简易聊天demo
05-04
在这个"nodejs&websocket简易聊天demo"中，我们将探讨如何使用Node.js和WebSocket来创建一个简单的在线聊天应用。 1. **Node.js基础知识** - **安装Node.js**: 首先需要在开发环境中安装Node.js，这将提供运行...
websocket简易聊天室
04-30
1、解压压缩包 ...当用户点击连接，连接成功时相当于进入聊天室，将会返回用户唯一id至前端，并且提示xxx用户已连接，接下来就可以发送消息，两个html会实时呈现消息内容，即简易的“聊天室”功能~
基于Node.js + WebSocket 的简易聊天室
findhappy117的博客
09-16 676
代码地址如下：http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript。Node.js是基于Chrome浏览器运行JavaScript时建立的一个平台。该平台可以非常快速以及高效的执行JavaScript，并且性能非常优越。Node.js还优化了一些特殊用例，内置了常用...
vue+websocket+nodejs创建聊天室
xiaoyingyings的博客
03-04 2653
前言 上一篇我们已经讲了如何使用websocket结合ndde.js实现双向通信。 下面我们来讲下，通过websocket和nodejs-websocket，构建一个小型聊天室。 先讲下大概思路： 客户端需要传给服务器当前登陆者的昵称和uid，服务端收到数据后，把信息同步广播给当前聊天室内的所有人。 ...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
nodejs websocket聊天室
03-16
Node.js WebSocket聊天室是一个基于Node.js和WebSocket技术的实时聊天室应用程序。它允许用户在浏览器中实时聊天，并且可以支持多个用户同时在线聊天。该应用程序使用Node.js作为服务器端技术，WebSocket作为实时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值