Order a package, a taxi, or a meal and watch a simulated driver come to you on a live map. Send the driver a message and follow the ETA. Built with plain JavaScript and the PubNub JavaScript SDK.
The Delivery Tracking demo is built with plain JavaScript, Google Maps, and the PubNub JavaScript SDK. The drivers are simulated: each one runs in its own web worker with its own PubNub client, so every location update really travels over PubNub, just as it would from an app on a driver's phone. Google Directions plans the route.
When a trip starts, the driver publishes the whole route as one message on your vehicle.<id> channel. After that, every move is a small signal. The map listens to all vehicles with one wildcard subscription, Message Persistence lets a late window rebuild a trip in progress, and Access Manager tokens control access. The source code is open on GitHub.
Pick packages, a car size, or a meal, then type an address or use your location. A driver starts a few kilometres away and publishes the full route as one message.
The driver sends its position as a signal every half second, and the marker follows the route. When it arrives, an end-of-route message clears it from the map.
Click the vehicle to see the driver, the vehicle, and your order. The ETA counts down each time the listener receives a new location signal.
Type a note and the dashboard publishes it on the driver's own channel. The driver sends it back to your channel, and it appears in a bubble next to the vehicle.
One wildcard subscription to vehicle.* picks up every delivery. Vehicles that other windows order after your page loads appear on your map too.
Signals are not stored, so the route travels in a message. A window that joins mid-trip on the same channel fetches it from Message Persistence and follows the next signals.
Clone the finished app and start changing it.
GitHub
The complete source, with no build step. Add your PubNub keys and a Google Maps API key to js/keys.js, then serve the folder from a local web server, for example python3 -m http.server 8001.
git clone https://github.com/PubNubDevelopers/delivery-demo.gitWatch simulated sensors report from around the world on a live map. Rename, reboot, update, or delete them from the dashboard.
Streaming data is a continuous flow of information from various sources in real time. PubNub’s live streaming APIs enable you to generate, process, and deliver streaming data to any number of subscribers.
Draw with your friends! Powered by PubNub, our real-time collaboration demo demonstrates a simple drawing application that allows for multiple users to draw at the same time on a canvas.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
