Node.js 中如何集成 Socket.IO？-JavaScript中文网-JavaScript教程资源分享门户

Socket.IO 是一个实时的、双向的、基于事件的通信库，它能够让浏览器和服务器之间建立实时、快速、可靠的通信。在前端开发中，Socket.IO 是一个非常重要的技术，它可以让我们实现实时聊天、实时游戏、实时数据更新等功能。在本文中，我们将介绍如何在 Node.js 中集成 Socket.IO。

安装 Socket.IO

首先，我们需要安装 Socket.IO。可以使用 npm 进行安装：

npm install socket.io

创建 Socket.IO 服务器

在 Node.js 中，我们可以使用 http 模块来创建一个 HTTP 服务器。在这个服务器上，我们可以使用 Socket.IO 来实现实时通信。下面是一个简单的示例代码：

const http = require('http');
const socketIO = require('socket.io');

const server = http.createServer((req, res) => {
  res.end('Hello World!');
});

const io = socketIO(server);

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

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

在上面的代码中，我们首先创建了一个 HTTP 服务器，并使用 socket.io 模块创建了一个 Socket.IO 服务器。然后，我们监听了 connection 事件，当有客户端连接到服务器时，就会触发这个事件，并打印一条日志。

在客户端使用 Socket.IO

在客户端，我们可以使用 socket.io-client 模块来连接到 Socket.IO 服务器，并进行实时通信。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Socket.IO Demo</title>
</head>
<body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    socket.on('connect', () => {
      console.log('connected to server');
    });
  </script>
</body>
</html>

在上面的代码中，我们首先引入了 socket.io.js 文件，然后使用 io() 方法连接到 Socket.IO 服务器。当连接成功后，就会触发 connect 事件，并打印一条日志。

实现实时聊天室

最后，我们来看一个完整的示例：实现一个简单的实时聊天室。下面是服务器端的代码：

const http = require('http');
const socketIO = require('socket.io');

const server = http.createServer((req, res) => {
  res.end('Hello World!');
});

const io = socketIO(server);

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

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

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

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

在上面的代码中，我们监听了 connection 事件，并在这个事件中监听了 disconnect 事件和 chat message 事件。当有客户端连接到服务器时，就会触发 connection 事件；当客户端断开连接时，就会触发 disconnect 事件；当客户端发送消息时，就会触发 chat message 事件，并将消息发送给所有连接到服务器的客户端。

下面是客户端的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Socket.IO Chat</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font: 13px Helvetica, Arial;
    }
    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }
    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }
    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #messages li {
      padding: 5px 10px;
    }
    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const form = document.querySelector('form');
    const input = document.querySelector('#m');
    const messages = document.querySelector('#messages');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    socket.on('chat message', (msg) => {
      const li = document.createElement('li');
      li.textContent = msg;
      messages.appendChild(li);
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了 HTML、CSS 和 JavaScript 来实现一个简单的聊天室。当用户在输入框中输入消息并点击发送按钮时，就会将消息发送到服务器；当服务器接收到消息后，就会将消息发送给所有连接到服务器的客户端，并将消息显示在页面上。

总结

本文介绍了如何在 Node.js 中集成 Socket.IO，并实现了一个简单的实时聊天室。Socket.IO 是前端开发中非常重要的一个技术，它可以让我们实现实时聊天、实时游戏、实时数据更新等功能。希望本文能够对大家学习 Socket.IO 有所帮助。

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