REFRACTOR: New connection logic, all saved rooms are connected on init. New Room tracking and message tracking with message history after switching. Better connection management

This commit is contained in:
Raven Scott 2024-06-10 21:51:34 -04:00
parent d0d408230a
commit 6a0b05df86

250
app.js
View File

@ -16,7 +16,7 @@ await drive.ready();
let swarm; let swarm;
let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {}; let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
let peerCount = 0; let peerCount = 0;
let currentRoom = null; let activeRooms = [];
const eventEmitter = new EventEmitter(); const eventEmitter = new EventEmitter();
// Define servePort at the top level // Define servePort at the top level
@ -29,7 +29,10 @@ let config = {
rooms: [] rooms: []
}; };
// Function to get a random port between 1337 and 2223 // Store messages for each room
let messagesStore = {};
// Function to get a random port between 49152 and 65535
function getRandomPort() { function getRandomPort() {
return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152; return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152;
} }
@ -73,7 +76,10 @@ async function initialize() {
toggleSetupBtn.addEventListener('click', toggleSetupView); toggleSetupBtn.addEventListener('click', toggleSetupView);
} }
if (removeRoomBtn) { if (removeRoomBtn) {
removeRoomBtn.addEventListener('click', leaveRoom); removeRoomBtn.addEventListener('click', () => {
const topic = document.querySelector('#chat-room-topic').innerText;
leaveRoom(topic);
});
} }
if (attachFileButton) { if (attachFileButton) {
attachFileButton.addEventListener('click', () => fileInput.click()); attachFileButton.addEventListener('click', () => fileInput.click());
@ -85,7 +91,7 @@ async function initialize() {
const configExists = fs.existsSync("./config.json"); const configExists = fs.existsSync("./config.json");
if (configExists) { if (configExists) {
config = JSON.parse(fs.readFileSync("./config.json", 'utf8')); config = JSON.parse(fs.readFileSync("./config.json", 'utf8'));
console.log("Read config from file:", config) console.log("Read config from file:", config);
// Update port in URLs // Update port in URLs
config.userAvatar = updatePortInUrl(config.userAvatar); config.userAvatar = updatePortInUrl(config.userAvatar);
config.rooms.forEach(room => { config.rooms.forEach(room => {
@ -96,6 +102,12 @@ async function initialize() {
} }
renderRoomList(); // Render the room list with aliases 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'); const registerDiv = document.querySelector('#register');
@ -120,12 +132,12 @@ async function initialize() {
const fileBuffer = b4a.from(messageObj.file, 'base64'); const fileBuffer = b4a.from(messageObj.file, 'base64');
await drive.put(`/files/${messageObj.fileName}`, fileBuffer); await drive.put(`/files/${messageObj.fileName}`, fileBuffer);
const fileUrl = `http://localhost:${servePort}/files/${messageObj.fileName}`; const fileUrl = `http://localhost:${servePort}/files/${messageObj.fileName}`;
addFileMessage(messageObj.name, messageObj.fileName, updatePortInUrl(fileUrl), messageObj.fileType, updatePortInUrl(messageObj.avatar)); addFileMessage(messageObj.name, messageObj.fileName, updatePortInUrl(fileUrl), messageObj.fileType, updatePortInUrl(messageObj.avatar), messageObj.topic);
} else { } else {
console.error('Received file message with missing file data or fileName:', messageObj); console.error('Received file message with missing file data or fileName:', messageObj);
} }
} else if (messageObj.type === 'message') { } else if (messageObj.type === 'message') {
onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar); onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar, messageObj.topic);
} else { } else {
console.error('Received unknown message type:', messageObj); console.error('Received unknown message type:', messageObj);
} }
@ -223,7 +235,7 @@ async function createChatRoom() {
const topicBuffer = crypto.randomBytes(32); const topicBuffer = crypto.randomBytes(32);
const topic = b4a.toString(topicBuffer, 'hex'); const topic = b4a.toString(topicBuffer, 'hex');
addRoomToList(topic); addRoomToList(topic);
joinSwarm(topicBuffer); await joinSwarm(topicBuffer);
} }
async function joinChatRoom(e) { async function joinChatRoom(e) {
@ -231,27 +243,21 @@ async function joinChatRoom(e) {
const topicStr = document.querySelector('#join-chat-room-topic').value; const topicStr = document.querySelector('#join-chat-room-topic').value;
const topicBuffer = b4a.from(topicStr, 'hex'); const topicBuffer = b4a.from(topicStr, 'hex');
addRoomToList(topicStr); addRoomToList(topicStr);
joinSwarm(topicBuffer); await joinSwarm(topicBuffer);
} }
async function joinSwarm(topicBuffer) { async function joinSwarm(topicBuffer) {
if (currentRoom) {
currentRoom.destroy();
}
document.querySelector('#setup').classList.add('hidden');
document.querySelector('#loading').classList.remove('hidden');
const discovery = swarm.join(topicBuffer, { client: true, server: true });
await discovery.flushed();
const topic = b4a.toString(topicBuffer, 'hex'); const topic = b4a.toString(topicBuffer, 'hex');
document.querySelector('#chat-room-topic').innerText = topic; // Set full topic here if (!activeRooms.some(room => room.topic === topic)) {
document.querySelector('#loading').classList.add('hidden'); const discovery = swarm.join(topicBuffer, { client: true, server: true });
document.querySelector('#chat').classList.remove('hidden'); await discovery.flushed();
currentRoom = discovery; activeRooms.push({ topic, discovery });
clearMessages();
console.log('Joined room:', topic); // Debugging log
renderMessagesForRoom(topic);
}
} }
function addRoomToList(topic) { function addRoomToList(topic) {
@ -260,9 +266,7 @@ function addRoomToList(topic) {
roomItem.textContent = truncateHash(topic); roomItem.textContent = truncateHash(topic);
roomItem.dataset.topic = topic; roomItem.dataset.topic = topic;
// Add double-click event listener for editing room name
roomItem.addEventListener('dblclick', () => enterEditMode(roomItem)); roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
roomItem.addEventListener('click', () => switchRoom(topic)); roomItem.addEventListener('click', () => switchRoom(topic));
roomList.appendChild(roomItem); roomList.appendChild(roomItem);
@ -270,19 +274,6 @@ function addRoomToList(topic) {
writeConfigToFile("./config.json"); writeConfigToFile("./config.json");
} }
function addRoomToListWithoutWritingToConfig(topic) {
const roomList = document.querySelector('#room-list');
const roomItem = document.createElement('li');
roomItem.textContent = truncateHash(topic);
roomItem.dataset.topic = topic;
// Add double-click event listener for editing room name
roomItem.addEventListener('dblclick', () => enterEditMode(roomItem));
roomItem.addEventListener('click', () => switchRoom(topic));
roomList.appendChild(roomItem);
}
function enterEditMode(roomItem) { function enterEditMode(roomItem) {
const originalText = roomItem.textContent; const originalText = roomItem.textContent;
const topic = roomItem.dataset.topic; const topic = roomItem.dataset.topic;
@ -328,26 +319,38 @@ function exitEditMode(roomItem, input, topic) {
} }
function switchRoom(topic) { function switchRoom(topic) {
const topicBuffer = b4a.from(topic, 'hex'); console.log('Switching to room:', topic); // Debugging log
joinSwarm(topicBuffer); document.querySelector('#chat-room-topic').innerText = topic; // Set full topic here
clearMessages();
renderMessagesForRoom(topic);
// Show chat UI elements
document.querySelector('#chat').classList.remove('hidden');
document.querySelector('#setup').classList.add('hidden');
} }
function leaveRoom() { function leaveRoom(topic) {
if (currentRoom) { const roomIndex = activeRooms.findIndex(room => room.topic === topic);
const topic = b4a.toString(currentRoom.topic, 'hex'); if (roomIndex !== -1) {
const roomItem = document.querySelector(`li[data-topic="${topic}"]`); const room = activeRooms[roomIndex];
if (roomItem) { room.discovery.destroy();
roomItem.remove(); activeRooms.splice(roomIndex, 1);
} }
config.rooms = config.rooms.filter(e => e.topic !== topic); const roomItem = document.querySelector(`li[data-topic="${topic}"]`);
writeConfigToFile("./config.json"); if (roomItem) {
roomItem.remove();
currentRoom.destroy(); }
currentRoom = null;
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');
} }
document.querySelector('#chat').classList.add('hidden');
document.querySelector('#setup').classList.remove('hidden');
} }
function sendMessage(e) { function sendMessage(e) {
@ -355,7 +358,11 @@ function sendMessage(e) {
const message = document.querySelector('#message').value; const message = document.querySelector('#message').value;
document.querySelector('#message').value = ''; document.querySelector('#message').value = '';
onMessageAdded(config.userName, message, config.userAvatar); const topic = document.querySelector('#chat-room-topic').innerText;
console.log('Sending message:', message); // Debugging log
onMessageAdded(config.userName, message, config.userAvatar, topic);
let peersPublicKeys = []; let peersPublicKeys = [];
peersPublicKeys.push([...swarm.connections].map(peer => peer.remotePublicKey.toString('hex'))); peersPublicKeys.push([...swarm.connections].map(peer => peer.remotePublicKey.toString('hex')));
@ -367,7 +374,7 @@ function sendMessage(e) {
name: config.userName, name: config.userName,
message, message,
avatar: config.userAvatar, avatar: config.userAvatar,
topic: b4a.toString(currentRoom.topic, 'hex'), topic: topic,
peers: peersPublicKeys, // Deprecated. To be deleted in future updates peers: peersPublicKeys, // Deprecated. To be deleted in future updates
timestamp: Date.now(), timestamp: Date.now(),
readableTimestamp: new Date().toLocaleString(), // Added human-readable timestamp readableTimestamp: new Date().toLocaleString(), // Added human-readable timestamp
@ -389,6 +396,8 @@ async function handleFileInput(event) {
await drive.put(filePath, buffer); await drive.put(filePath, buffer);
const fileUrl = `http://localhost:${servePort}${filePath}`; const fileUrl = `http://localhost:${servePort}${filePath}`;
const topic = document.querySelector('#chat-room-topic').innerText;
const fileMessage = { const fileMessage = {
type: 'file', type: 'file',
name: config.userName, name: config.userName,
@ -396,6 +405,7 @@ async function handleFileInput(event) {
file: b4a.toString(buffer, 'base64'), file: b4a.toString(buffer, 'base64'),
fileType: file.type, fileType: file.type,
avatar: updatePortInUrl(config.userAvatar), avatar: updatePortInUrl(config.userAvatar),
topic: topic
}; };
console.log('Sending file message:', fileMessage); // Debugging log console.log('Sending file message:', fileMessage); // Debugging log
@ -405,7 +415,7 @@ async function handleFileInput(event) {
peer.write(JSON.stringify(fileMessage)); peer.write(JSON.stringify(fileMessage));
} }
addFileMessage(config.userName, file.name, fileUrl, file.type, config.userAvatar); addFileMessage(config.userName, file.name, fileUrl, file.type, config.userAvatar, topic);
}; };
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
} }
@ -420,7 +430,7 @@ function sendFileMessage(name, fileUrl, fileType, avatar) {
fileUrl, fileUrl,
fileType, fileType,
avatar, avatar,
topic: b4a.toString(currentRoom.topic, 'hex'), topic: document.querySelector('#chat-room-topic').innerText,
timestamp: Date.now(), timestamp: Date.now(),
}); });
@ -429,10 +439,11 @@ function sendFileMessage(name, fileUrl, fileType, avatar) {
peer.write(messageObj); peer.write(messageObj);
} }
addFileMessage(name, fileName, fileUrl, fileType, avatar); addFileMessage(name, fileName, fileUrl, fileType, avatar, document.querySelector('#chat-room-topic').innerText);
} }
function addFileMessage(from, fileName, fileUrl, fileType, avatar) { 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'); const $div = document.createElement('div');
$div.classList.add('message'); $div.classList.add('message');
@ -459,17 +470,24 @@ function addFileMessage(from, fileName, fileUrl, fileType, avatar) {
const $fileButton = document.createElement('button'); const $fileButton = document.createElement('button');
$fileButton.textContent = `Download File: ${fileName}`; $fileButton.textContent = `Download File: ${fileName}`;
$fileButton.onclick = function() { $fileButton.onclick = function() {
const $fileLink = document.createElement('a'); const $fileLink = document.createElement('a');
$fileLink.href = fileUrl; $fileLink.href = fileUrl;
$fileLink.download = fileName; $fileLink.download = fileName;
$fileLink.click(); $fileLink.click();
}; };
$content.appendChild($fileButton); $content.appendChild($fileButton);
} }
$div.appendChild($content); $div.appendChild($content);
document.querySelector('#messages').appendChild($div);
scrollToBottom(); // 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() { function updatePeerCount() {
@ -484,46 +502,61 @@ function scrollToBottom() {
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
} }
function onMessageAdded(from, message, avatar) { function onMessageAdded(from, message, avatar, topic) {
const $div = document.createElement('div'); console.log('Adding message:', { from, message, avatar, topic }); // Debugging log
$div.classList.add('message'); const messageObj = {
from,
message,
avatar
};
const $img = document.createElement('img'); // Add the message to the store
addMessageToStore(topic, messageObj);
$img.src = updatePortInUrl(avatar) || 'https://via.placeholder.com/40'; // Default to a placeholder image if avatar URL is not provided // Only render messages for the current room
$img.classList.add('avatar'); const currentTopic = document.querySelector('#chat-room-topic').innerText;
$div.appendChild($img); if (currentTopic === topic) {
const $div = document.createElement('div');
$div.classList.add('message');
const $content = document.createElement('div'); const $img = document.createElement('img');
$content.classList.add('message-content'); $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 $header = document.createElement('div'); const $content = document.createElement('div');
$header.classList.add('message-header'); $content.classList.add('message-content');
$header.textContent = from;
const $text = document.createElement('div'); const $header = document.createElement('div');
$text.classList.add('message-text'); $header.classList.add('message-header');
$header.textContent = from;
const md = window.markdownit({ const $text = document.createElement('div');
highlight: function (str, lang) { $text.classList.add('message-text');
if (lang && hljs.getLanguage(lang)) {
try { const md = window.markdownit({
return hljs.highlight(str, { language: lang }).value; highlight: function (str, lang) {
} catch (__) {} if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (__) {}
}
return ''; // use external default escaping
} }
return ''; // use external default escaping });
}
});
const markdownContent = md.render(message); const markdownContent = md.render(message);
$text.innerHTML = markdownContent; $text.innerHTML = markdownContent;
$content.appendChild($header); $content.appendChild($header);
$content.appendChild($text); $content.appendChild($text);
$div.appendChild($content); $div.appendChild($content);
document.querySelector('#messages').appendChild($div); document.querySelector('#messages').appendChild($div);
scrollToBottom(); scrollToBottom();
} else {
console.log(`Message for topic ${topic} not rendered because current topic is ${currentTopic}`); // Debugging log
}
} }
function truncateHash(hash) { function truncateHash(hash) {
@ -583,6 +616,29 @@ function renderRoomList() {
}); });
} }
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 // Call this function when loading the rooms initially
renderRoomList(); renderRoomList();