2017-05-29 71 views
0

我正在尝试构建一个总线应用程序,其行为与此完全相同(http://pdxlivebus.com/)。如何获得实时数据?

现在我根本无法知道我该如何不断地向后台的UI提供数据?我不想在一段时间后发送ajax请求。我已经使用react和node.js完成了聊天应用程序,但它们是实时的,因为一个用户可以做某些事情(发送消息或断开连接),并且服务器发送一个套接字事件并且客户端侦听和更新。

但像这样的应用http://pdxlivebus.com/这里的用户什么也不做,只是为了观察总线如何用最新的数据更新UI?

+1

他们使用websocket,[socket.io](https://socket.io/)库 – kombucha

+0

[如何获得实时更新?](https://stackoverflow.com/q/ 6304937/218196) –

+0

我知道他们正在使用websockets,我已经看到它在网络流量,但我的问题是他们如何设法发出的数据和接收数据与客户端的任何行动? –

回答

1

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

以下是关于如何将其集成的示例代码。 https://moquet.net/blog/realtime-geolocation-tracking-firebase/

+0

但我会从api获取数据! –

+0

你现在有两个选择。 1.使用[Firebase函数](https://firebase.google。com/docs/functions /)从API获取数据并更新您的Firebase实时数据。 2.使用[MEAN栈](http://meanjs.org/),您可以跳过angularjs,但使用其他[Socketio](https://socket.io/) 保留一些时间间隔来获取最新的位置数据每隔5秒左右更新一次,并使用[Socketio](https://socket.io/)更新每个客户订阅的车辆跟踪表。 – kunalkamble

0

你需要与插座的工作,也许你可以与其他socket.io大图书馆工作SuperWebSocket是.NET和HTML5兼容。

以及客户端,我认为最好的办法是Angularjs,是用于实时数据工作的有力工具,例如这个web使用Angularjs用于显示实时数据

0

您可以使用webrtc这是一个使浏览器之间的实时通信。

或者

你可以用socket.io它使Web客户端和服务器

2

之间的实时,双向通信内部http://pdxlivebus.com/使用socket.io去 - 查号线。的http://pdxlivebus.com/dist/bundle.js

part of source code with marked line

23178个发射的事件vehicle_update返回数据,如:

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

有了这样,你可以建立每个元素的动画信息(vehicleID是uniq的,很容易跟踪)是在移动。

+0

感谢您的详细解答。我明白这个应用程序使用websockets。有一个服务器发出并且客户端收到的事件。我的问题是,如何确保始终有一个事件正在进行,以便客户端可以不断地收听和更新数据? –

+0

你想在背面或前端使用这些知识吗? Backand可以跟踪所有连接的客户端 - 如果客户端的响应丢失 - 则意味着缺乏连接。某种类型的心跳 - 在每个(或更少,例如100个滴答之后)发送响应后,客户端仍连接。 –