Aujourd'hui, je vais implémenter une salle de chat simple, en utilisant NodeJS en arrière-plan, et Socket.io dans la communication client et serveur. Il s'agit d'un framework WebSocket relativement mature.
Travail initial
1. Installez Express, utilisez-le pour héberger socket.io et pages statiques. La commande NPM Install Express --Save, - Save peut ajouter le package dans le fichier package.json.
2. Installer Socket.io et Commande NPM Install Socket.io - Save.
Code de serveur d'écriture
Nous hébergeons d'abord le site Web via Express et l'attachons à l'instance socket.io, car la première connexion de socket.io nécessite le protocole HTTP
La copie de code est la suivante:
var express = require ('express'),
io = require ('socket.io');
var app = express ();
app.use (express.static (__ dirname));
var server = app.Listen (8888);
var ws = io.Listen (serveur);
Ajoutez un événement de connexion serveur. Lorsque la connexion client réussit, une annonce est publiée pour dire à tous les utilisateurs en ligne, et lorsque l'utilisateur envoie un message, une diffusion est envoyée pour informer d'autres utilisateurs.
La copie de code est la suivante:
ws.on ('connexion', fonction (client) {
console.log ('/ 033 [96msomeone est connect / 033 [39m / n');
client.on ('join', fonction (msg) {
// Vérifiez la duplication
if (checkNickName (msg)) {
client.emit («surnom», «Il y a un surnom en double!»);
}autre{
client.nickName = msg;
ws.sockets.emit («annonce», «système», msg + «a rejoint la salle de chat!»);
}
});
// écoute d'envoyer des messages
client.on ('send.message', fonction (msg) {
client.broadcast.emit ('send.message', client.nickname, msg);
});
// informer les autres utilisateurs lors de la déconnexion
client.on ('disonnect', function () {
if (client.nickName) {
client.broadcast.emit («send.message», «système», client.nickname + «Laissez la salle de chat!»);
}
})
})
Étant donné que le client est identifié par un surnom, le serveur a besoin d'une fonction pour détecter la duplication des surnoms
La copie de code est la suivante:
// Vérifiez si le surnom est dupliqué
var checkNickName = function (name) {
pour (var k dans ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && wsockets.sockets [k] .nickName == name) {
Retour Vrai;
}
}
}
retourne false;
}
Écrivez le code du service client
Étant donné que le serveur utilise un framework WebSokcet tiers, la page frontale doit se référer séparément au code client Socket.io. Le fichier source peut être trouvé à partir du module socket.io. Le chemin sous Windows est node_modules / socket.io / node_modules / socket.io-client / dist. Il existe des versions de développement et des versions compressées ici, et les références par défaut à la version de développement sont suffisantes.
Le frontal traite principalement les vérifications de surnom d'entrée, le traitement des messages et le code complet est le suivant:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title> Exemple de salle de chat Socket.io </TITAL>
<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> </ TextArea>
<Button id = "Clear"> Effacer l'écran </fruton>
<Button id = "Send"> Envoyer </fontissage>
</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 = fonction (msg) {
ws.emit ('send.message', msg);
}
var addMessage = fonction (de, msg) {
var li = document.CreateElement ('li');
li.innerhtml = '<span>' + from + '</span>' + ':' + msg;
document.QuerySelector ('# chat_conatener'). APPENDCHILD (LI);
// Définissez la barre de défilement dans la zone de contenu en bas
document.QuerySelector ('# chat'). ScrollTop = document.QuerySelector ('# chat'). ScrollHeight;
// et définir la mise au point
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);
si (! msg) retourner;
sendmsg (msg);
// Ajouter un message à votre propre zone de contenu
addMessage («vous», msg);
ele_msg.value = '';
}
ws.on ('connect', function () {
var naunom = window.prompt («Entrez votre surnom!»);
tandis que (! surnom) {
surnom = window.prompt ('Le surnom ne peut pas être vide, veuillez rentrer!')
}
ws.emit («join», surnom);
});
// il y a des surnoms en double
ws.on ('surnom', function () {
var naunom = window.prompt («Le surnom a des doublons, veuillez rentrer!»);
tandis que (! surnom) {
surnom = window.prompt ('Le surnom ne peut pas être vide, veuillez rentrer!')
}
ws.emit («join», surnom);
});
ws.on ('send.message', fonction (de, msg) {
addMessage (de, msg);
});
ws.on ('annonce', fonction (de, msg) {
addMessage (de, msg);
});
document.QuerySelector ('TextArea'). AddEventListener ('Keypress', fonction (événement) {
if (event.which == 13) {
envoyer();
}
});
document.QuerySelect
if (event.which == 13) {
envoyer();
}
});
document.QuerySelect
envoyer();
});
document.QuerySelect
document.QuerySelector ('# chat_conatener'). innerhtml = '';
});
</cript>
</docy>
</html>
Le fichier de compression de code complet est fourni ici
Résumer
Nodejs est une bonne chose, surtout en ce qui concerne la gestion de la messagerie et de la programmation réseau, des IO asynchrones naturelles.