From: mar77i Date: Tue, 6 Aug 2024 23:41:20 +0000 (+0200) Subject: more cleaning up... X-Git-Url: https://git.mar77i.info/?a=commitdiff_plain;h=d8d955fa3f0b9af379d02de93891c9a9e6b11fdd;p=hublib more cleaning up... --- diff --git a/webroot/common.js b/webroot/common.js index 453af8b..b1319f0 100644 --- a/webroot/common.js +++ b/webroot/common.js @@ -1,19 +1,23 @@ (function () { "use strict"; - function HubClient(ws_uri, open, close, message) { - this.close = close.bind(this); - this.message = message.bind(this); - this.open = open.bind(this); - this.ws = new WebSocket( + + function partial(func) { + var args = Array.prototype.slice.call(arguments, 1); + return function () { + func.apply(null, args.concat(Array.prototype.slice.call(arguments))); + } + } + + function open_websocket(ws_uri, open, close, message) { + var ws = new WebSocket( {"http:": "ws:", "https:": "wss:"}[window.location.protocol] + "//" + window.location.host + ws_uri ) - this.ws.addEventListener("close", this.close); - this.ws.addEventListener("message", this.message); - this.ws.addEventListener("open", this.open); - this.send = this.ws.send.bind(this.ws); + ws.addEventListener("close", partial(close)); + ws.addEventListener("message", partial(message, ws)); + ws.addEventListener("open", partial(open, ws)); } function write(msg) { @@ -42,9 +46,21 @@ ); } + function on_return(callback) { + return function (event) { + var keycode; + event = event || window.event; + keycode = event.code || event.key; + if (keycode === "Enter" || keycode === "NumpadEnter") { + callback(event, event.target || event.srcElement); + } + }; + } + window.common = { - "HubClient": HubClient, + "open_websocket": open_websocket, "write": write, "setup": setup, + "on_return": on_return, }; }()); diff --git a/webroot/first/index.js b/webroot/first/index.js index 043e424..476ce7f 100644 --- a/webroot/first/index.js +++ b/webroot/first/index.js @@ -3,75 +3,63 @@ var input_div; var change_name_div; - function setup_chat(hub) { + function setup_chat(ws) { var inp = input_div.getElementsByTagName("input")[0]; inp.disabled = false; inp.addEventListener( "keydown", - function (event) { - if (!event) { - event = window.event; + common.on_return( + function (event, target) { + ws.send(JSON.stringify({"data": target.value})); + target.value = ""; } - var target = event.target || event.srcElement; - var keycode = event.code || event.key; - if (keycode !== "Enter" && keycode !== "NumpadEnter") { - return; - } - hub.send(JSON.stringify({"data": target.value})); - target.value = ""; - } + ) ); input_div.getElementsByTagName("button")[0].addEventListener( "click", function () { - change_name_div.getElementsByTagName("input")[0].focus(); - change_name_div.style.display = ""; input_div.style.display = "none"; + change_name_div.style.display = ""; + change_name_div.getElementsByTagName("input")[0].focus(); } ); change_name_div.getElementsByTagName("input")[0].addEventListener( "keydown", - function (event) { - if (!event) { - event = window.event; - } - var target = event.target || event.srcElement; - var keycode = event.code || event.key; - if (keycode !== "Enter" && keycode !== "NumpadEnter") { - return; + common.on_return( + function (event, target) { + while (input_div.childNodes[0] !== input_div.children[0]) { + input_div.childNodes[0].remove(); + } + input_div.insertBefore( + document.createTextNode(target.value + " "), + input_div.children[0] + ); + ws.send( + JSON.stringify({"action": "set_name", "name": target.value}) + ); + target.value = ""; + change_name_div.style.display = "none"; + input_div.style.display = ""; + input_div.children[0].focus(); } - while (input_div.childNodes[0] !== input_div.children[0]) { - input_div.childNodes[0].remove(); - } - input_div.insertBefore( - document.createTextNode(target.value + " "), - input_div.children[0] - ); - hub.send( - JSON.stringify({"action": "set_name", "name": target.value}) - ); - target.value = ""; - input_div.style.display = ""; - change_name_div.style.display = "none"; - input_div.children[0].focus(); - } + ) ); } - function open() { + function open(ws) { input_div = document.getElementById("input"); change_name_div = document.getElementById("change_name"); - setup_chat(this); - common.write("connected to " + ws_uri); + setup_chat(ws); input_div.getElementsByTagName("button")[0].click(); + common.write("connected to " + ws_uri); } function close() { - common.write("connection lost"); input_div.getElementsByTagName("input")[0].disabled = true; + common.write("connection lost"); } - function message(msg) { + function message(ws, msg) { var obj = JSON.parse(msg.data); if (obj.action === "join" || obj.action === "leave") { common.write("[action]: " + obj.name + " " + obj.action + "s"); @@ -87,5 +75,5 @@ } } - common.setup(function () {new common.HubClient(ws_uri, open, close, message)}); + common.setup(function () { common.open_websocket(ws_uri, open, close, message); }); })(); diff --git a/webroot/first/master.js b/webroot/first/master.js index 2f9cd8f..4cd1c1e 100644 --- a/webroot/first/master.js +++ b/webroot/first/master.js @@ -1,169 +1,165 @@ (function () { "use strict"; var input_div; - var clients_list; + var clients_list = {}; + var clients_list_ul; - function ClientsList(ul) { - this.ul = ul; - function Client(clients_list, client_id) { - this.clients_list = clients_list; - this.id = client_id; - this.get_label = function () { - return "client-" + this.id.toString(); - }; - this.name = this.get_label(); - this.li = document.createElement("li"); - this.cb = document.createElement("input"); - this.cb.setAttribute("type", "checkbox"); - this.cb.setAttribute("checked", ""); - this.li.append(this.cb); - this.li.append(document.createTextNode(this.name)); - clients_list.ul.append(this.li); - this.set_name = function (new_name) { - var old_name = this.name; - this.name = new_name; - if (this.cb.nextSibling !== null) { - this.cb.nextSibling.remove(); - } - this.li.append(document.createTextNode(new_name)); - return old_name; - }; - } - this.clients = {}; - - this.append = function (client_id) { - var client = new Client(this, client_id); - this.clients[client_id.toString()] = client; - return client; - }; - this.remove = function (client_id) { - var client = this.clients[client_id]; - if (client) { - client.li.remove(); - delete this.clients[client_id]; - } - return client; - }; - this.all = function () { - var key; - var result = []; - for (key in this.clients) { - result.push(this.clients[key].id); + function Client(client_id) { + var id_str = client_id.toString() + this.id = client_id; + this.name = "client-" + id_str; + this.li = document.createElement("li"); + this.checkbox = document.createElement("input"); + this.checkbox.setAttribute("type", "checkbox"); + this.checkbox.setAttribute("checked", ""); + this.li.append(this.checkbox); + this.li.append(document.createTextNode(this.name)); + this.set_name = function (new_name) { + this.name = new_name; + if (this.checkbox.nextSibling !== null) { + this.checkbox.nextSibling.remove(); } - return result; + this.li.append(document.createTextNode(new_name)); }; - this.selected = function () { - var key; - var client; - var result = []; - for (key in this.clients) { - client = this.clients[key]; - if (client.cb.checked) { - result.push(client.id); - } + clients_list[id_str] = this; + clients_list_ul.append(this.li); + } + + function all_client_ids() { + var key; + var result = []; + for (key in clients_list) { + result.push(clients_list[key].id); + } + return result; + } + + function selected_client_ids() { + var key; + var client; + var result = []; + for (key in clients_list) { + client = clients_list[key]; + if (client.checkbox.checked) { + result.push(client.id); } - return result; - }; + } + return result; } - function setup_chat(hub) { + function setup_chat(ws) { var inp = input_div.getElementsByTagName("input")[0]; inp.disabled = false; inp.addEventListener( "keydown", - function (event) { - if (!event) { - event = window.event; + common.on_return( + function (event, target) { + ws.send( + JSON.stringify( + { + "client_ids": selected_client_ids(), + "name": "MASTER", + "data": target.value, + } + ) + ); + common.write("MASTER: " + target.value); + target.value = ""; } - var target = event.target || event.srcElement; - var keycode = event.code || event.key; - if (keycode !== "Enter" && keycode !== "NumpadEnter") { - return; - } - hub.send( - JSON.stringify( - { - "client_ids": clients_list.selected(), - "name": "MASTER", - "data": target.value, - } - ) - ); - common.write("MASTER: " + target.value); - target.value = ""; - } + ) ); } - function open() { + function open(ws) { input_div = document.getElementById("input"); - clients_list = new ClientsList(document.getElementById("clients_list")); - setup_chat(this); + clients_list_ul = document.getElementById("clients_list"); + setup_chat(ws); common.write("connected to ws_master"); } function close() { - common.write("connection lost"); input_div.getElementsByTagName("input")[0].disabled = true; + common.write("connection lost"); } - function join_leave_broadcast(hub, client, action) { - if (!client) { - return; - } - common.write("[action]: " + client.name + " " + action + "s"); - hub.send( + function join(ws, client_id) { + var client = new Client(client_id); + ws.send( JSON.stringify( { - "client_ids": clients_list.all(), + "client_ids": all_client_ids(), + "client_id": client_id, + "action": "join", + "name": client.name, + } + ) + ); + common.write("[action]: " + client.name + " joins"); + } + + function leave(ws, client_id) { + var id_str = client_id.toString(); + var client = clients_list[id_str]; + client.li.remove(); + delete clients_list[id_str]; + ws.send( + JSON.stringify( + { + "client_ids": all_client_ids(), + "client_id": client_id, + "action": "leave", + "name": client.name, + } + ) + ); + common.write("[action]: " + client.name + " leaves"); + } + + function set_name(ws, client_id, name) { + var client = clients_list[client_id.toString()]; + var old_name = client.name; + client.set_name(name); + ws.send( + JSON.stringify( + { + "client_ids": all_client_ids(), + "client_id": client_id, + "action": "set_name", + "name": name, + "old_name": old_name, + } + ) + ); + common.write("[action]: " + old_name + " changes name to " + name); + } + + function send_data(ws, client_id, data) { + var client = clients_list[client_id.toString()]; + ws.send( + JSON.stringify( + { + "client_ids": all_client_ids(), "client_id": client.id, - "action": action, "name": client.name, + "data": data, } ) ); + common.write(client.name + " [" + client.id + "]: " + data); } - function message(msg) { + function message(ws, msg) { var obj = JSON.parse(msg.data); - var client; if (obj.action === "join") { - join_leave_broadcast(this, clients_list.append(obj.client_id), obj.action); - return; + join(ws, obj.client_id); } else if (obj.action === "leave") { - join_leave_broadcast(this, clients_list.remove(obj.client_id), obj.action); - return; - } - client = clients_list.clients[obj.client_id.toString()]; - - if (obj.action === "set_name") { - common.write("[action]: " + client.name + " changes name to " + obj.name); - this.send( - JSON.stringify( - { - "client_ids": clients_list.all(), - "client_id": client.id, - "action": "set_name", - "name": obj.name, - "old_name": client.name, - } - ) - ); - client.set_name(obj.name); + leave(ws, obj.client_id); + } else if (obj.action === "set_name") { + set_name(ws, obj.client_id, obj.name); } else if (obj.hasOwnProperty("data")) { - common.write(client.name + " [" + client.id + "]: " + obj.data); - this.send( - JSON.stringify( - { - "client_ids": clients_list.all(), - "client_id": client.id, - "name": client.name, - "data": obj.data, - } - ) - ); + send_data(ws, obj.client_id, obj.data); } } - common.setup(function () { new common.HubClient(ws_uri, open, close, message); }); + common.setup(function () { common.open_websocket(ws_uri, open, close, message); }); })();