adaptorex/public/socket_example/socket_example.js

Connect all your live interactive storytelling devices and software

let base_url = window.location.origin

const urlParams = new URLSearchParams(window.location.search)

let game = urlParams.get("game")
let plugin = urlParams.get("plugin") || "socketio"
let plugin_namespace = urlParams.get("namespace")
// let session = urlParams.get('session') // The session specific socket is deprecated
let level = urlParams.get("level")
let log_level = urlParams.get("log")

let user = urlParams.get("user")
let password = urlParams.get("password")

let headers = {}
if (user && password) {
  headers.auth = { token: btoa(`${user}:${password}`) }
}

let namespaces = {
  adaptor: io(base_url)
}

if (log_level) {
  namespaces.log_socket = io(`${base_url}/log/${log_level}`, headers)
}

if (game) {
  namespaces.game_socket = io(`${base_url}/game/${game}`, headers)

  namespaces.sessions_socket = io(
    `${base_url}/game/${game}/live/sessions`,
    headers
  )

  namespaces.items_socket = io(`${base_url}/game/${game}/live/items`, headers)

  /* The session socket is deprecated
  if(session) {
    namespaces.session_socket = io(`${base_url}/game/${game}/session/${session}`)
  }
  */

  if (level) {
    namespaces.level_socket = io(
      `${base_url}/game/${game}/level/${level}`,
      headers
    )
  }

  if (plugin_namespace) {
    namespaces.plugin_socket = io(
      `${base_url}/${game}/${plugin}/${plugin_namespace}`,
      headers
    )
  }
} else {
  log(
    `⚠️ Add the game parameter to the url to connect to a game. For example:`,
    `${window.location.href}?game=TestGame`
  )
}

function log(line, details) {
  let log_el = document.getElementById("log")
  let log_item = document.createElement("div")
  log_item.style.padding = "5px"
  let date = new Date()
  let date_str = `${date.toLocaleTimeString()}`
  log_item.innerHTML = `${date_str} ${line}`
  console.log(line)
  if (typeof details === "object") {
    const size = new TextEncoder().encode(JSON.stringify(details)).length
    const kiloBytes = size / 1024
    const megaBytes = kiloBytes / 1024
    log_item.innerHTML += `<details><summary>${typeof details} (${kiloBytes.toFixed(2)} KB / ${megaBytes.toFixed(2)} MB)</summary><pre>${JSON.stringify(details, null, 2)}</pre></details>`
    console.log(details)
  } else if (details) {
    log_item.innerHTML += `<br>${details}`
    console.log(details)
  }
  log_el.insertBefore(log_item, log_el.firstChild)
  log_el.scrollTop = log_el.scrollHeight
}

function createMessageInput() {
  const container = document.getElementById("send")
  const namespaceSelect = document.createElement("select")
  Object.keys(namespaces)
    .slice()
    .reverse()
    .forEach((namespace) => {
      const title = namespace.replace(/_socket$/, "")
      const option = document.createElement("option")
      option.value = namespace
      option.textContent = title
      namespaceSelect.appendChild(option)
    })
  const topicInput = document.createElement("input")
  topicInput.type = "text"
  topicInput.placeholder = "topic"
  const input = document.createElement("input")
  input.type = "text"
  input.placeholder = "message"
  const sendButton = document.createElement("button")
  sendButton.textContent = "Send"

  sendButton.addEventListener("click", () => {
    const namespace = namespaceSelect.value
    const topic = topicInput.value.trim() || ""
    let message = input.value.trim()
    if (topic) {
      if (message.startsWith("{") || message.startsWith("[")) {
        message = JSON.parse(message)
      }
      namespaces[namespace].emit(topic, message, (response) => {
        log(`↩️ Response on topic <b>${topic}</b> in ${namespace}:`, response)
      })
      // input.value = ""; // Clear input field after sending
    }
  })

  container.appendChild(namespaceSelect)
  container.appendChild(topicInput)
  container.appendChild(input)
  container.appendChild(sendButton)
}

function onConnected() {
  Object.keys(namespaces).forEach((namespace) => {
    const title = namespace.replace(/_socket$/, "")
    log(
      `⏳ <b>${title}</b> socket trying to connect to ${base_url}<b>${namespaces[namespace].nsp}</b>`
    )
    namespaces[namespace].on("connect", (data) => {
      log(`✅ <b>${title}</b> socket connected</b>`)
    })
  })
}

function onDisconnected() {
  Object.keys(namespaces).forEach((namespace) => {
    const title = namespace.replace(/_socket$/, "")
    namespaces[namespace].on("disconnect", (data) => {
      log(`🚫 <b>${title}</b> socket is disconnected</b>`)
    })
  })
}

function onMessage() {
  Object.keys(namespaces).forEach((namespace) => {
    const title = namespace.replace(/_socket$/, "")
    namespaces[namespace].onAny((topic, msg) => {
      log(
        `💬 incoming message from <b>${title}</b> socket on topic <b>${topic}</b>:`,
        msg
      )
    })
  })
}

log(
  `🦖 connecting to ${base_url} on ${identifyBrowser()}`,
  urlParams.entries().toArray()
)

onConnected()
onDisconnected()
onMessage()
createMessageInput()

/**
 * use userAgent to find out what Browser is in use (not reliable)
 *
 * see https://code-boxx.com/detect-browser-with-javascript/
 */
function identifyBrowser() {
  // CHROME
  if (navigator.userAgent.indexOf("Chrome") != -1) {
    return "Google Chrome"
  }
  // FIREFOX
  else if (navigator.userAgent.indexOf("Firefox") != -1) {
    return "Mozilla Firefox"
  }
  // INTERNET EXPLORER
  else if (navigator.userAgent.indexOf("MSIE") != -1) {
    return "Internet Explorer"
  }
  // EDGE
  else if (navigator.userAgent.indexOf("Edge") != -1) {
    return "Edge Browser"
  }
  // SAFARI
  else if (navigator.userAgent.indexOf("Safari") != -1) {
    return "Safari"
  }
  // OPERA
  else if (navigator.userAgent.indexOf("Opera") != -1) {
    return "Opera"
  }
  // YANDEX BROWSER
  else if (navigator.userAgent.indexOf("YaBrowser") != -1) {
    return "YaBrowser"
  }
  // OTHERS
  else {
    return "Unknown"
  }
}