采用nodejs + socket.io实现简易聊天室功能（群聊 + 私聊）

全栈梦想家

已于 2024-03-07 08:56:11 修改

阅读量368

点赞数 2

分类专栏：大前端文章标签： node.js 前端 javascript vue.js

于 2023-09-08 11:49:51 首次发布

本文链接：https://blog.csdn.net/haodian666/article/details/132757138

版权

大前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

项目演示

支持群聊以及私聊
在这里插入图片描述

项目代码

index.html

<!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>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        .box {
            display: flex;
            justify-content: space-between;
            width: 800px;
            margin: 50px auto;
            text-align: center;
        }

        .box>div {
            flex: 1;
        }

        .box .center {
            flex: 2;
        }

        .box .center input {
            width: 70%;
        }

        .list {
            list-style: none;
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <div class="num">在线人数：1</div>
        </div>

        <div class="center">
            <h1 style="margin-bottom: 20px;">简易聊天室</h1>

            <!-- 输入框 -->
            <input type="text" class="ipt">

            <!-- 发送 -->
            <button class="btn">发送消息</button>

            <!-- 输入框 -->
            <input type="text" class="joinNum">

            <!-- 加入房间 -->
            <button class="joinBtn">加入房间</button>

            <ul class="list" style="margin-top: 40px;">
                <!-- <li class="list-group-item">An item</li> -->
            </ul>
        </div>

        <div class="right">
            <!-- <div>xxx已进入</div> -->
        </div>
    </div>

    <script>
        let num = document.querySelector('.num')
        let ipt = document.querySelector('.ipt')
        let btn = document.querySelector('.btn')

        let joinNum = document.querySelector('.joinNum')
        let joinBtn = document.querySelector('.joinBtn')

        let list = document.querySelector('.list')

        let left = document.querySelector('.left')
        let center = document.querySelector('.center')
        let right = document.querySelector('.right')

        let socket = io()

        const name = prompt('请输入你的名称：')
        
        //把用户名称传递给服务端
        socket.emit('join', name)

        // 监听用户已进入 | 已退出
        socket.on('join', (obj) => {
            right.innerHTML += `<div>${obj.name} ${obj.status}</div>`
        })

        // 监听用户在线人数
        socket.on('userNum', (n) => {
            num.innerHTML = `在线人数：${n} 个人`
        })

        // 点击发送按钮 发送消息
        btn.addEventListener('click', function () {
            // 将数据传递给服务端
            socket.emit('value', ipt.value)
        })

        // 键盘按下回车 发送消息
        ipt.addEventListener('keydown', function (e) {
            if (e.key !== 'Enter') return

            // 将数据传递给服务端
            socket.emit('value', ipt.value)
        })

        // 加入房间
        joinBtn.addEventListener('click', function () {
            socket.emit("joinRoom", { room: joinNum.value, value: ipt.value })
        })

        // 服务端再把数据响应回来
        socket.on('value', (value) => {
            list.innerHTML += `<li>${value}</li>`
            ipt.value = ''
        })
    </script>
</body>

</html>

index.js

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

let userNum = 0; //当前在线人数

io.on("connection", (socket) => {
  // 访问聊天室用户在线输了加1
  ++userNum;
  // 将用户在线数量实时同步给客户端
  io.emit("userNum", userNum);

  // 相应客户端传递的数据
  socket.on("value", (value) => {
    io.emit("value", `${socket.username}：${value}`);
  });

  // 监听用户进入聊天室
  socket.on("join", (name) => {
    socket.username = name;

    io.emit("join", {
      name: name,
      status: "已进入",
    });
  });

  // 离开聊天室用户在线数量减1
  socket.on("disconnect", () => {
    --userNum;
    io.emit("userNum", userNum);

    io.emit("join", {
      name: socket.username,
      status: "已退出",
    });
  });

  // 加入房间
  socket.on("joinRoom", ({ room, value }) => {
    // 加入指定的房间
    socket.join(room);

    // 在指定房间中发送消息
    io.to(room).emit("value", `${socket.username}：${value}`);
  });
});

http.listen(1231, () => {
  console.log("服务器已启动：http://localhost:1231");
});

package.json

{
  "name": "WebSocket",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.2",
    "socket.io": "^4.5.4"
  }
}