70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
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),
|
|
}));
|
|
|
|
},
|
|
}
|
|
});
|