import Hyperswarm from 'hyperswarm'; import crypto from 'hypercore-crypto'; import b4a from 'b4a'; import ServeDrive from 'serve-drive'; import Hyperdrive from 'hyperdrive'; import Corestore from 'corestore'; import { EventEmitter } from 'events'; import fs from "fs"; const storagePath = `./storage/`; const store = new Corestore(storagePath); const drive = new Hyperdrive(store); await drive.ready(); let swarm; let peerCount = 0; let activeRooms = []; const eventEmitter = new EventEmitter(); // Define servePort at the top level let servePort; // Object to store all the information we want to save let config = { userName: '', userAvatar: '', rooms: [], registeredUsers: {} }; // Store messages for each room let messagesStore = {}; // Function to get a random port between 49152 and 65535 function getRandomPort() { return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152; } async function initialize() { try { swarm = new Hyperswarm(); servePort = getRandomPort(); 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 joinChatRoomButton = document.querySelector('#join-chat-room'); const messageForm = document.querySelector('#message-form'); const toggleSetupBtn = document.querySelector('#toggle-setup-btn'); const removeRoomBtn = document.querySelector('#remove-room-btn'); const attachFileButton = document.getElementById('attach-file'); const fileInput = document.getElementById('file-input'); const talkButton = document.getElementById('talk-btn'); if (registerForm) { registerForm.addEventListener('submit', registerUser); } if (selectAvatarButton) { selectAvatarButton.addEventListener('click', () => { document.querySelector('#avatar-file').click(); }); } if (createChatRoomButton) { createChatRoomButton.addEventListener('click', createChatRoom); } if (joinChatRoomButton) { joinChatRoomButton.addEventListener('click', joinChatRoom); } if (messageForm) { messageForm.addEventListener('submit', sendMessage); } if (toggleSetupBtn) { toggleSetupBtn.addEventListener('click', toggleSetupView); } if (removeRoomBtn) { removeRoomBtn.addEventListener('click', () => { const topic = document.querySelector('#chat-room-topic').innerText; leaveRoom(topic); }); } if (attachFileButton) { attachFileButton.addEventListener('click', () => fileInput.click()); } if (fileInput) { fileInput.addEventListener('change', handleFileInput); } if (talkButton) { setupTalkButton(); } const configExists = fs.existsSync("./config.json"); if (configExists) { config = JSON.parse(fs.readFileSync("./config.json", 'utf8')); console.log("Read config from file:", config); // Update port in URLs config.userAvatar = updatePortInUrl(config.userAvatar); config.rooms.forEach(room => { room.alias = room.alias || truncateHash(room.topic); }); for (let user in config.registeredUsers) { config.registeredUsers[user] = updatePortInUrl(config.registeredUsers[user]); } renderRoomList(); // Render the room list with aliases // Connect to all rooms on startup for (const room of config.rooms) { const topicBuffer = b4a.from(room.topic, 'hex'); await joinSwarm(topicBuffer); } } const registerDiv = document.querySelector('#register'); if (registerDiv && !configExists) { registerDiv.classList.remove('hidden'); } eventEmitter.on('onMessage', async (messageObj) => { console.log('Received message:', messageObj); // Debugging log if (messageObj.type === 'icon') { const username = messageObj.username; if (messageObj.avatar) { const avatarBuffer = b4a.from(messageObj.avatar, 'base64'); await drive.put(`/icons/${username}.png`, avatarBuffer); updateIcon(username, avatarBuffer); } else { console.error('Received icon message with missing avatar data:', messageObj); } } else if (messageObj.type === 'file') { if (messageObj.file && messageObj.fileName) { const fileBuffer = b4a.from(messageObj.file, 'base64'); await drive.put(`/files/${messageObj.fileName}`, fileBuffer); const fileUrl = `http://localhost:${servePort}/files/${messageObj.fileName}`; addFileMessage(messageObj.name, messageObj.fileName, updatePortInUrl(fileUrl), messageObj.fileType, updatePortInUrl(messageObj.avatar), messageObj.topic); } else { console.error('Received file message with missing file data or fileName:', messageObj); } } else if (messageObj.type === 'message') { onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar, messageObj.topic); } else if (messageObj.type === 'audio') { const audioBuffer = b4a.from(messageObj.audio, 'base64'); const filePath = `/audio/${Date.now()}.webm`; await drive.put(filePath, audioBuffer); const audioUrl = `http://localhost:${servePort}${filePath}`; addAudioMessage(messageObj.name, audioUrl, messageObj.avatar, messageObj.topic); } else { console.error('Received unknown message type:', messageObj); } }); swarm.on('connection', async (connection, info) => { peerCount++; updatePeerCount(); console.log('Peer connected, current peer count:', peerCount); // Send the current user's icon to the new peer const iconBuffer = await drive.get(`/icons/${config.userName}.png`); if (iconBuffer) { const iconMessage = JSON.stringify({ type: 'icon', username: config.userName, avatar: b4a.toString(iconBuffer, 'base64'), }); connection.write(iconMessage); } connection.on('data', (data) => { const messageObj = JSON.parse(data.toString()); eventEmitter.emit('onMessage', messageObj); }); connection.on('close', () => { peerCount--; updatePeerCount(); console.log('Peer disconnected, current peer count:', peerCount); }); }); swarm.on('error', (err) => { console.error('Swarm error:', err); }); swarm.on('close', () => { console.log('Swarm closed'); }); // Initialize highlight.js once the DOM is fully loaded document.addEventListener("DOMContentLoaded", (event) => { hljs.highlightAll(); }); } catch (error) { console.error('Error during initialization:', error); } } function setupTalkButton() { const talkButton = document.getElementById('talk-btn'); if (!talkButton) return; let mediaRecorder; let audioChunks = []; talkButton.addEventListener('mousedown', async () => { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorder = new MediaRecorder(stream); mediaRecorder.start(); mediaRecorder.addEventListener('dataavailable', event => { audioChunks.push(event.data); }); mediaRecorder.addEventListener('stop', async () => { const audioBlob = new Blob(audioChunks); audioChunks = []; const arrayBuffer = await audioBlob.arrayBuffer(); const buffer = new Uint8Array(arrayBuffer); const topic = document.querySelector('#chat-room-topic').innerText; const filePath = `/audio/${Date.now()}.webm`; await drive.put(filePath, buffer); const audioUrl = `http://localhost:${servePort}${filePath}`; const audioMessage = { type: 'audio', name: config.userName, audio: b4a.toString(buffer, 'base64'), audioType: audioBlob.type, avatar: updatePortInUrl(config.userAvatar), topic: topic }; console.log('Sending audio message:', audioMessage); // Debugging log const peers = [...swarm.connections]; for (const peer of peers) { peer.write(JSON.stringify(audioMessage)); } addAudioMessage(config.userName, audioUrl, config.userAvatar, topic); }); }); talkButton.addEventListener('mouseup', () => { if (mediaRecorder) { mediaRecorder.stop(); } }); talkButton.addEventListener('mouseleave', () => { if (mediaRecorder && mediaRecorder.state === 'recording') { mediaRecorder.stop(); } }); } function registerUser(e) { e.preventDefault(); const regUsername = document.querySelector('#reg-username').value; if (config.registeredUsers[regUsername]) { alert('Username already taken. Please choose another.'); return; } const avatarFile = document.querySelector('#avatar-file').files[0]; if (avatarFile) { const reader = new FileReader(); reader.onload = async (event) => { const buffer = new Uint8Array(event.target.result); await drive.put(`/icons/${regUsername}.png`, buffer); config.userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL config.registeredUsers[regUsername] = `http://localhost:${servePort}/icons/${regUsername}.png`; // Use placeholder URL writeConfigToFile("./config.json"); continueRegistration(regUsername); }; reader.readAsArrayBuffer(avatarFile); } else { continueRegistration(regUsername); } } async function continueRegistration(regUsername) { const loadingDiv = document.querySelector('#loading'); const setupDiv = document.querySelector('#setup'); if (!regUsername) { alert('Please enter a username.'); return; } config.userName = regUsername; setupDiv.classList.remove('hidden'); document.querySelector('#register').classList.add('hidden'); loadingDiv.classList.add('hidden'); const randomTopic = crypto.randomBytes(32); document.querySelector('#chat-room-topic').innerText = truncateHash(b4a.toString(randomTopic, 'hex')); writeConfigToFile("./config.json"); } async function createChatRoom() { const topicBuffer = crypto.randomBytes(32); const topic = b4a.toString(topicBuffer, 'hex'); addRoomToList(topic); await joinSwarm(topicBuffer); } async function joinChatRoom(e) { e.preventDefault(); const topicStr = document.querySelector('#join-chat-room-topic').value; const topicBuffer = b4a.from(topicStr, 'hex'); addRoomToList(topicStr); await joinSwarm(topicBuffer); } async function joinSwarm(topicBuffer) { const topic = b4a.toString(topicBuffer, 'hex'); if (!activeRooms.some(room => room.topic === topic)) { try { const discovery = swarm.join(topicBuffer, { client: true, server: true }); await discovery.flushed(); activeRooms.push({ topic, discovery }); console.log('Joined room:', topic); // Debugging log renderMessagesForRoom(topic); } catch (error) { console.error('Error joining swarm for topic:', topic, error); } } } function addRoomToList(topic) { const roomList = document.querySelector('#room-list'); const roomItem = document.createElement('li'); roomItem.textContent = truncateHash(topic); roomItem.dataset.topic = topic; roomItem.addEventListener('dblclick', () => enterEditMode(roomItem)); roomItem.addEventListener('click', () => switchRoom(topic)); roomList.appendChild(roomItem); config.rooms.push({ topic, alias: truncateHash(topic) }); writeConfigToFile("./config.json"); } function enterEditMode(roomItem) { const originalText = roomItem.textContent; const topic = roomItem.dataset.topic; roomItem.innerHTML = ''; const input = document.createElement('input'); input.type = 'text'; input.value = originalText; input.style.maxWidth = '100%'; // Add this line to set the max width input.style.boxSizing = 'border-box'; // Add this line to ensure padding and border are included in the width roomItem.appendChild(input); input.focus(); input.addEventListener('blur', () => { exitEditMode(roomItem, input, topic); }); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { exitEditMode(roomItem, input, topic); } else if (e.key === 'Escape') { roomItem.textContent = originalText; } }); } function exitEditMode(roomItem, input, topic) { const newAlias = input.value.trim(); if (newAlias) { roomItem.textContent = newAlias; // Update the config with the new alias const roomConfig = config.rooms.find(room => room.topic === topic); if (roomConfig) { roomConfig.alias = newAlias; writeConfigToFile("./config.json"); } // Check if the edited room is the current room in view const currentTopic = document.querySelector('#chat-room-topic').innerText; if (currentTopic === topic) { const chatRoomName = document.querySelector('#chat-room-name'); if (chatRoomName) { chatRoomName.innerText = newAlias; } } } else { roomItem.textContent = truncateHash(topic); } } function switchRoom(topic) { console.log('Switching to room:', topic); // Debugging log const chatRoomTopic = document.querySelector('#chat-room-topic'); const chatRoomName = document.querySelector('#chat-room-name'); if (chatRoomTopic) { chatRoomTopic.innerText = topic; // Set full topic here } else { console.error('Element #chat-room-topic not found'); } if (chatRoomName) { // Update the room name in the header const room = config.rooms.find(r => r.topic === topic); const roomName = room ? room.alias : truncateHash(topic); chatRoomName.innerText = roomName; } else { console.error('Element #chat-room-name not found'); } clearMessages(); renderMessagesForRoom(topic); // Show chat UI elements document.querySelector('#chat').classList.remove('hidden'); document.querySelector('#setup').classList.add('hidden'); } function leaveRoom(topic) { const roomIndex = activeRooms.findIndex(room => room.topic === topic); if (roomIndex !== -1) { const room = activeRooms[roomIndex]; room.discovery.destroy(); activeRooms.splice(roomIndex, 1); } const roomItem = document.querySelector(`li[data-topic="${topic}"]`); if (roomItem) { roomItem.remove(); } config.rooms = config.rooms.filter(e => e.topic !== topic); writeConfigToFile("./config.json"); if (activeRooms.length > 0) { switchRoom(activeRooms[0].topic); } else { document.querySelector('#chat').classList.add('hidden'); document.querySelector('#setup').classList.remove('hidden'); } } function sendMessage(e) { e.preventDefault(); const message = document.querySelector('#message').value; document.querySelector('#message').value = ''; const topic = document.querySelector('#chat-room-topic').innerText; console.log('Sending message:', message); // Debugging log onMessageAdded(config.userName, message, config.userAvatar, topic); const messageObj = JSON.stringify({ type: 'message', name: config.userName, message, avatar: config.userAvatar, topic: topic, timestamp: Date.now() }); const peers = [...swarm.connections]; for (const peer of peers) { peer.write(messageObj); } } async function handleFileInput(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = async (event) => { const buffer = new Uint8Array(event.target.result); const filePath = `/files/${file.name}`; await drive.put(filePath, buffer); const fileUrl = `http://localhost:${servePort}${filePath}`; const topic = document.querySelector('#chat-room-topic').innerText; const fileMessage = { type: 'file', name: config.userName, fileName: file.name, file: b4a.toString(buffer, 'base64'), fileType: file.type, avatar: updatePortInUrl(config.userAvatar), topic: topic }; console.log('Sending file message:', fileMessage); // Debugging log const peers = [...swarm.connections]; for (const peer of peers) { peer.write(JSON.stringify(fileMessage)); } addFileMessage(config.userName, file.name, fileUrl, file.type, config.userAvatar, topic); }; reader.readAsArrayBuffer(file); } } function addFileMessage(from, fileName, fileUrl, fileType, avatar, topic) { console.log('Adding file message:', { from, fileName, fileUrl, fileType, avatar, topic }); // Debugging log const $div = document.createElement('div'); $div.classList.add('message'); const $img = document.createElement('img'); $img.src = avatar || 'https://via.placeholder.com/40'; $img.classList.add('avatar'); $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; $content.appendChild($header); if (fileType.startsWith('image/')) { const $image = document.createElement('img'); $image.src = fileUrl; $image.alt = fileName; $image.classList.add('attached-image'); $content.appendChild($image); } else { const $fileButton = document.createElement('button'); $fileButton.textContent = `Download File: ${fileName}`; $fileButton.onclick = function() { const $fileLink = document.createElement('a'); $fileLink.href = fileUrl; $fileLink.download = fileName; $fileLink.click(); }; $content.appendChild($fileButton); } $div.appendChild($content); // Only render the message if it's for the current room const currentTopic = document.querySelector('#chat-room-topic').innerText; if (currentTopic === topic) { document.querySelector('#messages').appendChild($div); scrollToBottom(); } else { console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic}`); // Debugging log } } function updatePeerCount() { const peerCountElement = document.querySelector('#peers-count'); if (peerCountElement) { peerCountElement.textContent = peerCount; // Display the actual peer count } } function scrollToBottom() { var container = document.getElementById("messages-container"); container.scrollTop = container.scrollHeight; } function onMessageAdded(from, message, avatar, topic) { console.log('Adding message:', { from, message, avatar, topic }); // Debugging log const messageObj = { from, message, avatar }; // Add the message to the store addMessageToStore(topic, messageObj); // Only render messages for the current room const currentTopic = document.querySelector('#chat-room-topic').innerText; if (currentTopic === topic) { const $div = document.createElement('div'); $div.classList.add('message'); const $img = document.createElement('img'); $img.src = updatePortInUrl(avatar) || 'https://via.placeholder.com/40'; // Default to a placeholder image if avatar URL is not provided $img.classList.add('avatar'); $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'); const md = window.markdownit({ highlight: function (str, lang) { if (lang && hljs.getLanguage(lang)) { try { return hljs.highlight(str, { language: lang }).value; } catch (__) {} } return ''; // use external default escaping } }); const markdownContent = md.render(message); $text.innerHTML = markdownContent; $content.appendChild($header); $content.appendChild($text); $div.appendChild($content); document.querySelector('#messages').appendChild($div); scrollToBottom(); } else { console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic}`); // Debugging log } } function addAudioMessage(from, audioUrl, avatar, topic) { console.log('Adding audio message:', { from, audioUrl, avatar, topic }); // Debugging log const $div = document.createElement('div'); $div.classList.add('message'); const $img = document.createElement('img'); $img.src = updatePortInUrl(avatar) || 'https://via.placeholder.com/40'; $img.classList.add('avatar'); $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; $content.appendChild($header); const $audio = document.createElement('audio'); $audio.controls = true; if (from !== config.userName) { $audio.autoplay = true; // Add autoplay attribute for peers only } $audio.src = audioUrl; $audio.classList.add('attached-audio'); $content.appendChild($audio); $div.appendChild($content); // Only render the message if it's for the current room const currentTopic = document.querySelector('#chat-room-topic').innerText; if (currentTopic === topic) { document.querySelector('#messages').appendChild($div); scrollToBottom(); } else { console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic}`); // Debugging log } } function truncateHash(hash) { return `${hash.slice(0, 6)}...${hash.slice(-6)}`; } async function updateIcon(username, avatarBuffer) { const userIcon = document.querySelector(`img[src*="${username}.png"]`); if (userIcon) { const avatarBlob = new Blob([avatarBuffer], { type: 'image/png' }); const avatarUrl = URL.createObjectURL(avatarBlob); userIcon.src = updatePortInUrl(avatarUrl); config.userAvatar = avatarUrl; writeConfigToFile("./config.json"); } } function clearMessages() { const messagesContainer = document.querySelector('#messages'); while (messagesContainer.firstChild) { messagesContainer.removeChild(messagesContainer.firstChild); } } function toggleSetupView() { const setupDiv = document.querySelector('#setup'); setupDiv.classList.toggle('hidden'); } function writeConfigToFile(filePath) { fs.writeFile(filePath, JSON.stringify(config), (err) => { if (err) return console.error(err); console.log("File has been created"); }); } function updatePortInUrl(url) { if (!url) return url; const urlObject = new URL(url); urlObject.port = servePort; return urlObject.toString(); } function renderRoomList() { const roomList = document.querySelector('#room-list'); roomList.innerHTML = ''; config.rooms.forEach(room => { const roomItem = document.createElement('li'); roomItem.textContent = room.alias || truncateHash(room.topic); roomItem.dataset.topic = room.topic; roomItem.addEventListener('dblclick', () => enterEditMode(roomItem)); roomItem.addEventListener('click', () => switchRoom(room.topic)); roomList.appendChild(roomItem); }); } function renderMessagesForRoom(topic) { console.log('Rendering messages for room:', topic); // Debugging log // Clear the message area clearMessages(); // Fetch and render messages for the selected room const messages = getMessagesForRoom(topic); messages.forEach(message => { onMessageAdded(message.from, message.message, message.avatar, topic); }); } function getMessagesForRoom(topic) { return messagesStore[topic] || []; } function addMessageToStore(topic, messageObj) { if (!messagesStore[topic]) { messagesStore[topic] = []; } messagesStore[topic].push(messageObj); } // Call this function when loading the rooms initially renderRoomList(); initialize();