Indent with 2 spaces in js
このコミットが含まれているのは:
コミット
60b0cb1ebc
|
|
@ -7,32 +7,32 @@ const jsmarkup_info_title = '<header id="info_js__title" data-js="true"></header
|
|||
const jsmarkup_chat_messages = '<ul id="chat-messages_js" data-js="true"></ul>';
|
||||
const jsmarkup_chat_form = `\
|
||||
<form id="chat-form_js" data-js="true" action="/chat" method="post">
|
||||
<input id="chat-form_js__nonce" type="hidden" name="nonce" value="">
|
||||
<textarea id="chat-form_js__comment" name="comment" maxlength="512" required placeholder="Send a message..." rows="1"></textarea>
|
||||
<div id="chat-live">
|
||||
<span id="chat-live__ball"></span>
|
||||
<span id="chat-live__status">Not connected to chat</span>
|
||||
</div>
|
||||
<input id="chat-form_js__submit" type="submit" value="Chat" disabled>
|
||||
<input id="chat-form_js__nonce" type="hidden" name="nonce" value="">
|
||||
<textarea id="chat-form_js__comment" name="comment" maxlength="512" required placeholder="Send a message..." rows="1"></textarea>
|
||||
<div id="chat-live">
|
||||
<span id="chat-live__ball"></span>
|
||||
<span id="chat-live__status">Not connected to chat</span>
|
||||
</div>
|
||||
<input id="chat-form_js__submit" type="submit" value="Chat" disabled>
|
||||
</form>`;
|
||||
|
||||
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));
|
||||
});
|
||||
|
|
|
|||
読み込み中…
新しいイシューから参照