#Build live delivery tracking on a map

// protocol.ts: imported by both apps and the server.
export type Position = { lat: number; lng: number };

export type Stage = 'preparing' | 'on-the-way' | 'arriving' | 'delivered';

export type Proof = { orderId: string; photo: string; at: number; position: Position | null };

export type TrackIn =
  // On `order:<id>`: where the courier is, at `time` on the server's clock.
  | { type: 'position'; orderId: string; time: number; position: Position }
  // On `order:<id>`: the stage, and the arrival time on the server's clock.
  | { type: 'status'; orderId: string; stage: Stage; eta?: number }
  | { type: 'pong'; id: number; time: number }
  // The server has the proof of delivery with this idempotency key.
  | { type: 'ack'; id: string };

export type TrackOut =
  | { type: 'subscribe' | 'unsubscribe'; topic: string }
  | { type: 'ping'; id: number }
  // From the driver's app.
  | { type: 'gps'; orderId: string; position: Position }
  | ({ type: 'delivered'; id: string } & Proof);

// track.ts: the customer's app.
import {
  createWebSocket,
  createWebSocketLatency,
  createWebSocketState,
  createWebSocketTopics
} from 'react-websocket';
import { createWebSocketTimeline } from 'react-websocket/timeline';
import type { Position, Stage, TrackIn, TrackOut } from './protocol';

export const track = createWebSocket<TrackIn, TrackOut>('wss://delivery.example.com/track', {
  json: true
});

export const orderTopics = createWebSocketTopics(track, {
  subscribe: topic => ({ type: 'subscribe', topic }),
  unsubscribe: topic => ({ type: 'unsubscribe', topic })
});

// The server's clock: the customer's phone may be minutes off, and the ETA is in server time.
export const latency = createWebSocketLatency(track, {
  ping: id => ({ type: 'ping', id }),
  pong: message => (message.type === 'pong' ? message : undefined),
  interval: 10_000
});

export const statuses = createWebSocketState(track, {
  initialState: {} as Record<string, { stage: Stage; eta?: number }>,
  reduce: (all, message) =>
    message.type === 'status'
      ? { ...all, [message.orderId]: { stage: message.stage, eta: message.eta } }
      : all
});

const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

/** The courier's positions for one order, to draw between. */
export function courierTimeline(orderId: string) {
  return createWebSocketTimeline(track, {
    snapshot: message =>
      message.type === 'position' && message.orderId === orderId
        ? { time: message.time, state: message.position }
        : undefined,
    interpolate: (from: Position, to: Position, t) => ({
      lat: lerp(from.lat, to.lat, t),
      lng: lerp(from.lng, to.lng, t)
    }),
    // A position comes about once a second: draw two seconds behind, between two we have.
    delay: 2_000,
    latency
  });
}

// courier.ts: the courier's app.
import { createWebSocket, createWebSocketSendRate } from 'react-websocket';
import { createWebSocketOutbox } from 'react-websocket/outbox';
import type { Position, Proof, TrackIn, TrackOut } from './protocol';

export const courier = createWebSocket<TrackIn, TrackOut>('wss://delivery.example.com/courier', {
  json: true
});

// At most a position a second, down to one every five on a congested link. Between sends,
// only the newest is kept, and after a reconnect only the newest goes out.
const gps = createWebSocketSendRate(courier, { maxRate: 1, minRate: 0.2 });

let last: Position | null = null;

/** Share the courier's position for an order, until the returned function is called. */
export function shareLocation(orderId: string) {
  const watch = navigator.geolocation.watchPosition(
    ({ coords }) => {
      last = { lat: coords.latitude, lng: coords.longitude };
      gps.send({ type: 'gps', orderId, position: last }, 'gps');
    },
    error => console.warn(`No location: ${error.message}`),
    { enableHighAccuracy: true, maximumAge: 2_000 }
  );
  return () => navigator.geolocation.clearWatch(watch);
}

// Kept in IndexedDB until the server has it: the courier may be in a basement, offline.
export const proofs = createWebSocketOutbox(courier, {
  name: 'proofs',
  send: (proof: Proof, id) => ({ type: 'delivered', id, ...proof }),
  ack: message => (message.type === 'ack' ? message.id : undefined)
});

export async function deliver(orderId: string, photo: File) {
  await proofs.add({ orderId, photo: await shrink(photo), at: Date.now(), position: last });
}

/** A photo small enough to store and send: 800 px at most, as JPEG. */
async function shrink(file: File) {
  const image = await createImageBitmap(file);
  const scale = Math.min(1, 800 / Math.max(image.width, image.height));
  const canvas = document.createElement('canvas');
  canvas.width = Math.round(image.width * scale);
  canvas.height = Math.round(image.height * scale);
  canvas.getContext('2d')!.drawImage(image, 0, 0, canvas.width, canvas.height);
  return canvas.toDataURL('image/jpeg', 0.7);
}

// server.ts
import { createServer } from 'node:http';
import { WebSocketServer, type WebSocket } from 'ws';
import { distance } from './geo.ts';
import type { Position, Stage, TrackIn, TrackOut } from './protocol.ts';

