Recentemente, devido às necessidades do projeto, estudei a implementação do WebSocket do NodeJS, Socket.io, que é uma estrutura amplamente usada pelo aplicativo de fundo do NodeJS.
Preparação
1. Instale o soquete.io e use o comando npm install socket.io
2. Para sistemas Windows, é necessário um ambiente de compilação VC, porque quando o Socket.io é instalado, o código VC será compilado.
Princípios básicos do jogo
1. O servidor ouve a conexão do cliente
2. Quando a conexão do cliente é bem -sucedida, a página de ligação move o evento do mouse e a coordenada atual é enviada ao servidor.
3. O servidor salva um objeto de coordenadas globais e usa o número exclusivo do cliente como o valor da chave.
4. Quando uma nova conexão chega, transmita as coordenadas para outros clientes
5. Quando o cliente é desconectado, o servidor exclui suas informações de coordenadas e a transmite para outros clientes.
Comece a implementar o código do servidor
Quando o Scoket.io estabelece o monitoramento do servidor, ele precisa confiar em uma conexão HTTP para lidar com o protocolo de atualização, para que também precise de um módulo HTTP, o código é o seguinte:
A cópia do código é a seguinte:
var http = requer ('http'),
io = requer ('socket.io');
var app = http.createServer (). Ouça (9091);
var ws = io.listen (app);
Em seguida, defina um objeto de coordenada global
A cópia do código é a seguinte:
var posts = {};
Comece a ouvir a conexão do cliente e adicione uma nova função de transmissão (na verdade, você pode usar o método de transmissão io.sockets.broadcast.emit, que vem com soquete.io), e o código principal é o seguinte:
A cópia do código é a seguinte:
ws.on ('conexão', função (cliente) {
// Função de transmissão
var broadcast = function (msg, cl) {
para (var k em 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 tem uma nova conexão:/033 [39m', postagens);
// Depois que a conexão do cliente for bem -sucedida, as informações de coordenadas de outros clientes serão enviadas
client.emit ('position.change', postagens);
// recebe o cliente envia uma mensagem
client.on ('position.change', função (msg) {
// Atualmente, a mensagem do cliente é apenas uma mensagem coordenada
postions [client.id] = msg;
// transmitir mensagens para todos os outros clientes
transmissão({
Tipo: 'Posição',
Post: msg,
ID: client.id
}, cliente);
});
// Receba mensagem de conexão de fechamento do cliente
client.on ('Close', function () {
console.log ('Close!');
// exclua o cliente e notifique outros clientes
excluir posições [client.id];
// transmitir mensagens para todos os outros clientes
transmissão ({
Tipo: 'Desconectar',
ID: client.id
}, cliente);
});
// desconectar
client.on ('Desconect', function () {
console.log ('Desconectar!');
// exclua o cliente e notifique outros clientes
excluir posições [client.id];
// transmitir mensagens para todos os outros clientes
transmissão({
Tipo: 'Desconectar',
ID: client.id
}, cliente);
})
// Defina o manuseio de exceção do cliente
client.on ('erro', função (err) {
console.log ('erro->', err);
})
});
O ponto chave da análise do código acima é
1. O novo cliente está conectado com sucesso e as informações de coordenadas de outros clientes são enviadas.
2. Quando o cliente atualizar as informações de coordenadas, notifique outros clientes.
3. O cliente desconecta e notifica outros clientes
4. Tipos de mensagens de transmissão são divididos em coordenadas modificadoras e remoção de coordenadas
Escreva a página HTML do cliente
Como o Socket.io é uma estrutura personalizada, o cliente precisa se referir ao Socket.io.js. Este JS pode ser encontrado no módulo Socket.io. O caminho é geralmente node_modules/soket.io/node_modules/soket.io-client/dist. Existem duas versões de mesclagem e compressão. Você pode usar a versão de mesclagem durante o desenvolvimento.
O código completo é o seguinte:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<title> Socket.io Exemplo da interação on -line simultânea de várias pessoas </ititle>
<meta charset = "utf-8">
</head>
<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 ('Connect', function () {
console.log (WS);
// Iniciar o evento Mousemove
document.onMousEMove = function (EV) {
if (ws.socket.transport.isopen) {
ws.emit ('position.change', {x: ev.clientX, y: ev.clienty});
}
}
})
ws.on ('position.change', function (dados) {
// Comece online ao mesmo tempo
if (! isfirst) {
isfirst = true;
// A primeira mensagem é receber coordenadas de todos os outros clientes
para (var i em dados) {
mover (i, dados [i]);
}
}outro{
// Caso contrário, é uma mensagem desconectada ou uma mensagem atualizada.
if ('position' == data.type) {
mover (data.id, data.post);
}outro{
remover (data.id);
}
}
})
ws.on ('erro', function () {
console.log ('erro:', ws);
ws.disconnect ();
})
função move (id, pos) {
var ele = document.QuerySelector ('#cursor_' + id);
if (! ele) {
// se não existir, será criado
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';
}
função remover (id) {
var ele = document.QuerySelector ('#cursor_' + id);
ele.parentnode.removechild (ELE);
}
</script>
</body>
</html>
O img/cursor.png na página pode ser encontrado aqui, cursor.png, e existem muitos outros ícones de mouse aqui. O princípio do front end é relativamente simples. A análise simples é a seguinte
1. Quando a conexão for bem -sucedida, vincule o evento MouseMove na página e envie uma nova mensagem de coordenadas.
2. Recebeu a mensagem de acordo com o tipo de mensagem, é necessário modificar outras mensagens do cliente ou remover outras mensagens do cliente?
3. Defina a adição de outros ícones do cursor do cliente e a remoção de ícones do cursor
4. Processar mensagens de exceção do cliente e adicionar desconexão para permitir que o servidor remova informações de coordenadas
Exemplo de execução
1. Salve o código do servidor como io_multigame.js
2. Salve o código do cliente como io_multigame.html
3. Execute o código do servidor nó io_multigame.js
4. Abra várias páginas io_multigame.html para ver o efeito
Resumir
A escrita é bastante casual e referências aos incríveis nodejs. Este é um bom livro. Amigos que querem saber o NodeJS podem ler este livro.