LinkUp-P2P-Chat/app.js

import Hyperswarm from 'hyperswarm';
import crypto from 'hypercore-crypto';
import b4a from 'b4a';
import ServeDrive from 'serve-drive';
import Localdrive from 'localdrive';
import fs from 'fs';
import Hyperdrive from 'hyperdrive';
import Corestore from 'corestore';
const store = new Corestore('./storage');
const drive = new Hyperdrive(store);

await drive.ready();

let swarm;
let userName = 'Anonymous';
let userAvatar = '';
let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
let peerCount = 0;

async function initialize() {
  swarm = new Hyperswarm();

  const servePort = 1337;
  const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive });
  await serve.ready();
  console.log('Listening on http://localhost:' + serve.address().port);

  const registerForm = document.querySelector('#register-form');
  const selectAvatarButton = document.querySelector('#select-avatar');
  const createChatRoomButton = document.querySelector('#create-chat-room');
  const joinForm = document.querySelector('#join-form');
  const messageForm = document.querySelector('#message-form');

  if (registerForm) {
    registerForm.addEventListener('submit', registerUser);
  }
  if (selectAvatarButton) {
    selectAvatarButton.addEventListener('click', () => {
      document.querySelector('#avatar-file').click();
    });
  }
  if (createChatRoomButton) {
    createChatRoomButton.addEventListener('click', createChatRoom);
  }
  if (joinForm) {
    joinForm.addEventListener('submit', joinChatRoom);
  }
  if (messageForm) {
    messageForm.addEventListener('submit', sendMessage);
  }

  const savedUser = localStorage.getItem('currentUser');
  if (savedUser) {
    const user = JSON.parse(savedUser);
    userName = user.username;
    userAvatar = user.avatar || '';
    const setupDiv = document.querySelector('#setup');
    if (setupDiv) {
      setupDiv.classList.remove('hidden');
    }
  } else {
    const registerDiv = document.querySelector('#register');
    if (registerDiv) {
      registerDiv.classList.remove('hidden');
    }
  }

  swarm.on('connection', async (connection, info) => {
    peerCount++;
    updatePeerCount();

    // Send the current user's icon to the new peer
    const iconBuffer = await drive.get(`/icons/${userName}.png`);
    if (iconBuffer) {
      const iconMessage = JSON.stringify({
        type: 'icon',
        username: userName,
        avatar: iconBuffer.toString('base64'),
      });
      connection.write(iconMessage);
    }

    connection.on('data', async (data) => {
      const messageObj = JSON.parse(data.toString());
      if (messageObj.type === 'icon') {
        // Save icon to local directory
        const username = messageObj.username;
        const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
        await drive.put(`/icons/${username}.png`, avatarBuffer);
        updateIcon(username, avatarBuffer);
      } else {
        onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
      }
    });

    connection.on('close', () => {
      peerCount--;
      updatePeerCount();
    });
  });

  swarm.on('error', (err) => {
    console.error('Swarm error:', err);
  });

  swarm.on('close', () => {
    console.log('Swarm closed.');
  });
}

function updatePeerCount() {
  const peersCountElement = document.querySelector('#peers-count');
  if (peersCountElement) {
    peersCountElement.textContent = peerCount;
  }
}

async function registerUser(e) {
  e.preventDefault();

  const regUsernameInput = document.querySelector('#reg-username');
  if (!regUsernameInput) {
    alert('Username input element not found.');
    return;
  }

  const regUsername = regUsernameInput.value.trim();

  if (!regUsername) {
    alert('Please enter a username.');
    return;
  }

  const loadingDiv = document.querySelector('#loading');
  loadingDiv.classList.remove('hidden');

  const newUser = { username: regUsername, avatar: '' };
  localStorage.setItem('currentUser', JSON.stringify(newUser));

  const fileInput = document.querySelector('#avatar-file');
  if (fileInput && fileInput.files.length > 0) {
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = async () => {
      const fileBuffer = Buffer.from(reader.result);
      await drive.put(`/icons/${regUsername}.png`, fileBuffer);
      userAvatar = `http://localhost:1337/icons/${regUsername}.png`;
      // Save avatar URL to localStorage
      localStorage.setItem('avatarURL', userAvatar);

      // Broadcast the icon to all connected peers
      const iconMessage = JSON.stringify({
        type: 'icon',
        username: regUsername,
        avatar: fileBuffer.toString('base64'),
      });

      const peers = [...swarm.connections];
      for (const peer of peers) {
        peer.write(iconMessage);
      }
    };
    reader.readAsArrayBuffer(file);
  }

  continueRegistration(regUsername);
}

