socket.io 搞定 node.js 实时消息推送-JavaScript中文网-JavaScript教程资源分享门户

Node.js作为一款非常流行的服务器端技术，其异步的特点使得其非常适合构建实时性的web应用。在这种应用中，需要实现服务端到客户端的消息推送，以实现实时性。而socket.io就是一款能够帮助我们解决这个问题的技术。

什么是Socket.io

Socket.io是一个基于Node.js的实时网络应用库，支持双向通信。其实现了WebSocket、AJAX long polling和Forever Iframe三种通信机制，使得其能够兼容不同的浏览器和环境。

Socket.io分为服务端和客户端两部分。在服务端，其主要是通过监听客户端的事件和向客户端触发事件来实现消息推送；而在客户端，则通过自己发起事件和监听服务端事件来实现双向通信。

如何使用Socket.io

安装

使用npm可以非常方便地安装Socket.io。在终端下输入以下指令即可：

npm install socket.io

服务端

在服务端，首先需要创建一个socket.io的实例，然后监听连接事件。当有客户端连接时，会触发连接事件。在连接事件中，可以监听客户端的事件和向客户端发送事件。

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

io.on('connection', function (socket) {
  console.log('Client connected');

  // 监听客户端事件
  socket.on('clientEvent', function (data) {
    console.log('Received from client: ' + data);
  });

  // 向客户端发送事件
  socket.emit('serverEvent', 'Hello client');
});

客户端

客户端需要通过socket.io的库来连接服务端，并监听服务端的事件。当收到服务端发来的事件时，客户端可以通过自己的事件来响应。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Socket.io Demo</title>
</head>

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

    // 监听服务端事件
    socket.on('serverEvent', function (data) {
      console.log('Received from server: ' + data);
    });

    // 发起自己的事件
    socket.emit('clientEvent', 'Hello server');
  </script>
</body>

</html>

在客户端中，引入socket.io的库。在与服务端的连接中，可以通过io()函数来发起连接。为了方便起见，本例中省略了连接时传递参数的部分。

实战：应用于在线聊天室

实时消息推送是应用于在线聊天室等实时性较强的应用的重要组成部分。下面我们通过实战来学习如何使用socket.io实现一个在线聊天室。

实现思路

服务端需要使用socket.io库创建一个实例，同时监听连接事件。
当有客户端连接时，将客户端加入到聊天室中，并向所有客户端发送一条欢迎消息。
客户端需要监听来自服务端的事件，同时发起自己的事件。
当有客户端发来消息时，服务端需要向其他客户端广播该消息。
当客户端断开连接时，从聊天室中删除该客户端，并向其他客户端发送退出消息。

代码实现（服务端）

// www.javascriptcn.com code example
var io = require('socket.io')();
var PORT = 3000;

var clients = [];

io.on('connection', function (socket) {
  console.log('Client connected');

  // 加入聊天室
  clients.push(socket);

  // 发送欢迎消息
  socket.emit('welcome', 'Welcome to the chat room!');

  // 监听客户端发的消息
  socket.on('chat', function (data) {
    console.log('Client message: ' + data);

    // 广播消息
    for (var i = 0; i < clients.length; i++) {
      if (clients[i] != socket) {
        clients[i].emit('chat', data);
      }
    }
  });

  // 监听断开连接事件
  socket.on('disconnect', function () {
    console.log('Client disconnected');

    // 从聊天室中删除该客户端
    clients.splice(clients.indexOf(socket), 1);

    // 广播退出消息
    for (var i = 0; i < clients.length; i++) {
      clients[i].emit('exit', 'Client exit');
    }
  });
});

io.listen(PORT);
console.log('Server listening on port ' + PORT);

代码实现（客户端）

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Socket.io Chat Room</title>
  <style>
    #chat-box {
      border: 1px solid gray;
      height: 300px;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <h1>Socket.io Chat Room</h1>
  <div id="chat-box"></div>
  <input type="text" id="message-input" placeholder="Input your message here...">
  <button id="send-button">Send</button>

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

    socket.on('welcome', function (data) {
      appendMessage(data);
    });

    socket.on('chat', function (data) {
      appendMessage(data);
    });

    socket.on('exit', function (data) {
      appendMessage(data);
    });

    document.getElementById('send-button').addEventListener('click', function () {
      var message = document.getElementById('message-input').value;
      if (message.trim() != '') {
        socket.emit('chat', message);
        document.getElementById('message-input').value = '';
      }
    });

    function appendMessage(data) {
      document.getElementById('chat-box').innerHTML += '<p>' + data + '</p>';
    }
  </script>
</body>

</html>

聊天室的界面主要由一个文本框和发送按钮、一个聊天框组成。在客户端中，需要监听服务端的欢迎消息、聊天消息和退出消息。当用户点击发送按钮时，会发起自己的事件，并将输入框中的值作为数据发送给服务端。

结语

Socket.io是一款非常强大的实时通信技术，其应用范围广泛，可以应用于聊天室、游戏、数据可视化等领域。本文通过一个在线聊天室的实例，详细介绍了Socket.io的使用方法，希望能够为大家提供帮助。

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

socket.io 搞定 node.js 实时消息推送