forked from erth9960/drawserver
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
function init() {
|
|
const body = document.querySelector("body");
|
|
const socket = new WebSocket("ws://localhost:8080/connect");
|
|
|
|
function createElement(m) {
|
|
var e = document.createElement(m.tag);
|
|
e.style.position = "absolute";
|
|
e.style.left = m.x - 10;
|
|
e.style.top = m.y - 10;
|
|
e.style.border = "10px solid black";
|
|
e.style.width = 0;
|
|
e.style.height = 0;
|
|
e.style.borderRadius = "10px";
|
|
body.appendChild(e);
|
|
console.log("drew shape " + m.tag + " " + m.x + " " + m.y);
|
|
}
|
|
|
|
socket.addEventListener("open", function (event) {
|
|
console.log("socket open");
|
|
socket.addEventListener("message", function drawFromServer(event) {
|
|
try {
|
|
console.log(event);
|
|
var msg = JSON.parse(event.data);
|
|
console.log("received");
|
|
console.log(msg);
|
|
createElement(msg);
|
|
} catch (e) {
|
|
console.log(event);
|
|
}
|
|
});
|
|
body.addEventListener("click", function bodyLis(event) {
|
|
var item = { tag: "div", x: event.clientX, y: event.clientY };
|
|
var str = JSON.stringify(item);
|
|
console.log("send " + str);
|
|
socket.send(str);
|
|
createElement(item);
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", init);
|