Socket.io 实现长轮询的原理及使用方法-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常需要实时更新页面数据。而在 Web 开发早期，很多人采用轮询的方式去实现这个功能。轮询就是每隔一段时间向服务器发送请求，看看有没有新数据。这种方式非常消耗资源，因为每过一段时间就要发送一次请求，而且还有延迟。Socket.io 因此成为了一种更有效的实时通信方式。它实现了长轮询技术，可以实时更新数据而且资源消耗更小。本篇文章就来详细地介绍 Socket.io 实现长轮询的原理及使用方法。

什么是 Socket.io？

Socket.io 是一个基于 Node.js 的实时网络库，是实现实时通信的最佳选择。 Socket.io 的核心原理是 WebSocket 协议，WebSocket 是一种新的协议，它可以在浏览器和服务器之间建立持久性的连接，一旦建立连接，就可以进行双向通信。但是在某些客户端和服务器之间，可能存在使用 HTTP 协议的代理，这时候就不能使用 WebSocket 协议， Socket.io 就提供了可靠的方式来处理这个问题。

长轮询原理

在 WebSocket 出现之前，我们实现实时通信使用的是长轮询技术。长轮询技术的原理是不断向服务器发送请求，看看有没有新数据。

如图，客户端发送请求至服务端，如果产生新的数据则立即返回结果给客户端，如果没有新数据，则保持连接状态，直到新数据产生，随即返回结果给客户端。这个过程称为“长轮询”。

Socket.io 长轮询使用方法

下面，我们就详细讲一下如何使用 Socket.io 实现长轮询技术。

安装

首先，在项目的根目录下，使用 npm 安装 Socket.io。

$ npm install socket.io

服务端

接下来，我们就可以在服务端使用 Socket.io 了。

const app = require('http').createServer(handler);
const io = require('socket.io')(app);

app.listen(3000);

io.on('connection', function (socket) {
  console.log('A user connected: ' + socket.id);
});

第一步，我们创建了一个 Node.js 服务，并利用了 Node.js 自带的 http 模块的 createServer() 方法创建了一个服务器。

第二步，我们使用 Socket.io 的 listen() 方法监听了服务器上的所有连接，并且我们定义了一个回调函数，当有客户端连接到服务器时，该函数会被执行。

客户端

接下来，我们可以为客户端创建一个 HTML 文件，通过以下代码引入 Socket.io 官方的 socket.io.js 文件。

<script src="/socket.io/socket.io.js"></script>

为了方便使用，我们可以为每个连接创建一个 Socket 对象。

const socket = io();

同时，我们还可以监听 connect 和 disconect 事件。

socket.on('connect', function () {
  console.log('Connected');
});

socket.on('disconnect', function () {
  console.log('Disconnected');
});

最后，为了实现实时通信，我们需要使用 emit() 方法来发送数据。在能够接收数据的地方，使用 on() 方法来监听来自服务器的数据。

socket.on('message', function (data) {
  console.log(data);
});

socket.emit('message', 'Hello, Socket.io');

示例代码

下面是一个完整的例子，为了展示如何使用 Socket.io 实现长轮询技术，我们编写了一个简单的应用程序。它会在 Web 浏览器上定期（每隔 1 秒钟）检查是否有新消息。

服务端

-- -------------------- ---- -------
----- --- - --------------------------------------
----- -- - --------------------------

----- -- - --------------
----- ---- - ----------------

-----------------

------------------- -------- -------- -
  -------------- ---- ---------- - - -----------

  -------------------- -- -
    ------------------- ------------
  -- ------
---

-------- ------------ ---- -
  -- ----------------------------- -- -- -
    -------
  -

  --- ---------

  -- -------- --- ---- -
    -------- - -------------------- --------------
  - ---- -
    -------- - -------------------- ---------
  -

  --------------------- -------- ----- ----- -
    -- ----- -
      ------------------ - --------------- ------------ ---
      -------------- --- ----------
      ------ ----------
    - ---- -
      ------------------ - --------------- ----------- ---
      ----------------
    -

    ----------
  ---
-

客户端

-- -------------------- ---- -------
--------- -----
------

------
    ----- ----------------
    ---------------- ---- ------- ---------------
-------

------
    ------------- ---- ------- ------------

    -- --------------

    ------- ---------------------------------------
    --------
        ----- ------ - -----

        -------------------- -------- -- -
            -------------------------
        ---

        ----------------------- -------- -- -
            ----------------------------
        ---

        ----------------- -------- ------ -
            ----------------------------------------- - --- ----------------------------
        ---
    ---------
-------

-------

总结

本文详细讲解了 Socket.io 实现长轮询技术的原理以及使用方法，让读者了解了 Socket.io 在实时通信中的应用。在实际开发中，合理的选择合适的技术，不仅能够减小系统的资源开销，也能提高系统的灵活性和可扩展性，让 Web 应用在实时性方面更加出色。

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