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

Socket.io 是一个基于 Node.js 的实时应用程序框架，可以方便地实现实时通信。多人聊天室是一个典型的实时应用场景，本文将详细介绍如何使用 Socket.io 实现多人聊天室。

简介

Socket.io 是一个基于 WebSocket 的实时应用程序框架，它可以在客户端和服务器之间建立一个持久的双向连接，实现实时通信。Socket.io 支持多种传输方式，包括 WebSocket、Ajax 轮询、JSONP 等，可以自动选择最佳的方式进行通信。

多人聊天室是一个典型的实时应用场景，它可以让多个用户在同一个页面上进行实时聊天。使用 Socket.io 实现多人聊天室需要以下步骤：

创建一个 Socket.io 服务器
在客户端连接 Socket.io 服务器
在客户端发送消息到服务器
在服务器接收消息并广播给所有客户端
在客户端接收广播消息并显示在页面上

接下来将详细介绍如何实现这些步骤。

创建 Socket.io 服务器

首先需要安装 Socket.io：

npm install socket.io

然后在 Node.js 中创建一个 Socket.io 服务器：

const io = require('socket.io')(server);

其中 server 是一个 HTTP 服务器，可以使用 Node.js 的 http 模块创建：

const http = require('http');
const server = http.createServer((req, res) => {
  // 处理 HTTP 请求
});

接下来需要监听客户端连接事件：

io.on('connection', (socket) => {
  console.log('a user connected');
});

这里的 socket 是一个表示客户端连接的对象，可以使用它来发送和接收消息。

连接 Socket.io 服务器

在客户端需要连接 Socket.io 服务器：

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
</script>

这里的 /socket.io/socket.io.js 是 Socket.io 客户端脚本的地址，可以使用 Node.js 的 express 模块提供静态文件服务：

const express = require('express');
const app = express();
app.use(express.static('public'));

发送消息到服务器

在客户端可以使用 socket.emit() 方法向服务器发送消息：

socket.emit('chat message', message);

其中 chat message 是消息类型，message 是消息内容。

接收消息并广播给所有客户端

在服务器需要监听 chat message 消息类型：

socket.on('chat message', (message) => {
  console.log('message: ' + message);
  io.emit('chat message', message);
});

其中 io.emit() 方法可以将消息广播给所有客户端。

接收广播消息并显示在页面上

在客户端需要监听 chat message 消息类型：

socket.on('chat message', (message) => {
  const li = document.createElement('li');
  li.textContent = message;
  messages.appendChild(li);
});

其中 messages 是一个 <ul> 元素，用来显示聊天记录。

示例代码

以下是一个完整的多人聊天室示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chat Room</title>
  <style>
    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #messages li {
      padding: 5px 10px;
    }
    #messages li:nth-child(odd) {
      background-color: #f1f1f1;
    }
    #input {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <div id="input">
    <input id="message" type="text">
    <button id="send">Send</button>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const messages = document.getElementById('messages');
    const message = document.getElementById('message');
    const send = document.getElementById('send');
    send.addEventListener('click', () => {
      socket.emit('chat message', message.value);
      message.value = '';
    });
    socket.on('chat message', (message) => {
      const li = document.createElement('li');
      li.textContent = message;
      messages.appendChild(li);
    });
  </script>
</body>
</html>

在 Node.js 中需要创建一个 HTTP 服务器并监听 Socket.io 连接事件：

const http = require('http');
const express = require('express');
const app = express();
app.use(express.static('public'));
const server = http.createServer(app);
const io = require('socket.io')(server);
io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('chat message', (message) => {
    console.log('message: ' + message);
    io.emit('chat message', message);
  });
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});
server.listen(3000, () => {
  console.log('listening on *:3000');
});

启动 Node.js 服务器后即可在浏览器中访问多人聊天室。

总结

本文介绍了如何使用 Socket.io 实现多人聊天室，包括创建 Socket.io 服务器、连接 Socket.io 服务器、发送消息到服务器、接收消息并广播给所有客户端、接收广播消息并显示在页面上等步骤。使用 Socket.io 可以方便地实现实时通信，适用于多种实时应用场景。

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