node中socket.io的事件使用详解

下面我将详细讲解“node中socket.io的事件使用详解”的攻略。

介绍

Socket.IO 是一个实时应用程序框架，可构建可靠的实时应用程序。它使实时和双向事件基于 WebSockets 易于使用，同时仍支持旧的连接机制，如 HTTP 长轮询。

Socket.IO 是基于事件的，它可以用来创建实时的数据传输、实时聊天应用程序等。

安装

使用 npm 包管理器安装 Socket.IO 模块：

npm install socket.io

使用

首先，启动 Socket.IO 服务器：

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

然后，定义事件处理程序：

io.on('connection', function(socket) {
  socket.on('event', function(data) {
    console.log(data);
  });
});

以上代码中，io.on('connection') 是 Socket.IO 的默认连接事件。当客户端连接到服务器时，将运行此事件。

当客户端触发 event 事件时，将运行 socket.on('event') 事件，并输出 data。

示例

以下是一个简单的聊天应用程序，展示了 Socket.IO 的使用：

// server.js
const io = require('socket.io')(3000);
io.on('connection', function(socket) {
  // 接收客户端消息
  socket.on('message', function(data) {
    // 广播消息给所有客户端
    io.emit('message', data);
  });
});

// client.html
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  const message = document.getElementById('message');
  const send = document.getElementById('send');
  const messages = document.getElementById('messages');

  // 发送消息给服务器
  send.addEventListener('click', function() {
    socket.emit('message', message.value);
    message.value = '';
  });

  // 接收服务器消息
  socket.on('message', function(data) {
    messages.innerHTML += '<li>' + data + '</li>';
  });
</script>

在该示例中，服务器监听 message 事件并将其广播给所有客户端。客户端发送消息并监听服务器广播的消息。

另一个示例是实现一个简单的多人游戏：

// server.js
const io = require('socket.io')(3000);
const players = [];

io.on('connection', function(socket) {
  // 添加新玩家到列表
  players.push(socket.id);

  // 向客户端发送所有玩家
  io.emit('players', players);

  // 移动玩家
  socket.on('move', function(data) {
    const index = players.indexOf(socket.id);
    players[index] = data;
    io.emit('players', players);
  });

  // 客户端断开连接
  socket.on('disconnect', function() {
    const index = players.indexOf(socket.id);
    players.splice(index, 1);
    io.emit('players', players);
  });
});

// client.html
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  const game = document.getElementById('game');

  // 接收所有玩家
  socket.on('players', function(data) {
    // 清空游戏界面
    game.innerHTML = '';

    // 添加所有玩家到游戏界面
    for (let i = 0; i < data.length; i++) {
      const div = document.createElement('div');
      div.setAttribute('class', 'player');
      div.setAttribute('id', data[i]);
      game.appendChild(div);
    }
  });

  // 移动玩家
  document.addEventListener('keydown', function(event) {
    const player = document.getElementById(socket.id);
    switch(event.keyCode) {
      case 37:
        player.style.left = player.offsetLeft - 10 + 'px';
        break;
      case 38:
        player.style.top = player.offsetTop - 10 + 'px';
        break;
      case 39:
        player.style.left = player.offsetLeft + 10 + 'px';
        break;
      case 40:
        player.style.top = player.offsetTop + 10 + 'px';
        break;
    }
    socket.emit('move', player.getBoundingClientRect());
  });
</script>

在该示例中，服务器监听 move 事件并更新所有玩家的位置。客户端接收所有玩家和 keydown 事件并将事件发送到服务器。再将玩家的位置更新发送给服务器。

以上是使用 Socket.IO 的事件使用详解及示例。