Dispatch delivery vans on a live map and watch their location and cargo temperature update. Message a driver, reboot a sensor, or send a vehicle somewhere new. Built with plain JavaScript and the PubNub JavaScript SDK.
The Transportation & Logistics demo is built with plain JavaScript, Google Maps, and the PubNub JavaScript SDK. The vehicles are simulated: each one runs in its own web worker with its own PubNub client, so every position, reading, and command really travels over PubNub, just as it would from a device in a truck.
Vehicles publish route updates as messages and send their position and temperature as signals. The dashboard listens to every vehicle with one wildcard subscription to vehicle.*, and sends commands back on each vehicle's own channel. Presence shows whether a sensor is online, Message Persistence lets a new window catch up on vehicles already on the road, and Access Manager tokens control access. Vehicles start near PubNub's San Francisco office, or near you if you tick Localize and allow location access. The source code is open on GitHub.
Press Dispatch Vehicle and a delivery van starts a route with four stops. Its first message draws the route on the map. You can run up to three vehicles at once.
Every half second, each vehicle sends two small signals: its position and a cargo temperature reading. The van moves along its route, and the ETA and reading update in the list.
Open a vehicle and send the driver a message. It goes to the vehicle's own channel and shows up next to the van on the map. The driver's phone is simulated here.
Reboot the sensor and it leaves the channel. Presence marks it offline in the list. About five seconds later it rejoins and turns green again.
Choose Redirect Vehicle and the dashboard publishes a new route to the van. It ends its current leg and drives from where it is to a new destination.
Open the dashboard again with the same identifier and it fetches recent messages from history. Vehicles that are mid-route reappear and keep moving.
Clone the app, add your PubNub keys and a Google Maps API key, and run it locally.
GitHub
The complete source. Enable Presence, Stream Controller, and Message Persistence on your keyset, add your keys and Google Maps API key to js/keys.js, then serve the folder with any local web server, for example python3 -m http.server 8080.
git clone https://github.com/PubNubDevelopers/transport-logistics-javascript-demo.gitTrack deliveries in real time without requiring a custom backend.
Watch simulated sensors report from around the world on a live map. Rename, reboot, update, or delete them from the dashboard. Built with plain JavaScript and the PubNub JavaScript SDK.
Pick a data stream and watch its messages arrive in your browser. Switch streams, pause, and see the code for the stream you are watching. Built with the PubNub JavaScript SDK.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
