前言
在城市中，公交车是很重要的交通工具之一。但是，我们常常会遇到等车时间过长，错过公交车等问题。为了解决这些问题，我们可以利用 Socket.io 实现实时公交车到站提醒功能。
Socket.io 简介
Socket.io 是一个实时应用程序的引擎，它使用 WebSocket 协议进行通信。它的特点是易于使用，高效，可扩展性强，并且支持实时双向通信。在前端开发中，Socket.io 可以用来实现实时数据传输，例如聊天室、实时通知等功能。
实现步骤
步骤一：获取公交车实时信息
首先，我们需要获取公交车的实时信息。这可以通过调用公交车实时数据接口来实现。在这里，我们以北京市公交车实时数据接口为例，该接口的 URL 是：
http://www.bjbus.com/home/ajax_rtbus_data.php?act=busTime&selBLine=路线编号&selBDir=方向编号&selBStop=站点编号
其中，selBLine 表示路线编号，selBDir 表示方向编号，selBStop 表示站点编号。我们需要根据实际情况将它们替换成对应的值。
获取实时信息的代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
-------- --------------------- ---------- ----- -
----- --- - -------------------------------------------------------------------------------------------------------------------
------ --- ----------------- ------- -- -
------------ ------- --------- ----- -- -
-- ------- -
--------------
- ---- -
--------------------------
-
---
---
-步骤二：实现 Socket.io 服务器
接下来，我们需要实现 Socket.io 服务器，以便客户端可以连接并获取实时信息。在这里，我们使用 Express 框架来实现服务器。首先，我们需要安装并引入相关模块：
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');然后，创建 Express 应用程序并创建 HTTP 服务器：
const app = express(); const server = http.createServer(app);
接着，创建 Socket.io 服务器，并监听客户端连接事件：
const io = socketIo(server);
io.on('connection', (socket) => {
console.log(`Client ${socket.id} connected`);
});在客户端连接时，服务器会输出一条日志，表示客户端已连接。
步骤三：实现实时数据推送
当客户端连接到服务器时，我们需要实时推送公交车实时信息给客户端。为了实现这个功能，我们可以在服务器中设置一个定时器，每隔一段时间获取一次实时信息，并将其推送给客户端。代码如下：
const interval = 5000; // 每隔 5 秒获取一次实时信息
setInterval(async () => {
const data = await getRealtimeData(line, direction, stop);
io.emit('realtimeData', data);
}, interval);其中，interval 表示获取实时信息的时间间隔，io.emit('realtimeData', data) 表示将实时信息推送给所有客户端。
步骤四：实现客户端页面
最后，我们需要实现客户端页面，以便用户可以连接服务器并获取实时信息。在这里，我们使用 Vue.js 框架来实现客户端页面。首先，我们需要在 HTML 文件中引入 Socket.io 和 Vue.js：
<script src="/socket.io/socket.io.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
然后，在 Vue.js 中创建一个实例，并在 created 生命周期钩子中连接 Socket.io 服务器：
-- -------------------- ---- -------
--- -----
--- -------
----- -
------------- -----
--
--------- -
----- ------ - -----
------------------------- ------ -- -
----------------- - -----
---
--
---在客户端连接到服务器并获取实时信息时，客户端页面会自动更新实时信息。
示例代码
完整的示例代码可以在我的 GitHub 仓库中找到：
https://github.com/jiayisheji/realtime-bus-reminder
总结
通过使用 Socket.io，我们可以轻松地实现实时公交车到站提醒功能。这不仅可以提高公交车的利用率，还可以让我们更好地了解城市公共交通的运行情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662b659dd3423812e48f25b1