【问题标题】:How to get realtime data?如何获取实时数据?
【发布时间】:2017-05-29 18:55:20
【问题描述】:

我正在尝试构建一个与 (http://pdxlivebus.com/) 完全相同的总线应用程序。

现在我根本想不通,我如何才能不断地从后端向 UI 提供数据?我不想在一段时间后发送 ajax 请求。我已经使用 react 和 node.js 完成了聊天应用程序,但从某种意义上说,它们是实时的,即一个用户执行某些操作(发送消息或断开连接),并且服务器发送一个套接字事件,客户端侦听和更新。

但是像http://pdxlivebus.com/ 这样的应用程序,用户除了观看公交车什么都不做,用户界面如何更新为最新数据?

【问题讨论】:

  • 他们使用 websockets 和 socket.io
  • 我知道他们正在使用 websockets 我已经在网络流量中看到了它,但我的问题是他们如何在没有来自客户端的任何操作的情况下设法发出数据并接收数据?
  • “客户没有采取任何行动?” 好吧,他们没有。客户端必须建立 websocket 连接。但这可以在没有用户交互的情况下完成。
  • 你有一个推送服务器脚本每 15 秒左右运行一次,不需要非常精确。

标签: javascript node.js reactjs real-time


【解决方案1】:

在内部 http://pdxlivebus.com/ 正在使用 socket.io – 检查行号。 http://pdxlivebus.com/dist/bundle.js的23178个

发出的事件vehicle_update 返回如下数据:

{
  "routeNumber": 100,
  "delay": -37,
  "inCongestion": null,
  "latitude": 45.5231087,
  "longitude": -122.959265,
  "type": "rail",
  "vehicleID": 104
}

使用此类信息,您可以为移动中的每个元素(vehicleID 是唯一的,易于跟踪)构建动画。

【讨论】:

  • 感谢您的详细解答。我知道这个应用程序使用 websockets。有一个事件,服务器发出,客户端接收。我的问题是如何确保始终有事件发生,以便客户端可以继续侦听和更新数据?
  • 您想在后端或前端拥有这些知识? Backand 可以跟踪所有连接的客户端 - 如果缺少来自客户端的响应 - 这意味着缺少与它的连接。某种心跳 - 在每次(或更少,例如在 100 个滴答声之后)向后端发送响应后,客户端仍处于连接状态。
【解决方案2】:

我相信你需要集成实时数据库。 您可以使用 Firebase 数据库https://firebase.google.com/docs/database/

这是有关如何集成它的示例代码。 https://moquet.net/blog/realtime-geolocation-tracking-firebase/

【讨论】:

  • 但我将从 api 获取数据!
  • 您现在有两个选择。 1. 使用Firebase Functions 从 API 获取数据并更新您的 Firebase 实时数据。 2. 使用MEAN stack,您可以跳过angularjs,但使用Socketio 保持一定的间隔以每5秒左右获取最新的位置数据,并更新每个客户使用Socketio订阅的车辆跟踪表。跨度>
【解决方案3】:

您需要使用套接字,也许您可​​以使用socket.io 其他很棒的库是SuperWebSocket 与.net 和html5 兼容。

对于客户端,我认为最好的选择是Angularjs,它是处理实时数据的强大工具,例如这个web 使用Angularjs 显示实时数据

【讨论】:

    【解决方案4】:

    您可以使用webrtc,它可以实现浏览器之间的实时通信。

    或者

    您可以使用socket.io,它可以实现 Web 客户端和服务器之间的实时双向通信

    【讨论】:

      猜你喜欢
      • 2020-11-20
      • 2021-12-30
      • 1970-01-01
      • 1970-01-01
      • 2020-02-22
      • 2021-07-14
      • 1970-01-01
      • 1970-01-01
      • 2019-07-12
      相关资源
      最近更新 更多