mirror of
https://github.com/Blah-IM/blahrs.git
synced 2025-05-01 00:31:09 +00:00
Impl example frontend
This commit is contained in:
oxalica
parent
0c905f61cf
commit
e71140e1fa
2 changed files with 302 additions and 0 deletions
73
pages/index.html
Normal file
73
pages/index.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>poc</title>
|
||||
<script src="./main.js" defer></script>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
#msg-flow {
|
||||
flex: 1;
|
||||
overflow: scroll;
|
||||
}
|
||||
#msg-flow > * {
|
||||
display: block;
|
||||
}
|
||||
.log {
|
||||
margin: auto;
|
||||
font-style: italic;
|
||||
}
|
||||
.log::before {
|
||||
content: "«";
|
||||
}
|
||||
.log::after {
|
||||
content: "»";
|
||||
}
|
||||
|
||||
#input-area > * {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#input-area > * > label {
|
||||
margin: auto;
|
||||
}
|
||||
#input-area > * > input {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="msg-flow">
|
||||
<span class="log">please enter room url below and press ENTER</span>
|
||||
</div>
|
||||
<div id="input-area">
|
||||
<div>
|
||||
<label for="user-pubkey">user pubkey:</label>
|
||||
<input type="text" id="user-pubkey" placeholder="-" readonly />
|
||||
<button id="regen-key">regenerate</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="room-url">room url:</label>
|
||||
<input
|
||||
type="url"
|
||||
id="room-url"
|
||||
placeholder="https://example.com"
|
||||
pattern="https://.*"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="chat">chat:</label>
|
||||
<input type="text" id="chat" placeholder="message" />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
229
pages/main.js
Normal file
229
pages/main.js
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
const msgFlow = document.querySelector('#msg-flow');
|
||||
const userPubkeyDisplay = document.querySelector('#user-pubkey');
|
||||
const roomUrlInput = document.querySelector('#room-url');
|
||||
const chatInput = document.querySelector('#chat');
|
||||
const regenKeyBtn = document.querySelector('#regen-key');
|
||||
|
||||
let roomUrl = '';
|
||||
let roomUuid = null;
|
||||
let feed = null;
|
||||
let keypair = null;
|
||||
|
||||
function bufToHex(buf) {
|
||||
return [...new Uint8Array(buf)]
|
||||
.map(x => x.toString(16).padStart(2, '0'))
|
||||
.join('');
|
||||
}
|
||||
|
||||
function hexToBuf(hex) {
|
||||
return new Uint8Array(hex.match(/[\da-f]{2}/gi).map(m => parseInt(m, 16)))
|
||||
}
|
||||
|
||||
function appendMsg(el) {
|
||||
msgFlow.append(el);
|
||||
msgFlow.scrollTo({
|
||||
top: msgFlow.scrollTopMax,
|
||||
behavior: 'instant',
|
||||
})
|
||||
}
|
||||
|
||||
function log(msg, isHtml) {
|
||||
const el = document.createElement('span', {});
|
||||
el.classList.add('log');
|
||||
if (isHtml) {
|
||||
el.innerHTML = msg;
|
||||
} else {
|
||||
el.innerText = msg;
|
||||
}
|
||||
appendMsg(el)
|
||||
}
|
||||
|
||||
async function loadKeypair() {
|
||||
try {
|
||||
const rawJson = localStorage.getItem('keypair');
|
||||
if (rawJson === null) return false;
|
||||
const json = JSON.parse(rawJson)
|
||||
keypair = {
|
||||
publicKey: await crypto.subtle.importKey('jwk', json.publicKey, { name: 'Ed25519' }, true, ['verify']),
|
||||
privateKey: await crypto.subtle.importKey('jwk', json.privateKey, { name: 'Ed25519' }, true, ['sign']),
|
||||
};
|
||||
log('loaded keypair from localStorage');
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
log('failed to load keypair from localStorage');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function generateKeypair() {
|
||||
log('generating keypair');
|
||||
regenKeyBtn.disabled = true;
|
||||
chatInput.disabled = true;
|
||||
try {
|
||||
keypair = await crypto.subtle.generateKey('Ed25519', true, ['sign', 'verify']);
|
||||
} catch (e) {
|
||||
console.error('keygen', e);
|
||||
chatInput.disabled = true;
|
||||
log(
|
||||
`failed to generate keypair, posting is disabled. maybe try Firefox or Safari?
|
||||
<a target="_blank" href="https://caniuse.com/mdn-api_subtlecrypto_sign_ed25519">
|
||||
check caniuse.com
|
||||
</a>
|
||||
`,
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
log('keypair generated');
|
||||
|
||||
regenKeyBtn.disabled = false;
|
||||
chatInput.disabled = false;
|
||||
|
||||
try {
|
||||
const ser = (k) => crypto.subtle.exportKey('jwk', k);
|
||||
localStorage.setItem('keypair', JSON.stringify({
|
||||
publicKey: await ser(keypair.publicKey),
|
||||
privateKey: await ser(keypair.privateKey),
|
||||
}));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
log('failed to store keypair into localStorage');
|
||||
}
|
||||
}
|
||||
|
||||
async function showChatMsg(chat) {
|
||||
let verifyRet = null;
|
||||
crypto.subtle.exportKey('raw', keypair.publicKey)
|
||||
try {
|
||||
const signeeBytes = (new TextEncoder()).encode(JSON.stringify(chat.signee));
|
||||
const rawkey = hexToBuf(chat.signee.user);
|
||||
const senderKey = await crypto.subtle.importKey('raw', rawkey, { name: 'Ed25519' }, true, ['verify']);
|
||||
const success = await crypto.subtle.verify('Ed25519', senderKey, hexToBuf(chat.sig), signeeBytes);
|
||||
verifyRet = success ? '✔️' : '✖️';
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
verifyRet = `✖️ ${e}`;
|
||||
}
|
||||
|
||||
const shortUser = chat.signee.user.replace(/^(.{4}).*(.{4})$/, '$1…$2');
|
||||
const time = new Date(chat.signee.timestamp * 1000).toISOString();
|
||||
|
||||
const el = document.createElement('div', {});
|
||||
el.classList.add('msg');
|
||||
el.innerText = `${shortUser} [${time}] [${verifyRet}]: ${chat.signee.payload.text}`;
|
||||
appendMsg(el)
|
||||
}
|
||||
|
||||
async function connectRoom(url) {
|
||||
if (url === '' || url == roomUrl) return;
|
||||
const match = url.match(/^https?:\/\/.*\/([a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12})\/?/);
|
||||
if (match === null) {
|
||||
log('invalid room url');
|
||||
return;
|
||||
}
|
||||
|
||||
if (feed !== null) {
|
||||
feed.close();
|
||||
}
|
||||
roomUrl = url;
|
||||
roomUuid = match[1];
|
||||
|
||||
log(`fetching room: ${url}`);
|
||||
|
||||
fetch(`${url}/item`)
|
||||
.then((resp) => resp.json())
|
||||
// TODO: This response format is to-be-decided.
|
||||
.then(async (json) => {
|
||||
const [{ title }, items] = json
|
||||
document.title = `room: ${title}`
|
||||
items.reverse();
|
||||
for (const [_cid, chat] of items) {
|
||||
await showChatMsg(chat);
|
||||
}
|
||||
log('---history---')
|
||||
});
|
||||
|
||||
// TODO: There is a time window where events would be lost.
|
||||
|
||||
feed = new EventSource(`${url}/event`);
|
||||
feed.onopen = (_) => {
|
||||
log('listening on events');
|
||||
}
|
||||
feed.onerror = (e) => {
|
||||
console.error(e);
|
||||
log('event listener error');
|
||||
};
|
||||
feed.onmessage = async (e) => {
|
||||
console.log('feed event', e.data);
|
||||
const chat = JSON.parse(e.data);
|
||||
showChatMsg(chat);
|
||||
};
|
||||
}
|
||||
|
||||
async function postChat(text) {
|
||||
text = text.trim();
|
||||
if (keypair === null || roomUuid === null || text === '') return;
|
||||
|
||||
chatInput.disabled = true;
|
||||
|
||||
const userKey = bufToHex(await crypto.subtle.exportKey('raw', keypair.publicKey));
|
||||
const nonceBuf = new Uint32Array(1);
|
||||
crypto.getRandomValues(nonceBuf);
|
||||
const timestamp = (Number(new Date()) / 1000) | 0;
|
||||
const signee = {
|
||||
nonce: nonceBuf[0],
|
||||
payload: {
|
||||
typ: 'chat',
|
||||
room: roomUuid,
|
||||
text,
|
||||
},
|
||||
timestamp,
|
||||
user: userKey,
|
||||
};
|
||||
|
||||
const signeeBytes = (new TextEncoder()).encode(JSON.stringify(signee));
|
||||
const sig = await crypto.subtle.sign('Ed25519', keypair.privateKey, signeeBytes);
|
||||
|
||||
const payload = JSON.stringify({ sig: bufToHex(sig), signee });
|
||||
try {
|
||||
const resp = await fetch(`${roomUrl}/item`, {
|
||||
method: 'POST',
|
||||
cache: 'no-cache',
|
||||
body: payload,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
if (!resp.ok) throw new Error(`status ${resp.status} ${resp.statusText}`);
|
||||
chatInput.value = '';
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
log(`failed to post chat: ${e}`);
|
||||
} finally {
|
||||
chatInput.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = async (_) => {
|
||||
if (!await loadKeypair()) {
|
||||
await generateKeypair();
|
||||
}
|
||||
if (keypair !== null) {
|
||||
userPubkeyDisplay.value = bufToHex(await crypto.subtle.exportKey('raw', keypair.publicKey));
|
||||
}
|
||||
connectRoom(roomUrlInput.value);
|
||||
};
|
||||
roomUrlInput.onchange = (e) => {
|
||||
connectRoom(e.target.value);
|
||||
};
|
||||
chatInput.onkeypress = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
chatInput.disabled = true;
|
||||
postChat(chatInput.value);
|
||||
chatInput.disabled = false;
|
||||
}
|
||||
};
|
||||
regenKeyBtn.onclick = (_) => {
|
||||
generateKeypair();
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue