diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js index cf392b7..54cd988 100644 --- a/anonstream/static/anonstream.js +++ b/anonstream/static/anonstream.js @@ -7,32 +7,32 @@ const jsmarkup_info_title = '
- - -
- - Not connected to chat -
- + + +
+ + Not connected to chat +
+ `; const insert_jsmarkup = () => { - if (document.getElementById("info_js") === null) { - const parent = document.getElementById("info"); - parent.insertAdjacentHTML("beforeend", jsmarkup_info); - } - if (document.getElementById("info_js__title") === null) { - const parent = document.getElementById("info_js"); - parent.insertAdjacentHTML("beforeend", jsmarkup_info_title); - } - if (document.getElementById("chat-messages_js") === null) { - const parent = document.getElementById("chat__messages"); - parent.insertAdjacentHTML("beforeend", jsmarkup_chat_messages); - } - if (document.getElementById("chat-form_js") === null) { - const parent = document.getElementById("chat__form"); - parent.insertAdjacentHTML("beforeend", jsmarkup_chat_form); - } + if (document.getElementById("info_js") === null) { + const parent = document.getElementById("info"); + parent.insertAdjacentHTML("beforeend", jsmarkup_info); + } + if (document.getElementById("info_js__title") === null) { + const parent = document.getElementById("info_js"); + parent.insertAdjacentHTML("beforeend", jsmarkup_info_title); + } + if (document.getElementById("chat-messages_js") === null) { + const parent = document.getElementById("chat__messages"); + parent.insertAdjacentHTML("beforeend", jsmarkup_chat_messages); + } + if (document.getElementById("chat-form_js") === null) { + const parent = document.getElementById("chat__form"); + parent.insertAdjacentHTML("beforeend", jsmarkup_chat_form); + } } insert_jsmarkup(); @@ -42,109 +42,110 @@ const info_title = document.getElementById("info_js__title"); const chat_messages_parent = document.getElementById("chat__messages"); const chat_messages = document.getElementById("chat-messages_js"); const on_websocket_message = (event) => { - const receipt = JSON.parse(event.data); - switch (receipt.type) { - case "error": - console.log("ws error", receipt); - break; + const receipt = JSON.parse(event.data); + switch (receipt.type) { + case "error": + console.log("ws error", receipt); + break; - case "init": - console.log("ws init", receipt); - chat_form_nonce.value = receipt.nonce; - info_title.innerText = receipt.title; - break; + case "init": + console.log("ws init", receipt); + chat_form_nonce.value = receipt.nonce; + info_title.innerText = receipt.title; + break; - case "title": - console.log("ws title", receipt); - info_title.innerText = receipt.title; - break; + case "title": + console.log("ws title", receipt); + info_title.innerText = receipt.title; + break; - case "ack": - console.log("ws ack", receipt); - if (chat_form_nonce.value === receipt.nonce) { - chat_form_comment.value = ""; - } else { - console.log("nonce does not match ack", chat_form_nonce, receipt); - } - chat_form_submit.disabled = false; - chat_form_nonce.value = receipt.next; - break; + case "ack": + console.log("ws ack", receipt); + if (chat_form_nonce.value === receipt.nonce) { + chat_form_comment.value = ""; + } else { + console.log("nonce does not match ack", chat_form_nonce, receipt); + } + chat_form_submit.disabled = false; + chat_form_nonce.value = receipt.next; + break; - case "reject": - console.log("ws reject", receipt); - alert(`Rejected: ${receipt.notice}`); - chat_form_submit.disabled = false; - break; + case "reject": + console.log("ws reject", receipt); + alert(`Rejected: ${receipt.notice}`); + chat_form_submit.disabled = false; + chat_form_nonce.value = receipt.next; + break; - case "chat": - console.log("ws chat", receipt); + case "chat": + console.log("ws chat", receipt); - const chat_message = document.createElement("li"); - chat_message.classList.add("chat-message"); + const chat_message = document.createElement("li"); + chat_message.classList.add("chat-message"); - const chat_message_name = document.createElement("span"); - chat_message_name.classList.add("chat-message__name"); - chat_message_name.innerText = receipt.name; - //chat_message_name.dataset.color = receipt.color; // not working in any browser - chat_message_name.style.color = receipt.color; + const chat_message_name = document.createElement("span"); + chat_message_name.classList.add("chat-message__name"); + chat_message_name.innerText = receipt.name; + //chat_message_name.dataset.color = receipt.color; // not working in any browser + chat_message_name.style.color = receipt.color; - const chat_message_markup = document.createElement("span"); - chat_message_markup.classList.add("chat-message__markup"); - chat_message_markup.innerHTML = receipt.markup; + const chat_message_markup = document.createElement("span"); + chat_message_markup.classList.add("chat-message__markup"); + chat_message_markup.innerHTML = receipt.markup; - chat_message.insertAdjacentElement("beforeend", chat_message_name); - chat_message.insertAdjacentHTML("beforeend", ": "); - chat_message.insertAdjacentElement("beforeend", chat_message_markup); + chat_message.insertAdjacentElement("beforeend", chat_message_name); + chat_message.insertAdjacentHTML("beforeend", ": "); + chat_message.insertAdjacentElement("beforeend", chat_message_markup); - chat_messages.insertAdjacentElement("beforeend", chat_message); - chat_messages_parent.scrollTo({ - left: 0, - top: chat_messages_parent.scrollTopMax, - behavior: "smooth", - }); + chat_messages.insertAdjacentElement("beforeend", chat_message); + chat_messages_parent.scrollTo({ + left: 0, + top: chat_messages_parent.scrollTopMax, + behavior: "smooth", + }); - break; + break; - default: - console.log("incomprehensible websocket message", receipt); - } + default: + console.log("incomprehensible websocket message", receipt); + } }; const chat_live_ball = document.getElementById("chat-live__ball"); const chat_live_status = document.getElementById("chat-live__status"); let ws; let websocket_backoff = 2000; // 2 seconds const connect_websocket = () => { - if (ws !== undefined && (ws.readyState === ws.CONNECTING || ws.readyState === ws.OPEN)) { - console.log("refusing to open another websocket"); - return; + if (ws !== undefined && (ws.readyState === ws.CONNECTING || ws.readyState === ws.OPEN)) { + console.log("refusing to open another websocket"); + return; + } + chat_live_ball.style.borderColor = "gold"; + chat_live_status.innerText = "Connecting to chat..."; + ws = new WebSocket(`ws://${document.domain}:${location.port}/live?token=${encodeURIComponent(token)}`); + ws.addEventListener("open", (event) => { + chat_form_submit.disabled = false; + chat_live_ball.style.borderColor = "green"; + chat_live_status.innerText = "Connected to chat"; + websocket_backoff = 2000; // 2 seconds + }); + ws.addEventListener("close", (event) => { + console.log("websocket closed", event); + chat_form_submit.disabled = true; + chat_live_ball.style.borderColor = "maroon"; + chat_live_status.innerText = "Disconnected from chat"; + if (!ws.successor) { + ws.successor = true; + setTimeout(connect_websocket, websocket_backoff); + websocket_backoff = Math.min(32000, websocket_backoff * 2); } - chat_live_ball.style.borderColor = "gold"; - chat_live_status.innerText = "Connecting to chat..."; - ws = new WebSocket(`ws://${document.domain}:${location.port}/live?token=${encodeURIComponent(token)}`); - ws.addEventListener("open", (event) => { - chat_form_submit.disabled = false; - chat_live_ball.style.borderColor = "green"; - chat_live_status.innerText = "Connected to chat"; - websocket_backoff = 2000; // 2 seconds - }); - ws.addEventListener("close", (event) => { - console.log("websocket closed", event); - chat_form_submit.disabled = true; - chat_live_ball.style.borderColor = "maroon"; - chat_live_status.innerText = "Disconnected from chat"; - if (!ws.successor) { - ws.successor = true; - setTimeout(connect_websocket, websocket_backoff); - websocket_backoff = Math.min(32000, websocket_backoff * 2); - } - }); - ws.addEventListener("error", (event) => { - console.log("websocket error", event); - chat_form_submit.disabled = true; - chat_live_ball.style.borderColor = "maroon"; - chat_live_status.innerText = "Error connecting to chat"; - }); - ws.addEventListener("message", on_websocket_message); + }); + ws.addEventListener("error", (event) => { + console.log("websocket error", event); + chat_form_submit.disabled = true; + chat_live_ball.style.borderColor = "maroon"; + chat_live_status.innerText = "Error connecting to chat"; + }); + ws.addEventListener("message", on_websocket_message); } connect_websocket(); @@ -155,8 +156,8 @@ const chat_form_nonce = document.getElementById("chat-form_js__nonce"); const chat_form_comment = document.getElementById("chat-form_js__comment"); const chat_form_submit = document.getElementById("chat-form_js__submit"); chat_form.addEventListener("submit", (event) => { - event.preventDefault(); - const payload = {comment: chat_form_comment.value, nonce: chat_form_nonce.value}; - chat_form_submit.disabled = true; - ws.send(JSON.stringify(payload)); + event.preventDefault(); + const payload = {comment: chat_form_comment.value, nonce: chat_form_nonce.value}; + chat_form_submit.disabled = true; + ws.send(JSON.stringify(payload)); });