Share
NodeJS me permet d'écrire du code back-end dans l'une de mes langues préférées: JavaScript. C'est la technologie parfaite pour créer des applications en temps réel. Dans ce tutoriel, je vais vous montrer comment créer une application de discussion en ligne avec ExpressJS et Socket.io..
Soit dit en passant, si vous souhaitez trouver une solution de discussion prête à l'emploi à l'aide de Node.js, consultez Yahoo! Messenger node.JS BOT sur le marché Envato.
Yahoo! Messenger node.JS BOT sur le marché Envato Bien sûr, la première chose à faire est d’installer NodeJS sur votre système. Si vous êtes un utilisateur Windows ou Mac, vous pouvez visiter nodejs.org et télécharger le programme d'installation. Si vous préférez plutôt Linux, je vous conseillerais de vous référer à ce lien. Bien que je n'entrerai pas dans les détails, si vous rencontrez des problèmes d'installation, je serai ravi de vous aider. il suffit de laisser un commentaire en dessous de ce post.
Une fois que vous avez installé NodeJS, vous êtes prêt à configurer les instruments nécessaires..
En continuant, dans un répertoire vide, créez un package.json fichier avec le contenu suivant.
"name": "RealTimeWebChat", "version": "0.0.0", "description": "Discussion Web en temps réel", "dépendances": "socket.io": "last", "express": " dernière "," jade ":" dernière "," auteur ":" développeur "
En utilisant la console (sous Windows - invite de commande), accédez à votre dossier et exécutez:
npm installer
En quelques secondes, vous aurez toutes les dépendances nécessaires téléchargées sur le node_modules annuaire.
Commençons par un serveur simple, qui fournira la page HTML de l'application, puis passons aux éléments les plus intéressants: la communication en temps réel. Créé un index.js fichier avec le code de base expressjs suivant:
Accentsconagua
var express = require ("express"); var app = express (); port var = 3700; app.get ("/", fonction (req, res) res.send ("Ça marche!");); app.listen (port); console.log ("Écoute sur le port" + port); Ci-dessus, nous avons créé une application et défini son port. Ensuite, nous avons enregistré une route, qui dans ce cas est une simple requête GET sans aucun paramètre. Pour l'instant, le gestionnaire de la route envoie simplement du texte au client. Enfin, bien sûr, en bas, nous courons le serveur. Pour initialiser l'application, depuis la console, exécutez:
noeud index.js
Le serveur est en cours d'exécution, vous devriez donc pouvoir ouvrir http://127.0.0.1:3700/ et voir:
Ça marche!
Maintenant, au lieu de "Ça marche" nous devrions servir HTML. Au lieu du HTML pur, il peut être avantageux d’utiliser un moteur de template. Jade est un excellent choix, qui intègre bien ExpressJS. C'est ce que j'utilise généralement dans mes propres projets. Créez un répertoire, appelé tpl, et mettre ce qui suit page.jade fichier dedans:
!!! html head title = "Chat web en temps réel" body #content (style = 'width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px # 999; overflow-y: scroll;'). Entrée de commande. .field (style = 'width: 350px;') input.send (type = 'button', value = "send")
La syntaxe de Jade n'est pas si complexe, mais pour un guide complet, je vous suggère de vous référer à jade-lang.com. Pour utiliser Jade avec ExpressJS, nous avons besoin des paramètres suivants.
app.set ('vues', __dirname + '/ tpl'); app.set ('view engine', "jade"); app.engine ('jade', require ('jade') .__ express); app.get ("/", fonction (req, res) res.render ("page");); Ce code indique à Express où se trouvent vos fichiers de modèle et quel moteur de modèle utiliser. Tout cela spécifie la fonction qui traitera le code du modèle. Une fois que tout est configuré, nous pouvons utiliser le .rendre méthode du réponse objet, et simplement envoyer notre code Jade à l'utilisateur.
La sortie n'est pas spéciale à ce stade; rien de plus qu'un div element (celui avec id contenu), qui servira de titulaire pour les messages de discussion et les deux contrôles (champ de saisie et bouton), que nous utiliserons pour envoyer le message.
Étant donné que nous allons utiliser un fichier JavaScript externe contenant la logique frontale, nous devons informer ExpressJS où rechercher ces ressources. Créer un répertoire vide, Publique, et ajoutez la ligne suivante avant l'appel du .écoute méthode.
app.use (express.static (__ dirname + '/ public'));
Jusqu'ici tout va bien; nous avons un serveur qui répond avec succès aux requêtes GET. Maintenant, il est temps d'ajouter Socket.io l'intégration. Changer cette ligne:
app.listen (port);
à:
var io = require ('socket.io'). listen (app.listen (port)); Ci-dessus, nous avons passé le serveur ExpressJS à Socket.io. En effet, notre communication en temps réel aura toujours lieu sur le même port.
À l'avenir, nous devons écrire le code qui recevra un message du client et l'envoyer à tous les autres. Chaque application Socket.io commence par un lien gestionnaire. Nous devrions en avoir un:
io.sockets.on ('connexion', fonction (socket) socket.emit ('message', message: 'bienvenue sur le chat'); socket.on ('send', fonction (données) io. sockets.emit ('message', données););); L'object, prise, qui est passé à votre gestionnaire, est en fait le socket du client. Considérez-le comme une jonction entre votre serveur et le navigateur de l'utilisateur. En cas de connexion réussie, nous envoyons un Bienvenue type de message et, bien sûr, lier un autre gestionnaire qui sera utilisé comme destinataire. En conséquence, le client doit émettre un message avec le nom, envoyer, que nous allons attraper. Ensuite, nous transmettons simplement les données envoyées par l’utilisateur à tous les autres sockets avec io.sockets.emit.
Avec le code ci-dessus, notre back-end est prêt à recevoir et à envoyer des messages aux clients. Ajoutons du code frontal.
Créer chat.js, et placez-le dans le Publique répertoire de votre application. Collez le code suivant:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var champ = document.getElementById ("champ"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("contenu"); socket.on ('message', fonction (data) if (data.message) messages.push (data.message); var html = "; pour (var i = 0; i Notre logique est enveloppée dans un .en charge gestionnaire juste pour s’assurer que tout le balisage et le JavaScript externe sont entièrement chargés. Dans les lignes suivantes, nous créons un tableau qui stockera tous les messages, un prise objet, et quelques raccourcis vers nos éléments DOM. De nouveau, comme pour le back-end, nous lions une fonction, qui réagira à l'activité du socket. Dans notre cas, il s’agit d’un événement nommé message. Lorsqu'un tel événement se produit, nous nous attendons à recevoir un objet, Les données, avec la propriété, message. Ajoutez ce message à notre stockage et mettez à jour le contenu div. Nous avons également inclus la logique d'envoi du message. C'est assez simple, il suffit d'émettre un message avec le nom, envoyer.
Si vous ouvrez http: // localhost: 3700, vous rencontrerez des erreurs popup. C'est parce que nous devons mettre à jour page.jade contenir les fichiers JavaScript nécessaires.
head title = "Chat en ligne en temps réel" script (src = '/ chat.js') script (src = '/ socket.io/socket.io.js')
Notez que Socket.io gère la livraison de socket.io.js. Vous n'avez pas à vous soucier du téléchargement manuel de ce fichier.
Nous pouvons à nouveau exécuter notre serveur avec noeud index.js dans la console et ouvert http: // localhost: 3700. Vous devriez voir le message de bienvenue. Bien sûr, si vous envoyez quelque chose, il devrait apparaître dans le contenu div. Si vous voulez être sûr que cela fonctionne, ouvrez un nouvel onglet (ou, mieux, un nouveau navigateur) et chargez l'application. Le gros avantage de Socket.io est que cela fonctionne même si vous arrêtez le serveur NodeJS. Le front-end continuera à fonctionner. Une fois le serveur redémarré, votre discussion se déroulera bien..
Dans son état actuel, notre chat n'est pas parfait et nécessite quelques améliorations..
Le premier changement que nous devons faire concerne l'identité des messages. Actuellement, on ne sait pas exactement quels messages sont envoyés par qui. La bonne chose est que nous n'avons pas à mettre à jour notre code NodeJS pour y parvenir. C’est parce que le serveur transmet simplement le Les données objet. Nous devons donc y ajouter une nouvelle propriété et la lire plus tard. Avant d'apporter des corrections à chat.js, ajoutons un nouveau contribution champ, où l'utilisateur peut ajouter son nom. Dans page.jade, changer la les contrôles div:
.contrôles | Nom: input # name (style = 'width: 350px;') br input # champ (style = 'width: 350px;') input # send (type = 'bouton', value = "send")
Ensuite, dans code.js:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var champ = document.getElementById ("champ"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("contenu"); var name = document.getElementById ("nom"); socket.on ('message', fonction (data) if (data.message) messages.push (data); var html = "; pour (var i = 0; i'; html + = messages [i] .message + '
'; content.innerHTML = html; else console.log ("Il y a un problème:", data); ); sendButton.onclick = function () if (name.value == "") alert ("Veuillez taper votre nom!"); else var text = field.value; socket.emit ('send', message: text, nom d'utilisateur: name.value); ; Pour résumer les changements, nous avons:
contribution champNom d'utilisateur propriété de l'objet, qui est envoyée au serveurSi le nombre de messages devient trop élevé, l'utilisateur devra faire défiler les options. div:
content.innerHTML = html; content.scrollTop = content.scrollHeight;
N'oubliez pas que la solution ci-dessus ne fonctionnera probablement pas dans IE7 et les versions antérieures, mais ce n'est pas grave: il est temps que IE7 disparaisse. Toutefois, si vous souhaitez assurer un support, n'hésitez pas à utiliser jQuery:
$ ("# contenu"). scrollTop ($ ("# contenu") [0] .scrollHeight); Il serait également utile que le champ de saisie soit effacé après l'envoi du message:
socket.emit ('send', message: text, nom d'utilisateur: name.value); field.value = ""; Le dernier problème ennuyeux est le clic de la envoyer bouton à chaque fois. Avec une touche de jQuery, nous pouvons écouter lorsque l'utilisateur appuie sur le Entrer clé.
$ (document) .ready (fonction () $ ("# champ"). keyup (fonction (e) if (e.CodeClé == 13) sendMessage (););); La fonction, envoyer le message, pourrait être enregistré, comme si:
sendButton.onclick = sendMessage = function () …;
Veuillez noter qu'il ne s'agit pas d'une pratique recommandée, car elle est enregistrée en tant que fonction globale. Mais, pour notre petit test ici, ça ira.
NodeJS est une technologie extrêmement utile qui nous procure beaucoup de puissance et de joie, en particulier lorsque l’on sait écrire du code JavaScript pur. Comme vous pouvez le constater, avec seulement quelques lignes de code, nous avons réussi à écrire une application de chat en temps réel entièrement fonctionnelle. Génial!
Vous souhaitez en savoir plus sur la création d'applications Web avec ExpressJS? Nous vous avons couvert!
