Build a geolocation tracking app with JS and PubNub

const pubnub = new PubNub({
  publishKey: 'YOUR_PUBLISH_KEY',
  subscribeKey: 'YOUR_SUBSCRIBE_KEY',
  userId: userId
})

// Keep the same User ID, name and greeting while the tab is open.
const userId = sessionStorage.getItem('userId') || makeid(15)
sessionStorage.setItem('userId', userId)
let username = sessionStorage.getItem('username')
if (!username) {
  username = cleanText(prompt('Please enter your name to join the session.'), 30) || 'ANON_' + makeid(4)
  sessionStorage.setItem('username', username)
}
let greeting = sessionStorage.getItem('greeting') || 'Not set.'

// The session channel comes from the invite link (?channel=...), or a new one is made.
let sessionChannel = String(getParameterByName('channel') ?? '').replace(/[^A-Za-z0-9]/g, '').substring(0, 20) || makeid(5)
document.getElementById('channel-label').textContent = sessionChannel
window.history.replaceState(null, '', '?channel=' + sessionChannel)

// Subscriptions: the session channel with presence events, and your own channel for the AI facts.
let sessionSubscription = null
const factsSubscription = pubnub.channel('facts.' + userId).subscription()
factsSubscription.onMessage = event => showFacts(event.message)

// Your location from the browser. Every update goes to the session channel.
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(onPosition, error => {
    factsArea.value = 'Your location isn\'t available: ' + error.message + '. Allow location access for this page and reload it.'
  })
} else {
  alert('This browser can\'t share its location.')
}

function onPosition (position) {
  if (document.getElementById('locationshareswitch').checked) return // "Don't Update My Location"
  lastPosition = { lat: position.coords.latitude, lng: position.coords.longitude }
  publishPosition()
  askForFacts(lastPosition)
}

// Publish at most every 2 seconds. A newer position waits for the next slot, so the last one always goes out.
const PUBLISH_INTERVAL = 2000
let lastPublish = 0
let publishTimer = 0

function publishPosition () {
  if (!lastPosition) return
  clearTimeout(publishTimer)
  const wait = PUBLISH_INTERVAL - (Date.now() - lastPublish)
  if (wait > 0) {
    publishTimer = setTimeout(publishPosition, wait)
    return
  }
  lastPublish = Date.now()
  publishMessage(sessionChannel, { username, greeting, lat: lastPosition.lat, lng: lastPosition.lng })
}

async function publishMessage (channel, message) {
  try {
    await pubnub.publish({ channel, message })
  } catch (error) {
    console.log(error)
  }
}

function subscribeToSession () {
  sessionSubscription = pubnub.channel(sessionChannel).subscription({ receivePresenceEvents: true })
  // A position from someone in the session (or from you): move their marker.
  sessionSubscription.onMessage = event => {
    const update = readPosition(event.message, event.publisher, event.timetoken)
    if (update) showUser(update)
  }
  // Someone joined or left: update the count. state-change events carry no occupancy.
  sessionSubscription.onPresence = event => {
    if (event.action !== 'state-change') setActiveUsers(event.occupancy)
  }
  sessionSubscription.subscribe()
}

// Anyone with your keys can publish on the channel, so only accept positions with the expected shape.
// The marker belongs to the publisher, not to an ID inside the message.
function readPosition (message, publisher, timetoken) {
  if (!message || typeof message !== 'object') return null
  const lat = Number(message.lat)
  const lng = Number(message.lng)
  if (!Number.isFinite(lat) || !Number.isFinite(lng) || Math.abs(lat) > 90 || Math.abs(lng) > 180) return null
  return {
    userId: publisher,
    username: (typeof message.username === 'string' && cleanText(message.username, 30)) || 'ANON',
    greeting: (typeof message.greeting === 'string' && cleanText(message.greeting, 100)) || 'Not set.',
    lat,
    lng,
    lastSeen: new Date(Number(timetoken) / 10000) // A timetoken counts 100-nanosecond intervals.
  }
}

