From 49ac11fad7750b67c910fa24ec788dd4b2dd9740 Mon Sep 17 00:00:00 2001 From: dclxxxvi Date: Fri, 24 Dec 2021 05:10:42 +0500 Subject: [PATCH] 1-11 tasks done --- client/index.mjs | 17 ++++++++++- client/picker.mjs | 4 ++- package-lock.json | 78 ++++++++++++----------------------------------- package.json | 2 +- server.mjs | 59 ++++++++++++++++++++++++++++++++--- 5 files changed, 94 insertions(+), 66 deletions(-) diff --git a/client/index.mjs b/client/index.mjs index 3836cb0..f3339f4 100644 --- a/client/index.mjs +++ b/client/index.mjs @@ -8,13 +8,28 @@ document.querySelector("#start").addEventListener("submit", e => { document.querySelector(".container").classList.add("ready"); }); +const onFieldRecieved = (message) => { + console.log(message); + + const result = JSON.parse(message?.['data']) + console.log(result); + + if (result['type'] == 'place') + drawer.putArray(result['payload']['place']); +} + const main = apiKey => { const ws = connect(apiKey); - ws.addEventListener("message", console.log); + ws.addEventListener("message", onFieldRecieved); timeout.next = new Date(); drawer.onClick = (x, y) => { drawer.put(x, y, picker.color); + // отправляем на сервер + ws.send(JSON.stringify({ + type: "click", + payload: {x: x, y: y, color: picker.color} + })); }; }; diff --git a/client/picker.mjs b/client/picker.mjs index 6a49c82..29f5577 100644 --- a/client/picker.mjs +++ b/client/picker.mjs @@ -5,7 +5,9 @@ const setAttributes = (element, object) => { }; const drawPalette = async () => { - const colors = hardcodedColors; + const response = await fetch("/api/getColors"); + const colors = await response.json(); + pickedColor = colors[0]; const palette = document.querySelector("#palette"); const fragment = document.createDocumentFragment(); diff --git a/package-lock.json b/package-lock.json index 72c62c9..7b3bbc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,33 +35,14 @@ } }, "ansi-align": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz", - "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", + "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==", "dev": true, "requires": { - "string-width": "^3.0.0" - }, - "dependencies": { - "string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", - "dev": true, - "requires": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" - } - } + "string-width": "^4.1.0" } }, - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true - }, "ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -380,12 +361,6 @@ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, - "emoji-regex": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", - "dev": true - }, "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -503,9 +478,9 @@ } }, "glob-parent": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", - "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dev": true, "requires": { "is-glob": "^4.0.1" @@ -607,9 +582,9 @@ "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "ipaddr.js": { @@ -641,12 +616,6 @@ "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", "dev": true }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, "is-glob": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", @@ -864,9 +833,9 @@ "dev": true }, "normalize-url": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz", - "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz", + "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==", "dev": true }, "on-finished": { @@ -1136,9 +1105,9 @@ }, "dependencies": { "ansi-regex": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true }, "emoji-regex": { @@ -1164,15 +1133,6 @@ } } }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "dev": true, - "requires": { - "ansi-regex": "^4.1.0" - } - }, "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", @@ -1338,9 +1298,9 @@ } }, "ws": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.1.tgz", - "integrity": "sha512-pTsP8UAfhy3sk1lSk/O/s4tjD0CRwvMnzvwr4OKGX7ZvqZtUyx4KIJB5JWbkykPoc55tixMGgTNoh3k4FkNGFQ==" + "version": "7.5.6", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz", + "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==" }, "xdg-basedir": { "version": "4.0.0", diff --git a/package.json b/package.json index f1ac7cc..d5e7d32 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "express": "^4.17.1", - "ws": "^7.4.1" + "ws": "^7.5.6" }, "devDependencies": { "nodemon": "^2.0.6" diff --git a/server.mjs b/server.mjs index 02a05b5..fd496c1 100644 --- a/server.mjs +++ b/server.mjs @@ -4,6 +4,8 @@ import WebSocket from "ws"; const port = process.env.PORT || 5000; +const connections = new WeakMap(); + const apiKeys = new Set([ "4a83051d-aad4-483e-8fc8-693273d15dc7", "c08c9038-693d-4669-98cd-9f0dd5ef06bf", @@ -43,6 +45,10 @@ const app = express(); app.use(express.static(path.join(process.cwd(), "client"))); +app.get("/api/getColors", (req, res) => { + res.json(colors); +}); + app.get("/*", (_, res) => { res.send("Place(holder)"); }); @@ -55,8 +61,53 @@ const wss = new WebSocket.Server({ server.on("upgrade", (req, socket, head) => { const url = new URL(req.url, req.headers.origin); - console.log(url); - wss.handleUpgrade(req, socket, head, (ws) => { - wss.emit("connection", ws, req); - }); + const apiKey = url.searchParams.get('apiKey') || "unknown" + + if (apiKeys.has(apiKey)) { + wss.handleUpgrade(req, socket, head, (ws) => { + connections.set(ws, apiKey); + + socket.on("close", function() { + connections.delete(ws); + }); + + socket.on("end", function() { + }); + + wss.emit("connection", ws, req); + }); + } + else { + socket.end("invalid api key"); + } }); + +const sendField = (ws) => { + const result = { + type: "place", + payload: { + place: place, + } + } + + if (ws.readyState === WebSocket.OPEN) + ws.send(JSON.stringify(result)); +} + +wss.on('connection', function connection(ws) { + ws.on('message', function message(mes) { + let parsedData = JSON.parse(mes); + if(parsedData['type'] === "click") { + let {x, y, color} = parsedData.payload; + if (0 <= x && x <= 256 && 0 <= y && y <= 256 && colors.indexOf(color) + 1) { + place[x + y * size] = color; + wss.clients.forEach(client => { + if (client.readyState === WebSocket.OPEN) { + sendField(client); + } + }); + } + } + }); + sendField(ws); +}); \ No newline at end of file