Hoje vou implementar uma sala de bate -papo simples, usando o NodeJS em segundo plano e o Socket.io na comunicação do cliente e do servidor. Esta é uma estrutura WebSocket relativamente madura.
Trabalho inicial
1. Instale o Express, use isso para hospedar soquete.io e páginas estáticas. O comando npm install exprest -save, - -salva pode adicionar o pacote ao arquivo package.json.
2. Instale o soquete.io e command npm install socket.io -save.
Escrevendo código do servidor
Primeiro, hospedamos o site através do Express e o anexamos à instância do soquete.io, porque a primeira conexão do soquete.io requer o protocolo HTTP
A cópia do código é a seguinte:
var express = requer ('express'),
io = requer ('socket.io');
var app = express ();
App.Use (Express.static (__ Dirname));
var Server = App.Listen (8888);
var ws = io.listen (servidor);
Adicione um evento de conexão do servidor. Quando a conexão do cliente é bem -sucedida, um anúncio é emitido para informar a todos os usuários on -line e, quando o usuário envia uma mensagem, uma transmissão é enviada para notificar outros usuários.
A cópia do código é a seguinte:
ws.on ('conexão', função (cliente) {
console.log ('/033 [96msomeOne é connect/033 [39m/n');
client.on ('junção', função (msg) {
// Verifique a duplicação
if (checknickname (msg)) {
client.emit ('apelido', 'há um apelido duplicado!');
}outro{
client.nickname = msg;
ws.sockets.emit ('anúncio', 'sistema', msg + 'ingressou na sala de bate -papo!');
}
});
// Ouça para enviar mensagens
client.on ('send.message', função (msg) {
client.broadcast.emit ('send.message', client.nickname, msg);
});
// notifique outros usuários ao desconectar
client.on ('Desconect', function () {
if (client.nickname) {
client.broadcast.emit ('Send.Message', 'System', client.nickname + 'deixe a sala de bate -papo!');
}
})
})
Como o cliente é identificado por um apelido, o servidor precisa de uma função para detectar duplicação de apelidos
A cópia do código é a seguinte:
// Verifique se o apelido é duplicado
var checknickname = function (nome) {
para (var k em ws.sockets.sockets) {
if (ws.sockets.sockets.hasownProperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .nickname == nome) {
retornar true;
}
}
}
retornar falso;
}
Escreva código de atendimento ao cliente
Como o servidor usa uma estrutura de terceiros do WebSokcet, a página front-end precisa consultar o código do cliente Socket.io separadamente. O arquivo de origem pode ser encontrado no módulo Socket.io. O caminho no Windows é node_modules/soket.io/node_modules/soket.io-client/dist. Existem versões de desenvolvimento e versões compactadas aqui, e as referências padrão à versão de desenvolvimento são suficientes.
O front-end processa principalmente as verificações de apelido de entrada, processamento de mensagens e o código completo é o seguinte:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
Exemplo de sala de bate -papo <title> Socket.io </ititle>
<meta charset = "utf-8">
<link rel = "Stylesheet" href = "css/reset.css"/>
<link rel = "Stylesheet" href = "css/bootstrap.css"/>
<link rel = "Stylesheet" href = "css/app.css"/>
</head>
<Body>
<div>
<div id = "chat">
<ul id = "chat_conatener">
</ul>
</div>
<div>
<Textarea> </sexttarea>
<button id = "clear"> tela transparente </botão>
<button id = "send"> send </botão>
</div>
</div>
<script type = "text/javascript" src = "js/socket.io.js"> </script>
<script type = "text/javascript">
var ws = io.connect ('http://172.16.2.184:888');
var sendmsg = function (msg) {
ws.emit ('Send.Message', msg);
}
var addMessage = function (de, msg) {
var li = document.createElement ('li');
li.innerhtml = '<span>' + de + '</span>' + ':' + msg;
Document.QuerySelector ('#chat_conatener'). AppendChild (LI);
// defina a barra de rolagem na área de conteúdo para o fundo
document.QuerySelector ('#chat'). scrolltop = document.querySelector ('#chat'). scrolHeight;
// e defina o foco
document.QuerySelector ('textarea'). Focus ();
}
var send = function () {
var ele_msg = document.QuerySelector ('textarea');
var msg = ele_msg.value.replace ('/r/n', '') .Trim ();
console.log (msg);
if (! msg) retornar;
sendmsg (msg);
// Adicione mensagem à sua própria área de conteúdo
addMessage ('you', msg);
ele_msg.value = '';
}
ws.on ('Connect', function () {
var apelido = window.prompt ('digite seu apelido!');
while (! apelido) {
apelido = window.prompt ('O apelido não pode estar vazio, por favor, volte!')
}
ws.emit ('junção', apelido);
});
// Existem apelidos duplicados
ws.on ('apelido', function () {
var apelido = window.prompt ('O apelido tem duplicatas, por favor, entre novamente!');
while (! apelido) {
apelido = window.prompt ('O apelido não pode estar vazio, por favor, volte!')
}
ws.emit ('junção', apelido);
});
ws.on ('send.message', função (de, msg) {
addMessage (de, msg);
});
ws.on ('anúncio', função (de, msg) {
addMessage (de, msg);
});
Document.QuerySelector ('textarea'). addEventListener ('keypress', function (event) {
if (event.which == 13) {
enviar();
}
});
Document.QuerySelector ('textarea'). addEventListener ('keydown', função (event) {
if (event.which == 13) {
enviar();
}
});
Document.QuerySelector ('#send'). addEventListener ('click', function () {
enviar();
});
Document.QuerySelector ('#clear'). addEventListener ('click', function () {
Document.QuerySelector ('#chat_conatener'). Innerhtml = '';
});
</script>
</body>
</html>
O arquivo de compactação de código completo é fornecido aqui
Resumir
Nodejs é uma coisa boa, especialmente quando se trata de lidar com mensagens e programação de rede, IO assíncrono natural.