pubnub.addListener({
  status: statusEvent => {
    if (statusEvent.category === 'PNConnectedCategory') updateActiveUsers()
  }
})

// Ask PubNub how many users are in the session right now.
async function updateActiveUsers () {
  try {
    const result = await pubnub.hereNow({ channels: [sessionChannel] })
    setActiveUsers(result.totalOccupancy)
  } catch (error) {
    console.log(error)
  }
}

function setActiveUsers (count) {
  if (Number.isFinite(count)) document.getElementById('active-label').textContent = count
}

// Leave the session when the tab closes, so the count drops for the others right away.
window.addEventListener('pagehide', () => {
  sessionSubscription.unsubscribe()
  factsSubscription.unsubscribe()
})
// Back button: the browser restored this page from its cache, so subscribe again.
window.addEventListener('pageshow', event => {
  if (event.persisted) {
    sessionSubscription.subscribe()
    factsSubscription.subscribe()
  }
})

// Show everyone's last known position: the latest of the last 100 positions in the session.
async function loadLastPositions () {
  try {
    const result = await pubnub.fetchMessages({ channels: [sessionChannel], count: 100 })
    const latest = {}
    for (const item of result.channels[sessionChannel] || []) {
      const update = readPosition(item.message, item.uuid, item.timetoken)
      if (update) latest[update.userId] = update // Oldest first, so later positions win.
    }
    Object.values(latest).forEach(showUser)
  } catch (error) {
    console.log(error)
  }
}

function askForFacts (position) {
  if (lastFactsPosition && distanceMiles(lastFactsPosition, position) <= FACTS_DISTANCE_MILES) return
  lastFactsPosition = position
  pubnub.fire({ channel: 'facts-request.' + userId, message: { lat: position.lat, lng: position.lng } })
    .catch(error => console.log(error))
  factsArea.value = 'Asking for facts about your location...'
  clearTimeout(factsTimer)
  factsTimer = setTimeout(() => {
    factsArea.value = 'No facts yet. To see facts about your location here, set up the optional location facts Function (see the tutorial). ' +
      'If you have, check its Debug tab in the Admin Portal for errors.'
  }, 20000)
}

try {
  const message = request.message || {}
  const lat = Number(message.lat)
  const lng = Number(message.lng)
  // Anyone with the keys can publish here, so only send real coordinates to OpenAI.
  if (!Number.isFinite(lat) || !Number.isFinite(lng) || Math.abs(lat) > 90 || Math.abs(lng) > 180) {
    return request.ok()
  }

  const apiKey = await vault.get('OPENAI_API_KEY')
  const response = await xhr.fetch('https://api.openai.com/v1/responses', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${apiKey}`
    },
    timeout: 9000, // The default is 5 s; a Function may run for up to 10 s.
    body: JSON.stringify({
      model: MODEL,
      instructions: 'You give short, interesting facts about places. Answer in plain text, at most 5 sentences. ' +
        'If you can\'t tell where the coordinates are, say so in one sentence.',
      input: `Tell me about the place at latitude ${lat}, longitude ${lng}: where it is and a few facts about it.`,
      max_output_tokens: MAX_OUTPUT_TOKENS,
      reasoning: { effort: 'none' }, // Reasoning tokens count against max_output_tokens; facts don't need them.
      store: false // Don't keep the request and the answer on OpenAI.
    })
  })

// The text is in the output_text parts of the message items; don't assume it's the first item.
const output = JSON.parse(response.body).output || []
const text = output
  .filter(item => item.type === 'message')
  .flatMap(item => item.content || [])
  .filter(part => part.type === 'output_text')
  .map(part => part.text)
  .join('')
  .trim()
if (!text) return request.ok()

const userId = request.channels[0].substring('facts-request.'.length)
await pubnub.publish({ channel: `facts.${userId}`, message: { text } })
return request.ok()