app.js

/* eslint-disable no-console */
import { create } from 'ipfs-core'
import { WebSockets } from '@libp2p/websockets'
import * as filters from '@libp2p/websockets/filters'
import Helpers from './helpers.js'

document.addEventListener('DOMContentLoaded', async () => {
  const $peerId = document.querySelector('#peer-id')
  const $message = document.querySelector('#message')
  const $msgs = document.querySelector('#msgs')
  const $send = document.querySelector('#send')
  const $peer = document.querySelector('#peer')
  const $connect = document.querySelector('#connect')
  const $pAddrs = document.querySelector('#peers-addrs')
  const $room = document.querySelector('#room')
  const $roomId = document.querySelector('#room-id')

  let roomName = 'default'
  const fragment = window.location.hash.substr(1)
  if (fragment) {
    roomName = fragment
  }

  $pAddrs.value = ''
  $room.innerText = roomName

  const repo = () => {
    return 'ipfs/pubsub-demo/' + Math.random()
  }

  const ipfs = await create({
    repo: repo(),
    relay: {
      enabled: true, // enable relay dialer/listener (STOP)
      hop: {
        enabled: true // make this node a relay (HOP)
      }
    },
    config: {
      Bootstrap: []
    },
    libp2p: {
      transports: [
        // This is added for local demo!
        // In a production environment the default filter should be used
        // where only DNS + WSS addresses will be dialed by websockets in the browser.
        new WebSockets({
          filter: filters.all
        })
      ]
    }
  })

  const peersSet = new Set()
  const helpers = Helpers(ipfs, peersSet)
  const createRoom = helpers.createRoom
  const sendMsg = helpers.sendMsg
  const updatePeers = helpers.updatePeers
  const updateAddrs = helpers.updateAddrs
  const updateSwarmPeers = helpers.updateSwarmPeers

  const info = await ipfs.id()
  console.log('IPFS node ready with id ' + info.id)

  let room = createRoom(roomName)

  $peerId.setAttribute('style', '')
  $peerId.innerHTML = `<li>${info.id}</li>`

  $send.addEventListener('click', () => {
    sendMsg(room)
  })

  $room.addEventListener('dblclick', () => {
    $room.setAttribute('style', 'display: none')
    $roomId.setAttribute('style', 'display: inline')
  })

  $roomId.addEventListener('keyup', (event) => {
    const kp = event.keyCode || event.which
    if (kp === 13 && $roomId.value.length > 0) {
      const name = $roomId.value
      $room.innerText = name

      $room.setAttribute('style', 'display: inline')
      $roomId.setAttribute('style', 'display: none')

      $roomId.value = ''
      $msgs.innerHTML = ''
      window.location.hash = name
      room = createRoom(name)
      peersSet.clear()
      updatePeers(peersSet)
    } else if (kp === 27) {
      $roomId.value = ''
      $room.setAttribute('style', 'display: inline')
      $roomId.setAttribute('style', 'display: none')
    }
  })

  $message.addEventListener('keyup', (event) => {
    const kp = event.keyCode || event.which
    if (kp === 13) {
      sendMsg(room)
    }
  })

  $connect.addEventListener('click', async () => {
    const peer = $peer.value.trim()
    $peer.value = ''
    try {
      await ipfs.swarm.connect(peer)
      await updateAddrs(ipfs)
      await updateSwarmPeers(ipfs)
    } catch (err) {
      return console.error(err)
    }
  })
})