Hoy implementaré una sala de chat simple, usando NodeJS en segundo plano, y Socket.io en la comunicación del cliente y el servidor. Este es un marco WebSocket relativamente maduro.
Trabajo inicial
1. Instale Express, use esto para host Socket.io y páginas estáticas. El comando npm install express --save, --save puede agregar el paquete al archivo paquete.json.
2. Instale Socket.io, y comando NPM Instale Socket.io --save.
Escribir código de servidor
Primero organizamos el sitio web a través de Express y lo adjuntamos a la instancia de Socket.io, porque la primera conexión de Socket.io requiere el protocolo HTTP
La copia del código es la siguiente:
var express = require ('express'),
io = require ('Socket.io');
var app = express ();
app.use (express.static (__ dirname));
var servidor = app.listen (8888);
var ws = io.listen (servidor);
Agregue un evento de conexión del servidor. Cuando la conexión del cliente es exitosa, se emite un anuncio para informar a todos los usuarios en línea, y cuando el usuario envía un mensaje, se envía una transmisión para notificar a otros usuarios.
La copia del código es la siguiente:
ws.on ('conexión', function (cliente) {
console.log ('/033 [96MsomeOne es conectado/033 [39m/n');
client.on ('unión', function (msg) {
// Verifique la duplicación
if (checknickName (msg)) {
Client.emit ('Nombre', '¡Hay un apodo duplicado!');
}demás{
client.nickName = msg;
ws.sockets.emit ('anuncio', 'sistema', msg + 'se unió a la sala de chat!');
}
});
// Escuchar enviar mensajes
client.on ('send.message', function (msg) {
client.broadcast.emit ('send.message', client.nickname, msg);
});
// notificar a otros usuarios cuando se desconecte
client.on ('disconnect', function () {
if (client.nickname) {
client.broadcast.emit ('send.message', 'System', Client.nickName + '¡Deja la sala de chat!');
}
})
})
Dado que el cliente se identifica por un apodo, el servidor necesita una función para detectar la duplicación de los apodos
La copia del código es la siguiente:
// Compruebe si el apodo está duplicado
var chechNickName = function (nombre) {
para (var k en ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .nickname == nombre) {
devolver verdadero;
}
}
}
devolver falso;
}
Escribir código de servicio al cliente
Dado que el servidor utiliza un marco de WebSOKCET de terceros, la página front-end debe consultar el código del cliente Socket.io por separado. El archivo fuente se puede encontrar desde el módulo Socket.io. La ruta en Windows es Node_Modules/Socket.io/Node_Modules/Socket.io-Client/Dist. Aquí hay versiones de desarrollo y versiones comprimidas, y las referencias predeterminadas a la versión de desarrollo son suficientes.
El front-end procesa principalmente las verificaciones de apodo de entrada, el procesamiento de mensajes y el código completo es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> Socket.io Chat Room Ejemplo </title>
<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"/>
</ablo>
<Body>
<div>
<div id = "chat">
<ul id = "chat_conatener">
</ul>
</div>
<div>
<ExteArea> </extexarea>
<botón id = "claro"> Clear Screen </boton>
<Button id = "Enviar"> Enviar </Button>
</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:8888');
var sendmsg = function (msg) {
ws.emit ('send.message', msg);
}
var addMessage = function (from, msg) {
var li = document.createElement ('li');
li.innerhtml = '<span>' + desde + '</span>' + ':' + msg;
document.queryselector ('#chat_conatener'). appendChild (li);
// Establecer la barra de desplazamiento en el área de contenido en la parte inferior
document.Queryselector ('#chat'). scrolltop = document.queryselector ('#chat'). scrollHeight;
// y establecer enfoque
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) return;
sendmsg (msg);
// Agregar mensaje a su propia área de contenido
addMessage ('usted', msg);
ele_msg.value = '';
}
ws.on ('conectar', function () {
Var Nnopname = Window.Prompt ('¡Ingrese su apodo!');
while (! Nickname) {
Nickname = Window.Prompt ('El apodo no puede estar vacío, ¡por favor vuelva a entrar!')
}
ws.emit ('unirse', apodo);
});
// hay apodos duplicados
ws.on ('apodo', function () {
Var Nnopname = Window.prompt ('El apodo tiene duplicados, ¡por favor vuelva a entrar!');
while (! Nickname) {
Nickname = Window.Prompt ('El apodo no puede estar vacío, ¡por favor vuelva a entrar!')
}
ws.emit ('unirse', apodo);
});
ws.on ('send.message', function (from, msg) {
addMessage (de, msg);
});
ws.on ('anuncio', function (from, msg) {
addMessage (de, msg);
});
document.Queryselector ('textArea'). addEventListener ('keyPress', function (event) {
if (event.which == 13) {
enviar();
}
});
document.queryselector ('textArea'). addEventListener ('keydown', function (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>
El archivo de compresión de código completo se proporciona aquí
Resumir
NodeJS es algo bueno, especialmente cuando se trata de manejar mensajes y programación de redes, IO asíncrono natural.