Recientemente, debido a las necesidades del proyecto, he estudiado la implementación de WebSocket de NodeJS, Socket.io, que es un marco ampliamente utilizado por NodeJS Aplicación de fondo WebSocket.
Preparación
1. Instale Socket.io y use el comando NPM Instale Socket.io
2. Para los sistemas de Windows, se requiere un entorno de compilación VC, porque cuando Socket.io está instalado, se compilará el código VC.
Principios básicos del juego
1. El servidor escucha la conexión del cliente
2. Cuando la conexión del cliente es exitosa, la página de enlace mueve el evento del mouse y la coordenada actual se envía al servidor.
3. El servidor guarda un objeto de coordenada global y utiliza el número único del cliente como valor clave.
4. Cuando llegue una nueva conexión, transmita las coordenadas a otros clientes
5. Cuando el cliente está desconectado, el servidor elimina su información de coordenadas y la transmite a otros clientes.
Comience a implementar el código del servidor
Cuando Scoket.io establece el monitoreo del servidor, debe confiar en una conexión HTTP para manejar el protocolo de actualización, por lo que también necesita un módulo HTTP, el código es el siguiente:
La copia del código es la siguiente:
var http = require ('http'),
io = require ('Socket.io');
var app = http.createServer (). Listen (9091);
var ws = io.listen (aplicación);
Luego defina un objeto de coordenada global
La copia del código es la siguiente:
var publicaciones = {};
Comience a escuchar la conexión del cliente y agregue una nueva función de transmisión (de hecho, puede usar el método de transmisión io.sockets.broadcast.emit, que viene con Socket.io), y el código central es el siguiente:
La copia del código es la siguiente:
ws.on ('conexión', function (cliente) {
// función de transmisión
var Broadcast = function (msg, cl) {
para (var k en ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .id! = cl.id) {
ws.sockets.sockets [k] .emit ('position.change', msg);
}
}
}
};
console.log ('/033 [92m tiene una nueva conexión:/033 [39m', publicaciones);
// Después de que la conexión del cliente sea exitosa, se enviará la información de coordenadas de otros clientes
client.emit ('position.change', publicaciones);
// recibir el cliente envía un mensaje
client.on ('posicion.change', function (msg) {
// Actualmente, el mensaje del cliente es solo un mensaje coordinado
Publicaciones [Client.id] = msg;
// transmitir mensajes a todos los demás clientes
transmisión({
Tipo: 'Posición',
Publicación: MSG,
ID: Client.id
}, cliente);
});
// Recibir mensaje de conexión de cierre del cliente
client.on ('cerrar', function () {
console.log ('¡Cerrar!');
// Eliminar el cliente y notificar a otros clientes
Eliminar Publicaciones [Client.id];
// transmitir mensajes a todos los demás clientes
transmisión({
Tipo: 'Desconectar',
ID: Client.id
}, cliente);
});
// desconectar
client.on ('disconnect', function () {
console.log ('¡Desconectar!');
// Eliminar el cliente y notificar a otros clientes
Eliminar Publicaciones [Client.id];
// transmitir mensajes a todos los demás clientes
transmisión({
Tipo: 'Desconectar',
ID: Client.id
}, cliente);
})
// Definir el manejo de excepciones del cliente
client.on ('error', function (err) {
console.log ('error->', err);
})
});
El punto clave para analizar el código anterior es
1. El nuevo cliente está conectado con éxito y se envía la información de coordenadas de otros clientes.
2. Cuando el cliente actualice la información de coordenadas, notifique a otros clientes.
3. El cliente desconecta y notifica a otros clientes
4. Los tipos de mensajes de transmisión se dividen en coordenadas modificadoras y eliminando coordenadas
Escribir la página HTML del cliente
Dado que Socket.io es un marco personalizado, el cliente debe referirse a Socket.io.js. Este JS se puede encontrar desde el módulo Socket.io. La ruta es generalmente Node_Modules/Socket.io/Node_Modules/Socket.io-Client/Dist. Hay dos versiones de fusión y compresión. Puede usar la versión de fusión durante el desarrollo.
El código completo es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> Socket.io Ejemplo de interacción simultánea en línea simultánea de varias personas </title>
<meta charset = "utf-8">
</ablo>
<Body>
<script type = "text/javaScript" src = "Socket.io.js"> </script>
<script type = "text/javaScript">
var ws = io.connect ('http: // localhost: 9091/');
var isFirst;
ws.on ('conectar', function () {
console.log (ws);
// comienza a atar el evento MouseMove
document.onmouseMove = function (ev) {
if (ws.socket.transport.isopen) {
ws.emit ('posición.change', {x: ev.clientx, y: ev.clienty});
}
}
})
ws.on ('posicion.change', function (data) {
// Comience en línea al mismo tiempo
if (! isFirst) {
isfirst = true;
// El primer mensaje es recibir coordenadas de todos los demás clientes.
para (var i en datos) {
mover (i, datos [i]);
}
}demás{
// de lo contrario, es un mensaje que está desconectado o un mensaje que se actualiza.
if ('posición' == data.type) {
mover (data.id, data.post);
}demás{
eliminar (data.id);
}
}
})
ws.on ('error', function () {
console.log ('Error:', ws);
ws.disconnect ();
})
Función Move (id, pos) {
var ele = document.queryselector ('#cursor_' + id);
if (! ele) {
// Si no existe, se creará
ele = document.createElement ('img');
ele.id = 'cursor_' + id;
ele.src = 'img/cursor.png';
ele.style.position = 'Absolute';
document.body.appendChild (ELE);
}
ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}
función eliminar (id) {
var ele = document.queryselector ('#cursor_' + id);
ELE.PARENTNODE.REMOVECHILD (ELE);
}
</script>
</body>
</html>
El img/cursor.png en la página se puede encontrar aquí, cursor.png, y hay muchos otros íconos del mouse aquí. El principio de la parte delantera es relativamente simple. El análisis simple es el siguiente
1. Cuando la conexión sea exitosa, ata el evento MouseMove en la página y envíe un nuevo mensaje de coordenadas.
2. Recibí el mensaje de acuerdo con el tipo de mensaje, ¿es necesario modificar otros mensajes del cliente o eliminar otros mensajes del cliente?
3. Defina agregar otros íconos del cursor del cliente y eliminar los iconos del cursor
4. Procese los mensajes de excepción del cliente y agregue la desconexión para permitir que el servidor elimine la información de coordenadas
Ejemplo de ejecución
1. Guarde el código del servidor como io_multigame.js
2. Guarde el código del cliente como io_multigame.html
3. Ejecute el nodo del código del servidor io_multigame.js
4. Abra múltiples páginas io_multigame.html para ver el efecto
Resumir
La escritura es bastante informal y se refiere a los sorprendentes NodeJs. Este es un buen libro. Los amigos que quieren saber NodeJs pueden leer este libro.