Sure, here's an example HTML interface that lets a user browse events by crawling different Nostr relays:
```html
Nostr Event Browser
import { relayInit } from 'nostr-tools';
const searchForm = document.getElementById('search-form');
const resultsContainer = document.getElementById('results');
searchForm.addEventListener('submit', async (event) => {
event.preventDefault();
const query = event.target.elements.query.value;
// Clear previous results
resultsContainer.innerHTML = '';
// Search for events on each relay
const relays = ['wss://relay1.example.com', 'wss://relay2.example.com', 'wss://relay3.example.com'];
for (const relayUrl of relays) {
const relay = relayInit(relayUrl);
relay.on('connect', () => {
console.log(`Connected to ${relayUrl}`);
});
relay.on('error', (error) => {
console.error(`Failed to connect to ${relayUrl}: ${error}`);
});
await relay.connect();
const events = await relay.list([{ content: query }]);
for (const event of events) {
const eventElement = createEventElement(event);
resultsContainer.appendChild(eventElement);
}
relay.close();
}
});
function createEventElement(event) {
const div = document.createElement('div');
const contentElement = document.createElement('p');
contentElement.innerText = event.content;
div.appendChild(contentElement);
const authorElement = document.createElement('p');
authorElement.innerText = `Author: ${event.pubkey}`;
div.appendChild(authorElement);
const dateElement = document.createElement('p');
dateElement.innerText = `Date: ${new Date(event.created_at * 1000).toLocaleString()}`;
div.appendChild(dateElement);
return div;
}
```
This HTML interface includes a form for entering a search query, which is used to search for events on each Nostr relay listed in the `relays` array. The `createEventElement` function is used to create an HTML element for each event that is found, and these elements are added to the `resultsContainer` div.