vektron
/
websocket-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Consolidated sender and receiver projects

This commit is contained in:
Robin Steinberg 2021-08-26 20:05:40 +02:00
parent ca0e2dd64f
commit 8555e3f9e2
4 changed files with 109 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Canvas Demo</title> <title>Canvas Sender</title>
<script defer type="module" src="dist/app.js"></script> <script defer type="module" src="dist/canvasSender.js"></script>
</head> </head>
<body> <body>
<div id="canvas"></div> <div id="canvas"></div>
@ -15,4 +15,6 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<br />
<a href="/receiver" target="_blank">Open receiver</a>
</html> </html>

18
receiver.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Canvas Receiver</title>
<script defer type="module" src="dist/canvasReceiver.js"></script>
</head>
<body>
<div id="canvas"></div>
</body>
<style>
#canvas {
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</html>

84
ts/canvasReceiver.ts Normal file
View File

@ -0,0 +1,84 @@
import CanvasUtil from './canvas-util/canvasUtil.js';
import Coordinates from './canvas-util/coordinates.js';
class CanvasReceiverController {
private canvas!: HTMLCanvasElement;
private canvasDiv: HTMLDivElement;
private canvasUtil: CanvasUtil;
private ws: WebSocket;
/**
* Represents whether the app is waiting for the first coordinates of a draw path. If lineTo
* is called with the first pair of coordinates, every path will be connected. Therefore this
* variable is needed to prevent drawing a line to the first pair of coordinates.
*/
private firstCoordinates: boolean = false;
constructor() {
this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
this.canvasUtil = new CanvasUtil(this.canvasDiv.offsetWidth, this.canvasDiv.offsetHeight);
this.createCanvas();
if (!this.canvasUtil.isCanvasApiSupported) {
alert('Canvas API unavailable, drawing will not work!');
}
this.ws = new WebSocket('ws://localhost:8081', 'json');
this.ws.onmessage = message => this.processMessage(message);
this.ws.onopen = () => this.ws.send('RECEIVER');
}
createCanvas() {
const canvas = this.canvasUtil.getCanvas();
this.canvasDiv.appendChild(canvas);
}
processMessage(message: MessageEvent<any>) {
switch (message.data) {
case 'CLEAR':
this.clear();
break;
case 'START':
this.startDrawing();
break;
case 'STOP':
this.stopDrawing();
break;
default:
this.draw(JSON.parse(message.data));
break;
}
}
startDrawing() {
console.log('Received START command');
this.firstCoordinates = true;
}
stopDrawing() {
console.log('Received STOP command');
this.canvasUtil.stopPath();
}
clear() {
console.log('Received CLEAR command');
this.canvasDiv.removeChild(this.canvasDiv.firstChild!);
this.canvasUtil.recreateCanvas();
this.createCanvas();
}
draw(coordinates: Coordinates) {
if (this.firstCoordinates) {
this.firstCoordinates = false;
this.canvasUtil.startPath(coordinates);
}
this.canvasUtil.draw(coordinates);
}
}
const app = new CanvasReceiverController();
export { app };

6
ts/app.ts → ts/canvasSender.ts
View File

@ -1,7 +1,7 @@
import Coordinates from "./canvas-util/coordinates.js";
import CanvasUtil from "./canvas-util/canvasUtil.js"; import CanvasUtil from "./canvas-util/canvasUtil.js";
import Coordinates from "./canvas-util/coordinates.js";
class CanvasController { class CanvasSenderController {
private canvasUtil: CanvasUtil; private canvasUtil: CanvasUtil;
private canvasDiv: HTMLDivElement; private canvasDiv: HTMLDivElement;
private ws: WebSocket; private ws: WebSocket;
@ -60,6 +60,6 @@ class CanvasController {
} }
const app = new CanvasController(); const app = new CanvasSenderController();
export { app }; export { app };