testing EventEmitter

This commit is contained in:
Raven Scott 2024-06-08 15:06:24 -04:00
parent 20aa777270
commit 9e6c803347

521
app.js
View File

@ -1,3 +1,4 @@
import { EventEmitter } from 'events';
import Hyperswarm from 'hyperswarm'; import Hyperswarm from 'hyperswarm';
import crypto from 'hypercore-crypto'; import crypto from 'hypercore-crypto';
import b4a from 'b4a'; import b4a from 'b4a';
@ -12,283 +13,295 @@ const drive = new Hyperdrive(store);
await drive.ready(); await drive.ready();
let swarm; class ChatHandler extends EventEmitter {
let userName = 'Anonymous'; constructor() {
let userAvatar = ''; super();
let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {}; this.userName = 'Anonymous';
let peerCount = 0; this.userAvatar = '';
let currentRoom = null; this.registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
this.peerCount = 0;
this.currentRoom = null;
this.swarm = new Hyperswarm();
async function initialize() { this.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 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');
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', leaveRoom);
} }
const registerDiv = document.querySelector('#register'); async initialize() {
if (registerDiv) { const servePort = 1337;
registerDiv.classList.remove('hidden'); const serve = new ServeDrive({ port: servePort, get: ({ key, filename, version }) => drive });
} await serve.ready();
console.log('Listening on http://localhost:' + serve.address().port);
swarm.on('connection', async (connection, info) => { const registerForm = document.querySelector('#register-form');
peerCount++; const selectAvatarButton = document.querySelector('#select-avatar');
updatePeerCount(); 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 iconBuffer = await drive.get(`/icons/${userName}.png`); if (registerForm) {
if (iconBuffer) { registerForm.addEventListener('submit', (e) => this.registerUser(e));
const iconMessage = JSON.stringify({ }
type: 'icon', if (selectAvatarButton) {
username: userName, selectAvatarButton.addEventListener('click', () => {
avatar: iconBuffer.toString('base64'), document.querySelector('#avatar-file').click();
}); });
connection.write(iconMessage); }
if (createChatRoomButton) {
createChatRoomButton.addEventListener('click', () => this.createChatRoom());
}
if (joinChatRoomButton) {
joinChatRoomButton.addEventListener('click', (e) => this.joinChatRoom(e));
}
if (messageForm) {
messageForm.addEventListener('submit', (e) => this.sendMessage(e));
}
if (toggleSetupBtn) {
toggleSetupBtn.addEventListener('click', () => this.toggleSetupView());
}
if (removeRoomBtn) {
removeRoomBtn.addEventListener('click', () => this.leaveRoom());
} }
connection.on('data', async (data) => { const registerDiv = document.querySelector('#register');
const messageObj = JSON.parse(data.toString()); if (registerDiv) {
if (messageObj.type === 'icon') { registerDiv.classList.remove('hidden');
const username = messageObj.username; }
const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
await drive.put(`/icons/${username}.png`, avatarBuffer); this.swarm.on('connection', async (connection, info) => {
updateIcon(username, avatarBuffer); this.peerCount++;
} else { this.updatePeerCount();
onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
const iconBuffer = await drive.get(`/icons/${this.userName}.png`);
if (iconBuffer) {
const iconMessage = JSON.stringify({
type: 'icon',
username: this.userName,
avatar: iconBuffer.toString('base64'),
});
connection.write(iconMessage);
} }
connection.on('data', (data) => this.emit('onMessage', data, connection));
connection.on('close', () => {
this.peerCount--;
this.updatePeerCount();
});
}); });
connection.on('close', () => { this.swarm.on('error', (err) => {
peerCount--; console.error('Swarm error:', err);
updatePeerCount();
}); });
});
swarm.on('error', (err) => { this.swarm.on('close', () => {
console.error('Swarm error:', err); console.log('Swarm closed');
}); });
swarm.on('close', () => { this.on('onMessage', async (data, connection) => this.handleMessage(data, connection));
console.log('Swarm closed');
});
}
function registerUser(e) {
e.preventDefault();
const regUsername = document.querySelector('#reg-username').value;
if (registeredUsers[regUsername]) {
alert('Username already taken. Please choose another.');
return;
} }
const avatarFile = document.querySelector('#avatar-file').files[0]; async registerUser(e) {
if (avatarFile) { e.preventDefault();
const reader = new FileReader(); const regUsername = document.querySelector('#reg-username').value;
reader.onload = (event) => {
const buffer = new Uint8Array(event.target.result);
drive.put(`/icons/${regUsername}.png`, buffer);
userAvatar = URL.createObjectURL(new Blob([buffer]));
registeredUsers[regUsername] = userAvatar;
localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
continueRegistration(regUsername);
};
reader.readAsArrayBuffer(avatarFile);
} else {
continueRegistration(regUsername);
}
}
async function continueRegistration(regUsername) { if (this.registeredUsers[regUsername]) {
const loadingDiv = document.querySelector('#loading'); alert('Username already taken. Please choose another.');
const setupDiv = document.querySelector('#setup'); return;
}
if (!regUsername) {
alert('Please enter a username.'); const avatarFile = document.querySelector('#avatar-file').files[0];
return; if (avatarFile) {
} const reader = new FileReader();
reader.onload = (event) => {
userName = regUsername; const buffer = new Uint8Array(event.target.result);
setupDiv.classList.remove('hidden'); drive.put(`/icons/${regUsername}.png`, buffer);
document.querySelector('#register').classList.add('hidden'); this.userAvatar = URL.createObjectURL(new Blob([buffer]));
loadingDiv.classList.add('hidden'); this.registeredUsers[regUsername] = this.userAvatar;
localStorage.setItem('registeredUsers', JSON.stringify(this.registeredUsers));
const randomTopic = crypto.randomBytes(32); this.continueRegistration(regUsername);
document.querySelector('#chat-room-topic').innerText = truncateHash(b4a.toString(randomTopic, 'hex')); };
} reader.readAsArrayBuffer(avatarFile);
} else {
async function createChatRoom() { this.continueRegistration(regUsername);
const topicBuffer = crypto.randomBytes(32);
const topic = b4a.toString(topicBuffer, 'hex');
addRoomToList(topic);
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);
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');
document.querySelector('#chat-room-topic').innerText = topic; // Set full topic here
document.querySelector('#loading').classList.add('hidden');
document.querySelector('#chat').classList.remove('hidden');
currentRoom = discovery;
clearMessages();
}
function addRoomToList(topic) {
const roomList = document.querySelector('#room-list');
const roomItem = document.createElement('li');
roomItem.textContent = truncateHash(topic);
roomItem.dataset.topic = topic;
roomItem.addEventListener('click', () => switchRoom(topic));
roomList.appendChild(roomItem);
}
function switchRoom(topic) {
const topicBuffer = b4a.from(topic, 'hex');
joinSwarm(topicBuffer);
}
function leaveRoom() {
if (currentRoom) {
const topic = b4a.toString(currentRoom.topic, 'hex');
const roomItem = document.querySelector(`li[data-topic="${topic}"]`);
if (roomItem) {
roomItem.remove();
} }
currentRoom.destroy();
currentRoom = null;
} }
document.querySelector('#chat').classList.add('hidden');
document.querySelector('#setup').classList.remove('hidden');
}
function sendMessage(e) { async continueRegistration(regUsername) {
e.preventDefault(); const loadingDiv = document.querySelector('#loading');
const message = document.querySelector('#message').value; const setupDiv = document.querySelector('#setup');
document.querySelector('#message').value = '';
onMessageAdded(userName, message, userAvatar); if (!regUsername) {
alert('Please enter a username.');
return;
}
const messageObj = JSON.stringify({ this.userName = regUsername;
type: 'message', setupDiv.classList.remove('hidden');
name: userName, document.querySelector('#register').classList.add('hidden');
message, loadingDiv.classList.add('hidden');
avatar: userAvatar,
timestamp: Date.now(),
});
const peers = [...swarm.connections]; const randomTopic = crypto.randomBytes(32);
for (const peer of peers) { document.querySelector('#chat-room-topic').innerText = this.truncateHash(b4a.toString(randomTopic, 'hex'));
peer.write(messageObj); }
async createChatRoom() {
const topicBuffer = crypto.randomBytes(32);
const topic = b4a.toString(topicBuffer, 'hex');
this.addRoomToList(topic);
this.joinSwarm(topicBuffer);
}
async joinChatRoom(e) {
e.preventDefault();
const topicStr = document.querySelector('#join-chat-room-topic').value;
const topicBuffer = b4a.from(topicStr, 'hex');
this.addRoomToList(topicStr);
this.joinSwarm(topicBuffer);
}
async joinSwarm(topicBuffer) {
if (this.currentRoom) {
this.currentRoom.destroy();
}
document.querySelector('#setup').classList.add('hidden');
document.querySelector('#loading').classList.remove('hidden');
const discovery = this.swarm.join(topicBuffer, { client: true, server: true });
await discovery.flushed();
const topic = b4a.toString(topicBuffer, 'hex');
document.querySelector('#chat-room-topic').innerText = topic; // Set full topic here
document.querySelector('#loading').classList.add('hidden');
document.querySelector('#chat').classList.remove('hidden');
this.currentRoom = discovery;
this.clearMessages();
}
addRoomToList(topic) {
const roomList = document.querySelector('#room-list');
const roomItem = document.createElement('li');
roomItem.textContent = this.truncateHash(topic);
roomItem.dataset.topic = topic;
roomItem.addEventListener('click', () => this.switchRoom(topic));
roomList.appendChild(roomItem);
}
switchRoom(topic) {
const topicBuffer = b4a.from(topic, 'hex');
this.joinSwarm(topicBuffer);
}
leaveRoom() {
if (this.currentRoom) {
const topic = b4a.toString(this.currentRoom.topic, 'hex');
const roomItem = document.querySelector(`li[data-topic="${topic}"]`);
if (roomItem) {
roomItem.remove();
}
this.currentRoom.destroy();
this.currentRoom = null;
}
document.querySelector('#chat').classList.add('hidden');
document.querySelector('#setup').classList.remove('hidden');
}
sendMessage(e) {
e.preventDefault();
const message = document.querySelector('#message').value;
document.querySelector('#message').value = '';
this.onMessageAdded(this.userName, message, this.userAvatar);
const messageObj = JSON.stringify({
type: 'message',
name: this.userName,
message,
avatar: this.userAvatar,
timestamp: Date.now(),
});
const peers = [...this.swarm.connections];
for (const peer of peers) {
peer.write(messageObj);
}
}
async handleMessage(data, connection) {
const messageObj = JSON.parse(data.toString());
if (messageObj.type === 'icon') {
const username = messageObj.username;
const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
await drive.put(`/icons/${username}.png`, avatarBuffer);
this.updateIcon(username, avatarBuffer);
} else {
this.onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
}
}
scrollToBottom() {
var container = document.getElementById("messages-container");
container.scrollTop = container.scrollHeight;
}
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');
const md = window.markdownit();
const markdownContent = md.render(message);
$text.innerHTML = markdownContent;
$content.appendChild($header);
$content.appendChild($text);
$div.appendChild($content);
document.querySelector('#messages').appendChild($div);
this.scrollToBottom();
}
truncateHash(hash) {
return `${hash.slice(0, 6)}...${hash.slice(-6)}`;
}
async updateIcon(username, avatarBuffer) {
const userIcon = document.querySelector(`img[src*="${username}.png"]`);
if (userIcon) {
userIcon.src = URL.createObjectURL(new Blob([avatarBuffer]));
}
}
clearMessages() {
const messagesContainer = document.querySelector('#messages');
while (messagesContainer.firstChild) {
messagesContainer.removeChild(messagesContainer.firstChild);
}
}
toggleSetupView() {
const setupDiv = document.querySelector('#setup');
setupDiv.classList.toggle('hidden');
}
updatePeerCount() {
// Implement this method based on your needs to update the peer count in the UI
} }
} }
function scrollToBottom() { new ChatHandler();
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');
const md = window.markdownit();
const markdownContent = md.render(message);
$text.innerHTML = markdownContent;
$content.appendChild($header);
$content.appendChild($text);
$div.appendChild($content);
document.querySelector('#messages').appendChild($div);
scrollToBottom();
}
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) {
userIcon.src = URL.createObjectURL(new Blob([avatarBuffer]));
}
}
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');
}
initialize();