diff options
| -rw-r--r-- | public/js/lib.js | 2 | ||||
| -rw-r--r-- | public/js/main.js | 81 |
2 files changed, 53 insertions, 30 deletions
diff --git a/public/js/lib.js b/public/js/lib.js index 8331f5a..1067f7a 100644 --- a/public/js/lib.js +++ b/public/js/lib.js @@ -49,4 +49,4 @@ class Client extends AppSocket { } } -export { AppSocket, Client };
\ No newline at end of file +export { AppSocket, Client }; diff --git a/public/js/main.js b/public/js/main.js index fecb320..e81186f 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -6,32 +6,32 @@ const MAXFILESIZE = 2048 * 1024 * 1024; // 2GB const color_bg = "#dedede"; //TODO change color based on time -var ctx = null; //canvas context -var cnv = null; //canvas -var env = { +let ctx = null; //canvas context +let cnv = null; //canvas +let env = { 'WS_URL': 'wss://belthelziquor.com:9002' }; //environment variables from server. dev=true by default because if env not passed in not public/published instance -var W = 800; -var H = 600; -var socket = null; //client's websocket -var myID; +let W = 800; +let H = 600; +let socket = null; //client's websocket +let myID; -var elemNumConnected; +let elemNumConnected; //each connected client. same format as server's model -var friends = { +let friends = { }; //todo move in appmodel -var me = [0,0]; //my cursor position -var myNickname = ''; +let me = [0,0]; //my cursor position +let myNickname = ''; -var domElems = {}; +let domElems = {}; function prepareFileInput(){ - var file_input = domElems.inputFile; - var files = file_input.files; + let file_input = domElems.inputFile; + let files = file_input.files; for (f in files) { console.log(f); } @@ -65,7 +65,7 @@ $(document).ready(async function() { if (wsConnected()){ setInterval(() => { - socket.emit('update_pos', {pos: me, nick: myNickname}); + socket.send(JSON.stringify({action: 'update_pos', data: {pos: me, nick: myNickname}})); }, 100); } @@ -138,7 +138,7 @@ function resizeCanvas() { //todo move the old code from file stuff etc to other file so that this file can be just for the canvas+graphics+networkedgame part of the client app async function uploadFile() { - var files = domElems.inputFile.files; + let files = domElems.inputFile.files; domElems.buttonFileUpload.enabled = false; let formData = new FormData(); console.log(files); @@ -218,7 +218,7 @@ function wsConnected(){ function connectWebSocket(){ try { - socket = new AppSocket(env['WS_URL']); + socket = new WebSocket(env['WS_URL']); log(socket); /*socket = io(env['WS_URL'], { @@ -242,25 +242,48 @@ function connectWebSocket(){ socket.pingTimeout = 1000; socket.pingInterval = 500; } + /*socket.addEventListener("open", (ev)=>{ + console.log("open"); + console.log(ev); + }); + socket.addEventListener("close", (ev)=>{ + console.log("close"); + console.log(ev); + });*/ + socket.onmessage = (msg) => { - //console.log(msg); - + console.log(msg); + try { + const m = JSON.parse(msg); + console.log('Parsed message:', m); + switch (m.action) { + case 'init': + myID = m.data; + break; + case 'sync_data': + console.log('sync data todo'); + break; + default: + break; + } + } catch (error) { + console.error('Error parsing message:', error); + socket.send('Error: Invalid message format'); + return; + } } - socket.on('syncCanvas', (data) => { + //socket.on('syncCanvas', (data) => { //TODO appShapes = data.shapes; //TODO ClearBake(); //TODO DrawCanvas(); //TODO $('').textContent = 'Synced'; - }); - socket.on('init', (id) => { - myID = id; - }); + //}); //sync data from server. this is the data from server that should be replicated on each client - socket.on('sync_data', (data) => { + /*socket.on('sync_data', (data) => { //data is a map of client id to client payload data (currently just the screen position) friends = {}; for (const cid in data){ @@ -270,7 +293,7 @@ function connectWebSocket(){ friends[cid] = data[cid]; } domElems.numConnected.innerHTML = Object.keys(friends).length + 1; - }); + });*/ return true; } catch (err) { console.log(`failed to connec WS ${env['WS_URL']}`) @@ -308,7 +331,7 @@ function draw() { } function getMousePos(canvas, evt) { - var rect = canvas.getBoundingClientRect(); + let rect = canvas.getBoundingClientRect(); /*return { x: evt.clientX - rect.left, y: evt.clientY - rect.top @@ -318,7 +341,7 @@ function getMousePos(canvas, evt) { function handleMouseMove(e) { - var eDoc, doc, body; + let eDoc, doc, body; e = e || window.event; // IE-ism // If pageX/Y aren't available and clientX/Y are, // calculate pageX/Y - logic taken from jQuery. @@ -344,4 +367,4 @@ function log(msg, lvl=1){ domElems.debugInfo.innerHTML = msg; //TODO running log + timestamp } console.log(msg); -}
\ No newline at end of file +} |