Share
Node.js et Websockets constituent la combinaison parfaite pour écrire des applications très rapides et sans décalage qui peuvent envoyer des données à un grand nombre de clients. Alors pourquoi ne pas commencer à apprendre sur ces deux sujets en construisant un service de chat! Nous verrons comment installer les packages Node.js, servir une page statique au client avec un serveur Web de base et configurer Socket.io pour communiquer avec le client..
Alors pourquoi utiliser ce combo?
De nombreuses plates-formes peuvent exécuter une application de discussion en ligne, mais en choisissant Node.js, nous n'avons pas à apprendre une langue complètement différente, il s'agit simplement de JavaScript, mais côté serveur..
Node.js est une plate-forme construite sur le moteur d'exécution JavaScript de Chrome pour faciliter la création d'applications JavaScript exécutées sur le serveur. Node.js utilise un modèle d'E / S non bloquant et basé sur les événements, ce qui le rend parfait pour la création d'applications en temps réel..
De plus en plus d'applications Node.js sont conçues pour la communication en temps réel. BrowserQuest de Mozilla est un exemple célèbre. Il s'agit d'un MMORPG entièrement écrit en Node.js dont le code source a été publié sur Github..
Node.js est livré avec un gestionnaire de paquets intégré: npm. Nous allons l'utiliser pour installer des packages qui contribueront à accélérer notre processus de développement d'applications..
Nous utiliserons trois packages pour ce tutoriel: Jade, Express et Socket.io.
La principale caractéristique de notre application est la communication en temps réel entre le client et le serveur..
HTML5 introduit Websockets, mais il est loin d'être pris en charge par tous les utilisateurs, nous avons donc besoin d'une solution de sauvegarde.
Socket.io est notre solution de sauvegarde: il testera la compatibilité de Websocket et s'il n'est pas pris en charge, il utilisera Adobe Flash, AJAX ou un iFrame..
Enfin, il prend en charge un très grand nombre de navigateurs:
Il offre également des fonctions très simples pour la communication entre le serveur et le client, des deux côtés..
Commençons par installer les trois paquets dont nous aurons besoin.
Npm nous permet d'installer très rapidement les paquets, en utilisant une seule ligne. Allez tout d'abord dans votre répertoire et demandez à npm de télécharger les paquets nécessaires:
npm installer express jade socket.io
Maintenant, nous pouvons commencer à construire notre contrôleur côté serveur pour servir la page principale.
Nous allons enregistrer tout le code côté serveur dans un "server.js" fichier qui sera exécuté par Node.js.
Pour servir notre page statique, nous utiliserons Express, un package qui simplifie l’ensemble du processus d’envoi de page côté serveur..
Nous allons donc inclure ce paquet dans notre projet et démarrer le serveur:
Accentsconagua
var express = require ('express'), app = express.createServer (); Ensuite, nous devons configurer Express pour qu'il serve la page à partir des vues de répertoire avec le moteur de création de modèles Jade que nous avons installé précédemment..
Express utilise par défaut un fichier de présentation, mais nous n'en avons pas besoin, car nous ne servirons qu'une page, nous le désactivons à la place..
Express peut également servir un répertoire statique au client, comme un serveur Web classique. Nous allons donc envoyer un message. "Publique" dossier qui contiendra tous nos fichiers JavaScript, CSS et images.
app.set ('vues', __dirname + '/ views'); app.set ('moteur de visualisation', 'jade'); app.set ("options d'affichage", layout: false); app.configure (function () app.use (express.static (__ dirname + '/ public'));); Ensuite, créons deux dossiers dans notre dossier de projet nommé "Publique" et "vues".
Maintenant, nous devons juste configurer Express pour servir un "home.jade" fichier, que nous allons créer dans un instant, puis configurer Express pour qu’il écoute un port spécifique.
Je vais utiliser le port 3000 mais vous pouvez utiliser ce que vous préférez.
app.get ('/', fonction (req, res) res.render ('home.jade');); app.listen (3000); 
Node.js utilise des moteurs de templates pour servir des pages Web. C'est utile d'envoyer des pages dynamiques et de les construire plus rapidement.
Dans ce tutoriel, nous utiliserons Jade. Sa syntaxe est très claire et supporte tout ce dont nous avons besoin.
"Jade est un moteur de gabarit de haute performance fortement influencé par Haml et implémenté avec JavaScript for Node."
Maintenant, je ne vais pas revenir sur Jade en détail, si vous avez besoin d’aide supplémentaire, vous pouvez trouver une documentation très bien écrite sur son rapport Github..
Nous avons installé Jade plus tôt, mais nous devons l’inclure dans notre server.js fichier comme nous l'avons fait pour Express.
Par convention, nous incluons nos bibliothèques en haut de notre fichier pour les utiliser plus tard, sans avoir à vérifier si elles sont déjà incluses. Alors placez le code suivant en haut de votre "server.js" fichier :
var jade = require ('jade'); Et cela complète notre configuration Jade. Express est déjà configuré pour utiliser Jade avec nos fichiers de vue. Pour envoyer une réponse HTML, il suffit de créer ce fichier..
Si nous démarrons notre serveur maintenant, il se plantera car nous demandons à notre application d'envoyer une page qui n'existe pas encore..
Nous n'allons pas créer une page complète, mais simplement un élément de base comportant un titre, un conteneur pour les messages, une zone de texte, un bouton d'envoi et un compteur d'utilisateurs..
Allez-y et créez un "home.jade" page à l'intérieur du "vues" dossier avec le code suivant:
doctype 5 html head titre Script de conversation (src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') script (src = "/ socket.io/socket. io.js ") script (src =" script.js ") corps div.container en-tête h1 Application de conversation avec Node.js et Socket.io, entrée (type = 'text') # bouton pseudoInput # pseudoSet Définir Pseudo div # chatEntries div # chatControls input (type = 'text') # messageInput button # submit Send
"Jade est tout au sujet de l'indentation"
La langue de jade est tout au sujet de l'indentation. Comme vous pouvez le constater, nous n’avons pas besoin de fermer nos conteneurs, il suffit d’indenter les enfants du conteneur parent..
Nous utilisons également une période "." et un signe de la livre "#" pour indiquer la classe ou l'ID de l'élément, comme dans un fichier CSS.
Nous relions également trois scripts en haut du fichier. Le premier est jQuery de Google CDN, ensuite nous avons le script Socket.io qui est servi automatiquement par le paquet, et enfin un "script.js" fichier qui conservera toutes nos fonctions JS personnalisées.
Socket.io est basé sur les événements, tout comme Node. Son objectif est de rendre les applications en temps réel possibles sur tous les navigateurs et appareils mobiles, en brouillant les frontières entre ces différents mécanismes de transport. C'est sans souci, en temps réel et 100% JavaScript.
Comme les autres modules, nous devons l’inclure dans notre server.js fichier. Nous allons également chaîner sur notre serveur express pour écouter les connexions de la même adresse et du même port.
var io = require ('socket.io'). listen (app); Le premier événement que nous utiliserons est l’événement de connexion. Il est déclenché lorsqu'un client tente de se connecter au serveur. Socket.io crée un nouveau socket que nous utiliserons pour recevoir ou envoyer des messages au client..
Commençons par initialiser la connexion:
io.sockets.on ('connection', function (socket) // nos autres événements…); Cette fonction prend deux arguments, le premier est l'événement et le second est la fonction de rappel, avec l'objet socket.
En utilisant un code comme celui-ci, nous pouvons créer de nouveaux événements sur le client et sur le serveur avec Socket.io. Nous allons régler le "pseudo" événement et le "message" événement suivant.
Pour ce faire, c’est très simple, nous utilisons simplement la même syntaxe, mais cette fois avec notre prise objet et non avec le "io.sockets" (avec un "s") objet. Cela nous permet de communiquer spécifiquement avec un client.
Donc, dans notre fonction de connexion, ajoutons dans la "pseudo" code de l'événement.
socket.on ('setPseudo', fonction (données) socket.set ('pseudo', données);); La fonction de rappel prend un argument, ce sont les données du client et dans notre cas, elles contiennent les pseudo. Avec le "ensemble" fonction, nous affectons une variable à la prise. Le premier argument est le nom de cette variable et le second est la valeur.
Ensuite, nous devons ajouter le code pour le "message" un événement. Il obtiendra le pseudo de l'utilisateur, diffusera un tableau à tous les clients contenant le message que nous avons reçu ainsi que le pseudo de l'utilisateur et le connectera à notre console..
socket.on ('message', fonction (message) socket.get ('pseudo', fonction (erreur, nom) var data = 'message': message, pseudo: nom; socket.broadcast.emit (' message ', données); console.log ("utilisateur" + nom + "envoyer ceci:" + message);))); Ceci termine notre configuration côté serveur. Si vous le souhaitez, vous pouvez utiliser d'autres événements pour ajouter de nouvelles fonctionnalités au chat..
La bonne chose à propos de Socket.io est que nous n’avons pas à nous soucier de la gestion des déconnexions des clients. Lorsqu'il se déconnecte, Socket.io ne recevra plus les réponses aux messages de "pulsation" et désactivera la session associée au client. S'il ne s'agissait que d'une déconnexion temporaire, le client se reconnectera et poursuivra la session..
Maintenant que notre serveur est configuré pour gérer les messages, nous avons besoin d'un client pour les envoyer.
Le côté client de Socket.io est presque identique au côté serveur. Cela fonctionne aussi avec les événements personnalisés et nous allons créer les mêmes que sur le serveur.
Alors d'abord, créez un "script.js" déposer à l'intérieur du Publique dossier. Nous allons stocker toutes nos fonctions à l'intérieur de celui-ci.
Nous devons d’abord établir la connexion socket.io entre le client et le serveur. Il sera stocké dans une variable, que nous utiliserons plus tard pour envoyer ou recevoir des données. Lorsque la connexion n’est pas transmise, elle se connecte automatiquement au serveur qui servira la page..
var socket = io.connect ();
Ensuite, créons quelques fonctions d’aide dont nous aurons besoin plus tard. La première est une fonction simple permettant d’ajouter un message à l’écran avec le pseudo pseudo.
fonction addMessage (msg, pseudo) $ ("# chatEntries"). append (''+ pseudo +': '+ msg +'
'); Cette aide utilise la fonction d’ajout de jQuery pour ajouter un div à la fin de #chatEntries div.
Nous allons maintenant écrire une fonction que nous pourrons appeler quand nous voudrons envoyer un nouveau message..
function sentMessage () if ($ ('# messageInput'). val ()! = "") socket.emit ('message', $ ('# messageInput'). val ()); addMessage ($ ('# messageInput'). val (), "moi", nouvelle Date (). toISOString (), true); $ ('# messageInput'). val ("); Tout d'abord, nous vérifions que notre zone de texte n'est pas vide, puis nous envoyons un paquet nommé "message" sur le serveur qui contient le texte du message, nous l’imprimons à l’écran avec notre "Ajouter un message" fonction, et enfin on enlève tout le texte de la textarea.
Désormais, lorsque le client ouvre la page, nous devons d’abord définir le pseudo de l’utilisateur. Cette fonction enverra le pseudo au serveur et affichera la zone de texte et le bouton d'envoi.
function setPseudo () if ($ ("# pseudoInput"). val ()! = "") socket.emit ('setPseudo', $ ("# pseudoInput"). val ()); $ ('# chatControls'). show (); $ ('# pseudoInput'). hide (); $ ('# pseudoSet'). hide (); De plus, nous masquons les pseudo-paramètres de contrôle lors de leur envoi au serveur..
Maintenant, comme nous l'avons fait côté serveur, nous devons nous assurer que nous pouvons recevoir les messages entrants et cette fois, nous les imprimerons à l'écran. Nous allons utiliser la même syntaxe, mais cette fois nous appelons le "Ajouter un message" une fonction.
socket.on ('message', fonction (données) addMessage (données ['message'], données ['pseudo']));); Tout comme avec notre configuration de serveur, le paquet envoyé au client est un tableau contenant le message et le pseudo. Nous appelons donc notre "Ajouter un message" fonction passant dans le message et le pseudo, que nous extrayons du paquet de données reçu.
Il ne reste plus qu’à ajouter la fonction d’initialisation qui est activée une fois la page entièrement chargée..
$ (function () $ ("# chatControls"). hide (); $ ("# pseudoSet"). click (function () setPseudo ()); $ ("# submit"). click (function ( ) Message envoyé();); ); Tout d'abord, nous masquons les commandes de discussion avant que le pseudo ne soit défini, puis nous définissons deux écouteurs de clic qui écoutent les clics sur nos deux boutons d'envoi. Le premier est pour le pseudo et le second est pour les messages.
Et cela termine notre script côté client.
Nous avons maintenant un service de discussion en ligne. Pour le démarrer, lancez la commande suivante:
noeud serveur.js
Dans votre terminal, vous devriez recevoir un message de Socket.io indiquant que le serveur est démarré. Pour voir votre page, allez à 127.0.0.1:3000 (ou le port que vous avez choisi précédemment).
La conception est très basique, mais vous pouvez facilement ajouter une feuille de style avec des transitions CSS3 pour les messages entrants, les sons HTML5 ou Bootstrap de Twitter..
Comme vous pouvez le constater, les scripts serveur et client sont assez similaires: c’est le pouvoir de Node.js. Vous pouvez créer une application sans avoir à écrire le code deux fois.
Enfin, vous avez peut-être remarqué qu’il ne nous fallait que 25 lignes de code dans notre server.js fichier pour créer une application de chat fonctionnelle, aux performances étonnantes. C'est très court, mais ça marche aussi très bien.
Maintenant, si vous êtes intéressé, j'ai créé une meilleure application de service de chat, avec un beau design, avec quelques fonctionnalités supplémentaires. Il est hébergé sur Nodester et le code source est sur Github..
En voici un aperçu.
Merci d'avoir lu.
