Socket.io 的多房间聊天室的实现-JavaScript中文网-JavaScript教程资源分享门户

Socket.io 是一个建立实时网络应用程序的 JavaScript 库，它具有优秀的性能和稳定性，可以帮助我们轻松地实现实时通信。在实际应用中，我们经常需要实现多房间聊天室，本文将介绍如何使用 Socket.io 实现多房间聊天室。

先决条件

在开始本文的教程之前，你需要有以下技能：

掌握基础的 JavaScript、HTML 和 CSS 知识。
熟悉 Node.js 环境和 Express 框架。
熟悉 Socket.io 库。

步骤

以下是实现多房间聊天室的步骤。

步骤1：安装依赖

我们需要在 Node.js 中安装 Socket.io 库和 Express 框架，通过运行以下命令来安装这些库：

$ npm install express socket.io --save

步骤2：创建服务器

我们通过 Node.js 创建一个服务器，同时使用 Express 框架和 Socket.io 库来实现服务器功能。这里的 server.js 文件代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const httpServer = require('http').Server(app);

const io = require('socket.io')(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
    transports: ['websocket']
  }
});

app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', function(socket) {
  console.log('A user connected');

  socket.on('joinRoom', function(room) {
    socket.join(room);
    console.log(`A user joined room ${room}`);
  });

  socket.on('chatMessage', function(message) {
    io.to(message.room).emit('message', message);
  });

  socket.on('disconnect', function() {
    console.log('A user disconnected');
  });
});

httpServer.listen(3000, function() {
  console.log('Server is listening on port 3000');
});

在代码中，我们使用了 Express 框架创建了一个 web 服务器，同时使用 Socket.io 库实现了服务器的功能。

步骤3：创建客户端

我们需要在客户端使用 Socket.io 库，以便与服务器建立连接。在这里，我们创建一个公共聊天室页面，让用户可以选择加入不同的房间。以下是该页面的 HTML，CSS 和 JavaScript 代码：

HTML 代码：

// javascriptcn.com 代码示例

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>Socket.io Chatroom</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Socket.io Chatroom</h1>

        <div class="row">
          <div class="col-md-3">
            <div class="rooms">
              <h3>Rooms</h3>
              <ul id="room-list">
                <li><a href="#" onclick="joinRoom('room-1')">Room 1</a></li>
                <li><a href="#" onclick="joinRoom('room-2')">Room 2</a></li>
              </ul>
            </div>
          </div>

          <div class="col-md-9">
            <div class="chat-window">
              <div id="chat-output"></div>

              <form id="chat-form">
                <input type="text" id="message-input">
                <button type="submit" id="send-button">Send</button>
              </form>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.socket.io/socket.io-3.1.0.min.js"></script>
  <script src="script.js"></script>

</body>

</html>

CSS 代码：

// javascriptcn.com 代码示例
.container {
  margin-top: 50px;
}

.rooms {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

.chat-window {
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
  overflow-y: scroll;
}

.chat-window #chat-output {
  margin-bottom: 10px;
}

.form-control {
  margin-bottom: 10px;
}

JavaScript 代码：

// javascriptcn.com 代码示例
const socket = io.connect('http://localhost:3000');

function joinRoom(room) {
  socket.emit('joinRoom', room);

  document.querySelector('#chat-output').innerHTML = "<p>You joined room " + room + "</p>";

  document.querySelector('#chat-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const messageInput = document.querySelector('#message-input');
    const message = messageInput.value;

    socket.emit('chatMessage', {room: room, message: message});

    messageInput.value = '';
  });

  socket.on('message', function(message) {
    document.querySelector('#chat-output').innerHTML += "<p>" + message.message + "</p>";
  });
}

步骤4：运行程序

最后，我们需要启动 Node.js 服务器，使用以下命令：

$ node server.js

在浏览器中，输入 http://localhost:3000，进入公共聊天室页面，选择 "Room 1" 或 "Room 2"，并开始聊天。你应该可以在房间内看到其他用户发送的消息。

总结

在本文中，我们介绍了如何使用 Socket.io 库实现多房间聊天室。我们创建了一个服务器，将客户端连接到房间中，并在客户端上显示用户名，以及将消息发送到所有房间中。这项任务可能看起来很棘手，但有了 Socket.io 库的帮助，我们可以轻松地实现它。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654f20db7d4982a6eb822f15