export type Order = { id: string; destination: Position; stage: Stage; eta?: number };

const orders = new Map<string, Order & { position?: Position; time?: number }>(); // your database
const watchers = new Map<string, Set<WebSocket>>(); // the customers on each `order:<id>`
const proofs = new Map<string, string>(); // photo by proof key: your storage

const SPEED = 8; // meters a second, for the ETA. Use your routing service's estimate.

function send(socket: WebSocket, message: TrackIn) {
  socket.send(JSON.stringify(message));
}

function publish(orderId: string, message: TrackIn) {
  for (const socket of watchers.get(`order:${orderId}`) ?? []) send(socket, message);
}

const status = (order: Order): TrackIn => ({
  type: 'status',
  orderId: order.id,
  stage: order.stage,
  eta: order.eta
});

export function createOrder(order: Order) {
  orders.set(order.id, order);
}

/** A position from the courier's phone. */
export function moved(orderId: string, position: Position) {
  const order = orders.get(orderId);
  if (!order || order.stage === 'delivered') return;
  order.position = position;
  order.time = Date.now();
  publish(orderId, { type: 'position', orderId, time: order.time, position });

  const left = distance(position, order.destination);
  const stage = left < 150 ? 'arriving' : 'on-the-way';
  const eta = order.time + (left / SPEED) * 1_000;
  // A new ETA only when it changes by half a minute, not with every position.
  if (stage !== order.stage || Math.abs(eta - (order.eta ?? 0)) > 30_000) {
    Object.assign(order, { stage, eta });
    publish(orderId, status(order));
  }
}

function customer(socket: WebSocket, message: TrackOut) {
  if (message.type !== 'subscribe' && message.type !== 'unsubscribe') return;
  const topic = message.topic;
  if (message.type === 'unsubscribe') {
    watchers.get(topic)?.delete(socket);
    return;
  }
  // Check that the order belongs to this customer before you subscribe them.
  const order = orders.get(topic.slice('order:'.length));
  if (!order) return;
  let sockets = watchers.get(topic);
  if (!sockets) watchers.set(topic, (sockets = new Set()));
  sockets.add(socket);
  // Where things are now, so the page doesn't wait for the next move.
  send(socket, status(order));
  if (order.position && order.time) {
    send(socket, {
      type: 'position',
      orderId: order.id,
      time: order.time,
      position: order.position
    });
  }
}

function courier(socket: WebSocket, message: TrackOut) {
  // Check that the courier is assigned to the order.
  if (message.type === 'gps') moved(message.orderId, message.position);
  if (message.type !== 'delivered') return;
  // Sent again until acknowledged, from a phone that keeps losing signal: store it once.
  if (!proofs.has(message.id)) {
    proofs.set(message.id, message.photo);
    const order = orders.get(message.orderId);
    if (order) {
      Object.assign(order, { stage: 'delivered', eta: undefined });
      publish(order.id, status(order));
    }
  }
  send(socket, { type: 'ack', id: message.id });
}

const server = createServer();
const wss = new WebSocketServer({ server });

wss.on('connection', (socket, request) => {
  // Authenticate both apps, as in the Authentication guide.
  const handle = request.url === '/courier' ? courier : customer;
  socket.on('message', data => {
    const message = JSON.parse(String(data)) as TrackOut; // validate it in production
    if (message.type === 'ping') {
      return send(socket, { type: 'pong', id: message.id, time: Date.now() });
    }
    handle(socket, message);
  });
  socket.on('close', () => {
    for (const sockets of watchers.values()) sockets.delete(socket);
  });
});

server.listen(Number(process.env.PORT ?? 8080));

// geo.ts
import type { Position } from './protocol.ts';

/** Meters between two points. */
export function distance(a: Position, b: Position) {
  const rad = Math.PI / 180;
  const dLat = (b.lat - a.lat) * rad;
  const dLng = (b.lng - a.lng) * rad;
  const h =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(a.lat * rad) * Math.cos(b.lat * rad) * Math.sin(dLng / 2) ** 2;
  return 2 * 6_371_000 * Math.asin(Math.sqrt(h));
}

// simulate.ts: a courier that drives a route, for trying the customer's page without one.
import { setTimeout as sleep } from 'node:timers/promises';
import { distance } from './geo.ts';
import type { Position } from './protocol.ts';
import { createOrder, moved } from './server.ts';

const route: Position[] = [
  { lat: 53.3438, lng: -6.2546 },
  { lat: 53.3454, lng: -6.2592 },
  { lat: 53.3478, lng: -6.2603 },
  { lat: 53.3497, lng: -6.2603 }
];

createOrder({ id: 'demo', destination: route.at(-1)!, stage: 'preparing' });

// 8 meters a second, a GPS fix a second, along each leg of the route.
for (const [i, from] of route.slice(0, -1).entries()) {
  const to = route[i + 1]!;
  const steps = Math.ceil(distance(from, to) / 8);
  for (let step = 1; step <= steps; step++) {
    await sleep(1_000);
    const t = step / steps;
    moved('demo', {
      lat: from.lat + (to.lat - from.lat) * t,
      lng: from.lng + (to.lng - from.lng) * t
    });
  }
}