First commit

js/main.js

@@ -0,0 +1,69 @@
+const miWebSocket = new WebSocket('ws://localhost:8080');
+//0 - Bacio
+//1 - Jugador 1
+//2 - Jugador 2
+//3 - Desactivada
+
+const casillasInicio = [
+    [0,0,0],
+    [0,0,0],
+    [0,0,0]
+]
+
+new Vue({
+    el: '#app',
+    data: {
+        jugador: '1',
+        casillas: casillasInicio,
+    },
+    mounted: function (){
+        this.iniciarWebSocket();
+    },
+    methods: {
+        marcar: function (x,y){
+            this.casillas[x][y] = parseInt(this.jugador);
+            this.$forceUpdate();
+            this.enviarDatos(x,y);
+        },
+        iniciarWebSocket: function (){
+            function open () {
+                // Abre conexión
+                console.log("WebSocket abierto.");
+            }
+
+            const message = (evento) => {
+                // Se recibe un mensaje
+                console.log("WebSocket ha recibido un mensaje");
+                // Mostrar mensaje en HTML
+                const datosRecibidos = JSON.parse(evento.data);
+                this.casillas[datosRecibidos.x][datosRecibidos.y] = datosRecibidos.jugador;
+                this.$forceUpdate();
+            }
+
+            function error (evento) {
+                // Ha ocurrido un error
+                console.error("WebSocket ha observado un error: ", evento);
+            }
+
+            function close () {
+                // Cierra la conexión
+                console.log("WebSocket cerrado.");
+            }
+
+
+            // Eventos de WebSocket
+            miWebSocket.addEventListener('open', open);
+            miWebSocket.addEventListener('message', message);
+            miWebSocket.addEventListener('error', error);
+            miWebSocket.addEventListener('close', close);
+        },
+        enviarDatos: function (x,y){
+            miWebSocket.send(JSON.stringify({
+                x: x,
+                y: y,
+                jugador: parseInt(this.jugador),
+            }));
+
+        },
+    }
+});