Node.js 中 Socket.io 的使用方法及案例分享

Socket.io 是一个实时的、双向通信的 JavaScript 库，它可以让我们轻松地在客户端和服务器之间建立实时的通信连接。在前端开发中，Socket.io 可以用来实现聊天室、在线游戏、实时数据更新等功能。本文将详细介绍 Node.js 中 Socket.io 的使用方法，并分享几个使用案例。

安装 Socket.io

在使用 Socket.io 之前，我们需要先安装它。可以通过 npm 进行安装，命令如下：

npm install socket.io

Socket.io 基本用法

服务端

在 Node.js 中，我们可以使用 Socket.io 模块来创建一个实时通信的服务器。下面是一个简单的例子：

// www.javascriptcn.com code example
const io = require('socket.io')();

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);
  });
});

io.listen(3000, () => {
  console.log('listening on *:3000');
});

上面的代码创建了一个 Socket.io 服务器，监听 3000 端口。当有客户端连接到服务器时，会触发 connection 事件。在连接事件的回调函数中，我们可以处理客户端发送过来的消息，并通过 emit 方法将消息发送给所有连接到服务器的客户端。当客户端断开连接时，会触发 disconnect 事件。

客户端

在客户端中，我们需要引入 Socket.io 的客户端库。可以通过 CDN 或者 npm 安装在本地使用。下面是一个简单的例子：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Chat Example</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      document.querySelector('form').addEventListener('submit', (e) => {
        e.preventDefault();
        const input = document.querySelector('#m');
        socket.emit('chat message', input.value);
        input.value = '';
      });

      socket.on('chat message', (msg) => {
        const li = document.createElement('li');
        li.textContent = msg;
        document.querySelector('#messages').appendChild(li);
      });
    </script>
  </head>
  <body>
    <ul id="messages"></ul>
    <form>
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

上面的代码创建了一个基本的聊天室页面。当用户输入消息并点击发送按钮时，客户端会通过 emit 方法将消息发送给服务器。当服务器收到消息后，会通过 emit 方法将消息发送给所有连接到服务器的客户端。客户端通过 on 方法监听服务器发送过来的消息，然后将消息添加到聊天室页面上。

Socket.io 案例分享

实时聊天室

下面是一个简单的实时聊天室的例子：

// www.javascriptcn.com code example
const io = require('socket.io')();

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);
  });
});

io.listen(3000, () => {
  console.log('listening on *:3000');
});

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Chat Example</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      document.querySelector('form').addEventListener('submit', (e) => {
        e.preventDefault();
        const input = document.querySelector('#m');
        socket.emit('chat message', input.value);
        input.value = '';
      });

      socket.on('chat message', (msg) => {
        const li = document.createElement('li');
        li.textContent = msg;
        document.querySelector('#messages').appendChild(li);
      });
    </script>
  </head>
  <body>
    <ul id="messages"></ul>
    <form>
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

实时在线游戏

下面是一个简单的实时在线游戏的例子：

// www.javascriptcn.com code example
const io = require('socket.io')();

let players = {};

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

  socket.on('disconnect', () => {
    console.log('user disconnected');
    delete players[socket.id];
    io.emit('update players', players);
  });

  socket.on('update player', (player) => {
    console.log('update player: ' + JSON.stringify(player));
    players[socket.id] = player;
    io.emit('update players', players);
  });
});

io.listen(3000, () => {
  console.log('listening on *:3000');
});

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Game Example</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const canvas = document.querySelector('#canvas');
      const ctx = canvas.getContext('2d');

      socket.on('update players', (players) => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        Object.values(players).forEach((player) => {
          ctx.fillStyle = player.color;
          ctx.fillRect(player.x, player.y, player.width, player.height);
        });
      });

      canvas.addEventListener('mousemove', (e) => {
        const player = {
          x: e.clientX,
          y: e.clientY,
          width: 50,
          height: 50,
          color: '#ff0000',
        };
        socket.emit('update player', player);
      });
    </script>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
  </body>
</html>

上面的代码创建了一个简单的在线游戏。当玩家移动鼠标时，客户端会通过 emit 方法将玩家的位置信息发送给服务器。服务器会将所有玩家的位置信息发送给客户端，然后客户端根据位置信息更新画布。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d22fc5a941bf7134429de4