2017-05-29 3 views
0

Ich versuche eine Busanwendung zu erstellen, die sich genau so verhalten soll (http://pdxlivebus.com/).Wie bekomme ich Echtzeitdaten?

Jetzt kann ich einfach nicht die Idee heraus, dass wie kann ich ständig Daten auf der Benutzeroberfläche von meinem Backend Feed? Ich möchte nach einigen Intervallen keine AJAX-Anfragen senden. Ich habe Chat-Anwendung mit react und node.js getan, aber sie sind in Echtzeit in einem Sinne, dass ein Benutzer etwas (Nachricht senden oder trennen) und für die der Server ein Socket-Ereignis sendet und der Client überwacht und aktualisiert.

Aber Anwendung wie diese http://pdxlivebus.com/ wo der Benutzer nichts anderes tut, als die Busse zu beobachten, wie wird die UI mit den neuesten Daten aktualisiert?

+1

Sie verwenden Websockets mit der [socket.io] (https://socket.io/) -Bibliothek – kombucha

+0

Mögliche Duplikate von [Wie bekomme ich Echtzeit-Updates?] (Https://stackoverflow.com/q/ 6304937/218196) –

+0

Ich weiß, dass sie websockets verwenden, die ich im Netzwerkverkehr gesehen habe, aber meine Frage ist, wie sie es geschafft haben, die Daten zu senden und die Daten ohne irgendeine Aktion vom Client zu erhalten? –

Antwort

1

Ich glaube, dass Sie Echtzeitdatenbank integrieren müssen. Sie können Firebase-Datenbank verwenden https://firebase.google.com/docs/database/

Hier ist Beispielcode, wie Sie es integrieren. https://moquet.net/blog/realtime-geolocation-tracking-firebase/

+0

aber ich werde die Daten von einer API bekommen! –

+0

Sie haben jetzt zwei Möglichkeiten. 1. Verwenden Sie [Firebase-Funktionen] (https://firebase.google.com/docs/functions /) Daten von der API abrufen und Ihre Firebase-Echtzeitdaten aktualisieren. 2. Verwenden Sie [MEAN stack] (http://meanjs.org/), Sie können angularjs überspringen, aber andere mit [Socketio] verwenden (https://socket.io/) Behalten Sie ein Intervall, um die neuesten Standortdaten abzurufen alle 5 Sekunden oder so und aktualisieren Sie Ihre Fahrzeugverfolgungstabelle, die von jedem Kunden mit [Socketio] (https://socket.io/) abonniert wurde. – kunalkamble

0

Sie müssen sich mit Steckdosen arbeiten, vielleicht können Sie mit socket.io anderen großen Bibliothek arbeiten wird SuperWebSocket mit .net und html5 kompatibel ist.

Und ich denke, für die Kunden die beste Option Angularjs ist, ist ein leistungsfähiges Werkzeug für die Arbeit mit Echtzeit-Daten, zum Beispiel dieser web Verwendung AngularJS für die Show von Echtzeitdaten

0

Sie webrtc der eine ermöglicht ist verwenden können die Echtzeit-Kommunikation zwischen Browsern.

Oder

Sie können mit socket.io gehen, die die Echtzeit, die bidirektionale Kommunikation zwischen Web-Clients und Server

2

Intern http://pdxlivebus.com/ wird mit socket.io ermöglicht - überprüfen Linie Nr. 23178 von http://pdxlivebus.com/dist/bundle.js

part of source code with marked line

vehicle_update gibt Daten Ereignis Emittieren wie:

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

Mit Informationen wie, dass Sie Animationen für jedes Element bauen (VehicleID ist uniq, ist es leicht zu verfolgen), das ist in Bewegung.

+0

Danke für die ausführliche Antwort. Ich verstehe, dass diese App Websockets verwendet. Es gibt ein Ereignis, das der Server sendet und der Client empfängt. Meine Frage ist, wie kann ich sicherstellen, dass immer ein Ereignis stattfindet, so dass der Client weiter zuhören und die Daten aktualisieren kann? –

+0

Sie möchten dieses Wissen auf der Rückseite oder Front-End-Seite haben? Backand kann alle verbundenen Clients nachverfolgen - wenn eine Antwort vom Client fehlt - bedeutet dies, dass keine Verbindung mit dem Client besteht. Eine Art Herzschlag - nach jedem (oder weniger, z. B. nach 100 Ticks) senden Sie eine Antwort an das Backend, dass der Client immer noch verbunden ist. –