async function continueRegistration(regUsername) {
  const loadingDiv = document.querySelector('#loading');
  const setupDiv = document.querySelector('#setup');

  if (!regUsername) {
    alert('Please enter a username.');
    return;
  }

  userName = regUsername;
  setupDiv.classList.remove('hidden');
  document.querySelector('#register').classList.add('hidden');
  loadingDiv.classList.add('hidden');

  document.querySelector('#join-chat-room').addEventListener('click', joinChatRoom);

  const randomTopic = crypto.randomBytes(32);
  document.querySelector('#chat-room-topic').innerText = b4a.toString(randomTopic, 'hex');
}

async function createChatRoom() {
  // Generate a new random topic (32 byte string)
  const topicBuffer = crypto.randomBytes(32);
  joinSwarm(topicBuffer);
}

async function joinChatRoom(e) {
  e.preventDefault();
  const topicStr = document.querySelector('#join-chat-room-topic').value;
  const topicBuffer = b4a.from(topicStr, 'hex');
  joinSwarm(topicBuffer);
}

async function joinSwarm(topicBuffer) {
  document.querySelector('#setup').classList.add('hidden');
  document.querySelector('#loading').classList.remove('hidden');

  // Join the swarm with the topic. Setting both client/server to true means that this app can act as both.
  const discovery = swarm.join(topicBuffer, { client: true, server: true });
  await discovery.flushed();

  const topic = b4a.toString(topicBuffer, 'hex');
  document.querySelector('#chat-room-topic').innerText = topic;
  document.querySelector('#loading').classList.add('hidden');
  document.querySelector('#chat').classList.remove('hidden');
}

function sendMessage(e) {
  e.preventDefault();
  const message = document.querySelector('#message').value;
  document.querySelector('#message').value = '';

  onMessageAdded(userName, message, userAvatar);

  // Send the message to all peers (that you are connected to)
  const messageObj = JSON.stringify({
    type: 'message',
    name: userName,
    message,
    avatar: userAvatar,
    timestamp: Date.now(),
  });

  const peers = [...swarm.connections];
  for (const peer of peers) {
    peer.write(messageObj);
  }
}

function scrollToBottom() {
  var container = document.getElementById("messages-container");
  container.scrollTop = container.scrollHeight;
}

function onMessageAdded(from, message, avatar) {
  
  const $div = document.createElement('div');
  $div.classList.add('message');

  const $img = document.createElement('img');
  $img.src = avatar || 'https://via.placeholder.com/40';
  $div.appendChild($img);

  const $content = document.createElement('div');
  $content.classList.add('message-content');

  const $header = document.createElement('div');
  $header.classList.add('message-header');
  $header.textContent = from;

  const $text = document.createElement('div');
  $text.classList.add('message-text');

  // Render Markdown content
  const md = window.markdownit();
  $text.innerHTML = md.render(message);

  $content.appendChild($header);
  $content.appendChild($text);
  $div.appendChild($content);

  document.querySelector('#messages').appendChild($div);
  scrollToBottom();

}
async function updateIcon(username, avatarBuffer) {
  // Update the icon in the local HTML if necessary
  // This can be adjusted as per your needs
  const userIcon = document.querySelector(`img[src*="${username}.png"]`);
  if (userIcon) {
    userIcon.src = URL.createObjectURL(new Blob([avatarBuffer]));
  }
}

initialize();