kamo
/
drw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

small refactor + web destination client

Browse Source
main
km0 2 years ago
parent 042fd52ad7
commit 38d45a7da8
5 changed files with 95 additions and 19 deletions
Show Stats Download Patch File Download Diff File

2
README.md
Unescape Escape View File

@ -4,7 +4,7 @@
A small app for collecting drawings in real time. Runs on a small express server that connects sources (where to draw) and destinations (where to display) via websockets. A small app for collecting drawings in real time. Runs on a small express server that connects sources (where to draw) and destinations (where to display) via websockets.
_(hei! this is still work in progress! currently adapting some aspects in the server in order to: a. make it more general, and not strictly related to vvvv, and b. make it possible to have more destinations connected to receive the drawings at the same time)_ _(hei! this is still work in progress! currently adapting some aspects in the server in order to: a. make it open-end and not strictly related to vvvv, and b. make it possible to have more destinations connected to receive the drawings at the same time)_
## Setup ## Setup

61
destination.html
Unescape Escape View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Draw draw draw</title>
<script src="wss.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Display</h1>
<div id="svg-container" class="destination">
<svg
class="hidden"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="svgElement"
x="0px"
y="0px"
width="200px"
height="200px"
viewBox="0 0 500 500"
enable-background="new 0 0 100 100"
preserveAspectRatio="none"
xml:space="preserve"
></svg>
</div>
<script>
const svgModel = document.querySelector("#svgElement");
const container = document.querySelector("#svg-container");
const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws"));
socket.onopen = (event) => {
socket.send(JSON.stringify({ type: "hello" }));
console.log("Connected as destination!");
};
socket.onmessage = (event) => {
let message;
try {
message = JSON.parse(event.data);
} catch (e) {}
if (message?.type == "drawings") {
let svg = svgModel.cloneNode();
svg.classList.remove("hidden");
let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", message.paths);
path.setAttribute("fill", "none");
path.setAttribute("stroke", "currentColor");
path.setAttribute("stroke-width", 8);
svg.appendChild(path);
container.appendChild(svg);
}
};
</script>
</body>
</html>

6
index.html
Unescape Escape View File

@ -10,7 +10,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<h1>Disegna <span id="theme"></span></h1> <h1>Draw <span id="theme"></span></h1>
<div id="svg-container"> <div id="svg-container">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -25,8 +25,8 @@
enable-background="new 0 0 500 500" enable-background="new 0 0 500 500"
xml:space="preserve" xml:space="preserve"
></svg> ></svg>
<button id="submit">Spiedisci</button> <button id="submit">Send</button>
<button id="erase">Cancella</button> <button id="erase">Cancel</button>
</div> </div>
<script> <script>

8
public/style.css
Unescape Escape View File

@ -8,6 +8,10 @@ body {
background-color: white; background-color: white;
} }
.destination #svgElement {
background: none;
}
button { button {
display: block; display: block;
background-color: white; background-color: white;
@ -18,6 +22,10 @@ button {
margin-top: 16px; margin-top: 16px;
} }
.hidden {
display: none;
}
#theme { #theme {
font-weight: bold; font-weight: bold;
-webkit-text-stroke: 1px black; -webkit-text-stroke: 1px black;

35
server.js
Unescape Escape View File

@ -6,45 +6,52 @@ const index = "index.html";
const server = express() const server = express()
.use(express.static("public")) .use(express.static("public"))
.use((req, res) => res.sendFile(index, { root: __dirname })) .get("/", (req, res) => {
res.sendFile("index.html", { root: __dirname });
})
.get("/destination", (req, res) => {
res.sendFile("destination.html", { root: __dirname });
})
.listen(PORT, () => console.log(`Listening on ${PORT}`)); .listen(PORT, () => console.log(`Listening on ${PORT}`));
const wss = new WebSocketServer({ server, clientTracking: true }); const wss = new WebSocketServer({ server, clientTracking: true });
let VVVV = null; let DESTINATIONS = new Set();
let USERS = new Set(); let USERS = new Set();
var theme = ""; var theme = "";
const messageProcessor = { const messageProcessor = {
default: (ws, msg) => unknownMsg(msg), default: (ws, msg) => unknownMsg(msg),
hello_v4: (ws, msg) => registerV4(ws, msg), hello: (ws, msg) => registerDest(ws, msg),
drawings: (ws, msg) => toV4(msg), drawings: (ws, msg) => toDest(msg),
theme: (ws, msg) => ((theme = msg.theme), broadcast(msg)), theme: (ws, msg) => ((theme = msg.theme), broadcast(msg)),
}; };
const unknownMsg = (msg) => { const unknownMsg = (msg) => {
console.log("❔ Unknown message type..."); console.log("Unknown message type...");
console.log(msg); console.log(msg);
}; };
const registerV4 = (ws, msg) => { const registerDest = (ws, msg) => {
if (VVVV == null) console.log("⬛ vvvv client connected"); console.log("Destination client connected");
VVVV = ws; DESTINATIONS.add(ws);
VVVV.on("close", () => { ws.on("close", () => {
VVVV = null; DESTINATIONS.delete(ws);
}); });
}; };
const toV4 = (msg) => { const toDest = (msg) => {
if (VVVV?.readyState === WebSocket.OPEN) { DESTINATIONS.forEach((DESTINATION) => {
VVVV.send(JSON.stringify(msg)); if (DESTINATION?.readyState === WebSocket.OPEN) {
DESTINATION.send(JSON.stringify(msg));
} }
});
}; };
const broadcast = (msg) => { const broadcast = (msg) => {
let message = JSON.stringify(msg); let message = JSON.stringify(msg);
for (const user of USERS.values()) { for (const user of USERS.values()) {
if (user?.readyState === WebSocket.OPEN && user != VVVV) { if (user?.readyState === WebSocket.OPEN && !DESTINATIONS.has(user)) {
user.send(message); user.send(message);
} }
} }

Write Preview
Loading…
Cancel
Save