Search code examples
javascriptnode.jsreactjsreal-time

How to get realtime data?

I am trying to build a bus application which shall behave exactly like this (http://pdxlivebus.com/) one.

Now I simply can not get the idea out that how can i constantly feed data to the UI from my backend? I don't want to send ajax requests after some intervals. I have done chat application with react and node.js but they are realtime in a sense that one user does something(send message or disconnect) and for that the server sends out a socket event and the client listens and updates.

But application like this one http://pdxlivebus.com/ where the user does not do anything but to watch the buses how does the UI gets updated with the latest data?

Solution

  • Internally http://pdxlivebus.com/ is using socket.io – check line no. 23178 of http://pdxlivebus.com/dist/bundle.js

    part of source code with marked line

    Emitted event vehicle_update returns data like:

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

    With information like that you can build animations for each element (vehicleID is uniq, it is easy to track) that is in move.