(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) {
);
}
+ 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,
};
}());
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");
}
}
- common.setup(function () {new common.HubClient(ws_uri, open, close, message)});
+ common.setup(function () { common.open_websocket(ws_uri, open, close, message); });
})();
(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); });
})();
projects / hublib / commitdiff