在许多应用程序中，实时通知是一个关键功能。实时通知可以让用户在应用程序中发生变化时及时获知这些变化。在本文中，我们将使用 Socket.io 实现一个实时快递单状态变更提醒的功能，可以让用户在快递单状态更新时立即获得通知。
Socket.io 简介
Socket.io 是一个实现实时应用程序的 JavaScript 库，它允许应用程序的不同部分进行实时通信。Socket.io 可以用于服务器端和客户端，因此可以实现完整的双向通信。
Socket.io 需要一个底层传输层，它支持多种传输方式，包括轮询、长轮询、Websockets 以及服务器发送事件。
实现实时快递单状态变更提醒
我们将使用 Node.js 和 Express 框架作为我们的服务器端，以及 Socket.io 作为我们的通信库，同时使用一个外部的快递查询 API 进行查询快递单的状态。
安装依赖项
首先，我们需要安装一些必要的依赖项。我们将使用以下命令安装这些依赖项：
npm install express socket.io axios cors
- express：Express 是一个基于 Node.js 平台的 Web 应用程序框架，它可以帮助我们快速开发 Web 应用程序。
- socket.io：Socket.io 是一个实时通信库，它允许应用程序的不同部分进行实时通信。
- axios：Axios 是一个基于 Promise 的 HTTP 客户端，它可以轻松地发送 HTTP 请求并处理响应。
- cors：CORS 是一个 Node.js 中间件，它可以处理跨域请求。
创建一个 Express 服务器
我们现在可以创建一个 Express 服务器，代码如下：
const express = require('express');
const app = express();
const server = app.listen(3000, () => {
console.log('listening on *:3000');
});添加 Socket.io 支持
使用 Socket.io 完成实时通信非常容易。我们只需要在我们的 Express 服务器中添加以下代码：
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
});这将启动一个 Socket.io 服务器，并监听连接事件。每当有客户端连接到服务器时，都会发出一个“connection”事件。我们可以在此处添加任何我们想要执行的代码。
添加快递查询 API
现在，我们需要使用一个外部的快递查询 API 来查询快递单的状态。我们将使用 快递 100 的 API。我们需要使用以下代码向我们的 Express 服务器添加 API：
-- -------------------- ---- -------
----- ----- - -----------------
----- ---- - ----------------
----------------
-- ------- -----
------------------------- ----- ----- ---- -- -
----- - ------ - - -----------
----- --- - -----------------------------------------------------------------
--- -
----- ------ - ----- ---------------
----------------------------------
- ----- ------- -
---------------------- ------ ------------- ---
-
---我们首先导入 axios 和 cors，然后使用 app.use(cors()) 允许跨域请求。接下来，我们添加了一个 Express 路由 /track/:number。该路由允许客户端使用快递单号查询快递单的状态。我们使用 axios 来发送 HTTP 请求，并返回响应。
查询快递单状态并发送状态变更通知
我们将使用 setInterval 函数轮询快递单的状态，然后将状态数据发送到客户端。我们还将使用 Socket.io 将状态变更通知发送到客户端。
首先，我们将在 io.on('connection') 回调函数中添加以下代码：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
--- -----------
------------------ -------- -- -
--------------------------
----- ---- - ----- -- -- -
--- -
----- -------- - ----- ---------------------------------------------------
----- ---- - --------------
-- ----- -- --------- -- ---------------- - -- -
----- ------ - ---------------------
-- ------------------ --- ------- -
--------------------- --------
-
-
- ----- ------- -
---------------------------
-
--
-------
---------- - ----------------- ------
---
----------------------- -- -- -
--------------------------
----------------- ---------------
---
---当客户端连接到 Socket.io 服务器时，我们将创建一个名为 intervalId 的变量，用于保存 setInterval 函数的 ID。我们还将监听客户端的 track 事件，每当客户端发出此事件时，我们都将清除 intervalId 并使用 setInterval 轮询快递单状态。轮询间隔为 5 秒。
我们使用 axios 发送 HTTP GET 请求来获取快递单状态。我们检查响应是否包含状态数据，如果有一个或多个状态数据，则发出状态变更通知。我们还检查 socket.readyState，以确保客户端仍然连接到服务器。
最后我们还监听 disconnect 事件，如果客户端断开连接，我们将清除 intervalId。
创建客户端
现在我们将创建一个客户端，使用 Socket.io 和 Vue.js。这是一个基本的 Vue.js 组件：
-- -------------------- ---- -------
----------
-----
--------- ---- -------- ------------
------ ----------- ---------------- --
------- -----------------------------
----
--- --------------- ------ -- --------- --------------- ------ -------
-----
------
-----------
--------
------ -- ---- -------------------
------ ------- -
----- -------------
------ -
------ -
------- ---
--------- ---
--
--
-------- -
------- -
----- ------ - ------------------------------------
-------------------- -------------
------------------- -------- -- -
--------------------
---------------------------
---
--
--
--
---------当用户要跟踪一个快递单时，他们必须输入一个快递单号。然后，单击“Track”按钮来跟踪快递单。我们使用 Socket.io 客户端连接到服务器，并发出 track 事件。我们将监听服务器发送的 status 事件，每次收到状态事件时，我们将将状态添加到 statuses 数组中，并将其显示在我们的用户界面中。
总结
在本文中，我们使用 Node.js 和 Express 框架实现了一个实时快递单状态变更提醒功能。我们使用 Socket.io 实现了实时通信，并使用了一个外部的 API 查询快递单状态。我们学习了如何使用 Socket.io 在服务器端和客户端之间进行实时通信，以及如何使用 Vue.js 来创建我们的客户端。
此代码示例具有广泛的借鉴意义，我们可以将其应用于其他实时应用程序场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e8f0f48841e9894b1494e