使用 Socket.io 构建实时应用：聊天室示例

Socket.io 是一个流行的 JavaScript 库，用于在 Web 应用程序中实现实时通信和实时数据传输。它基于 WebSocket 技术，并提供了简单而强大的 API，使得构建实时应用程序变得容易。本文将引导您使用 Socket.io 构建一个简单的聊天室示例，以展示 Socket.io 的基本用法和功能。

安装和初始化项目首先，确保您已经安装了 Node.js，并使用 npm 或 yarn 初始化一个新的项目。

$ npm init -y
# 或
$ yarn init -y

然后，通过以下命令安装 Socket.io：

$ npm install socket.io
# 或
$ yarn add socket.io

创建服务器端应用在项目的根目录下创建一个名为 server.js（或其他任意名称）的文件，并导入 Socket.io：

const express = require('express');
const app = express();
const server = require('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('Received message:', message);

    // 广播消息给所有客户端
    io.emit('chat message', message);
  });

  // 监听客户端断开连接事件
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

// 启动服务器
server.listen(3000, () => {
  console.log('Server started on port 3000');
});

创建客户端应用在项目的根目录下创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Chat Room</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="chat-form">
    <input id="message-input" autocomplete="off" />
    <button>Send</button>
  </form>

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

    // 监听服务端发送的消息
    socket.on('chat message', (message) => {
      const li = document.createElement('li');
      li.textContent = message;
      document.getElementById('messages').appendChild(li);
    });

    // 监听表单提交事件
    document.getElementById('chat-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const messageInput = document.getElementById('message-input');
      const message = messageInput.value.trim();

      if (message) {
        // 发送消息给服务端
        socket.emit('chat message', message);
        messageInput.value = '';
      }
    });
  </script>
</body>
</html>

启动应用最后，通过运行以下命令启动服务器端应用：

$ node server.js

在浏览器中打开 http://localhost:3000，您将看到一个简单的聊天室界面。您可以在输入框中输入消息并点击发送按钮，消息将实时显示在聊天室中，同时其他连接到聊天室的客户端也会收到相同的消息。

这只是一个简单的 Socket.io 聊天室示例，您可以根据自己的需求扩展和定制它。Socket.io 提供了许多其他功能，如房间管理、私人消息、广播事件等，您可以在官方文档中了解更多信息。

通过 Socket.io，您可以轻松构建具有实时功能的应用程序，如聊天应用、协同编辑工具、实时游戏等。祝您在使用 Socket.io 构建实时应用程序的过程中取得成功！

使用 Socket.io 构建实时应用：聊天室示例

微信扫一扫：分享