Sails.js est un framework Node.js prometteur, axé sur la liberté et les valeurs par défaut intelligentes. Dans cet article, nous examinerons quelques-unes des fonctionnalités de données fournies par Sails, qui permettent de créer facilement des applications complexes..

Pourquoi Sails est différent des autres cadres

C'est le créateur de Sails, Mike McNeil, qui a le mieux indiqué la raison de choisir Sails: "Sails a été créé par nécessité". De nombreux frameworks que vous voyez sont construits presque pour le côté académique. Ils encouragent généralement les meilleures pratiques et créent une plate-forme permettant aux développeurs de créer des choses plus rapidement ou mieux..

Sails, d’autre part, a été créé pour la production, il n’essaie pas de vous fournir une nouvelle syntaxe ou une nouvelle plate-forme, c’est une base solide, conçue pour créer rapidement un «travail client». Le contraste peut être subtile, mais il y a quelques différences distinctes.

Pour illustrer ce dont je parle, jetons un coup d'œil à Meteor. Meteor est probablement la principale plate-forme JS à l’heure actuelle, mais c’est un excellent exemple de framework, pour des raisons de framework. Maintenant, ce n’est pas une mauvaise chose, je suis un grand partisan de Meteor, c’est-à-dire qu’ils ont décidé de créer un cadre et qu’ils ont fait du bon travail. Mike, d’autre part, s’est efforcé de rendre le travail du client plus rapide . La voile n'est qu'un moyen d'atteindre un but.

Dans Meteor, pratiquement tout est extrait et vous utilisez JavaScript ainsi que l’API de Meteor pour tout coder. Considérant que Sails n'est pas destiné à être une nouvelle plate-forme, donc rien n'est caché.

Il repose sur Socket.io et le populaire framework Express, et vous y avez accès dans leur intégralité, de manière native. Commencez-vous à voir la différence?

De plus, étant donné que Sails est conçu pour la production en premier lieu, il est construit avec de multiples options de dimensionnement et de sécurité.

Il y a beaucoup à dire, mais dans cet article, je voudrais parler de la façon dont Sails traite les données et de la façon dont vous pouvez exploiter certaines des fonctionnalités plus avancées de Sails pour effectuer des actions vraiment sympas..

Installation

Si vous n'avez pas encore installé Sails, vous pouvez le faire via NPM en exécutant:

sudo npm installer -g voiles

Socket.io & Express

Parlons maintenant un peu de Socket.io et d’Express avant d’entrer dans Sails. Si vous êtes intéressé, il existe une bonne série premium sur Express by Andrew Burgess, mais je vais passer en revue les bases pertinentes de ces deux bibliothèques ici:

Socket.io

Socket.io est une bibliothèque pub / sub, qui s'exécute à la fois sur le serveur et sur le client, et leur permet de parler via des sockets Web..

Un bref exemple pourrait ressembler à quelque chose comme ceci:

// Code pour le serveur var io = require ("socket.io"); io.sockets.on ("connexion", fonction (chaussette) sock.emit ("welcomeMessage", bonjour: "monde"); io.listen (80);

Ce code commence par exiger la socket.io bibliothèque, à l’écoute d’une connexion, puis lorsqu’une autre prise se connecte, elle lui enverra un message, adressé au message de bienvenue événement, et enfin passer quelques JSON.

Ensuite, sur le client, vous écrirez quelque chose comme:

// Code pour le client var sock = io.connect ('http: // localhost'); sock.on ('welcomeMessage', function (json) // événement de gestion reçu);

Ici, nous nous connectons au serveur et écoutons pour cela message de bienvenue événement que nous venons de créer. Comme vous pouvez le constater, il s’agit d’un serveur de publication / abonnement relativement simple, qui est bidirectionnel (le client peut également émettre des messages pour le serveur)..

Examinons maintenant Express:

Express

La forme la plus simple d'un itinéraire Express pourrait être quelque chose comme:

app.get ('/ users', fonction (req, res) res.send ("Hello from '/ users'!"););

Cela définit un itinéraire simple, de sorte que lorsqu'un utilisateur accède à l'adresse de votre site et tente d'accéder au /utilisateurs page, ils seront présentés avec le message "Bonjour de '/ utilisateurs'!".

So Express est un framework pour gérer les requêtes HTTP et Socket.io est une bibliothèque de communications websocket. L’équipe de Sails a cependant cartographié tous les itinéraires Express vers Socket.io en interne. Cela signifie que vous pouvez appeler n’importe lequel des itinéraires HTTP via des sockets Web..

Maintenant c'est plutôt cool! Mais il manque encore une pièce du puzzle: les plans de voiles.

Sails vous permet de générer des modèles comme dans d’autres frameworks. Sails peut également générer une API RESTfull prête pour la production. Cela signifie que si vous générez un modèle nommé 'utilisateurs'vous pouvez immédiatement exécuter des requêtes RESTfull sur le'/utilisateurs'ressource sans codage nécessaire.

Si vous débutez avec les API RESTful, c'est simplement un moyen d'accéder aux données, où les opérations CRUD sont mappées à diverses méthodes HTTP..

Donc un OBTENIR demande à '/utilisateurs'obtiendra tous les utilisateurs, un POSTER request va créer un nouvel utilisateur, etc..

Alors qu'est-ce que tout cela signifie?

Cela signifie que nous avons une API RESTfull complète, mappée sur Socket.io via Sails, sans écrire une seule ligne de code.!

Mais pourquoi les sockets sont-ils plus aptes à récupérer des données qu'une requête Ajax? En plus d’être un protocole allégé, les sockets restent ouvertes pour la communication bidirectionnelle, et Sails en a profité. Non seulement Sails vous transmettra les données, mais il vous abonnera automatiquement aux mises à jour de cette base de données et, chaque fois que quelque chose sera ajouté, supprimé ou mis à jour, votre client recevra une notification via le socket Web, pour vous en informer..

C'est pourquoi Sails est si génial!

Voiles + Backbone

Le sujet suivant que je voudrais aborder est l’intégration de Backbone, car si vous n’utilisez pas de framework JavaScript, vous le faites mal..

Dans cet esprit, les voiles et l'épine dorsale sont la paire parfaite. Backbone, comme Sails, est extrêmement discret. Toutes ses fonctionnalités sont disponibles, peuvent être remplacées et facultatives..

Si vous avez déjà utilisé Backbone auparavant, vous saurez peut-être qu'il se connecte de manière native aux API REST. Par conséquent, vous pouvez synchroniser les données en front-end avec votre application Sails..

Mais assez de conversation pour le moment, examinons tout cela en action en créant une application de discussion simple. Pour commencer, ouvrez une fenêtre de terminal et tapez:

nouvelles voiles ChatApp cd Les voiles ChatApp génèrent les modèles de modèle les voiles génèrent les messages de modèle les voiles génèrent les messages de contrôleur les voiles génèrent le contrôleur principal

Cela va créer une nouvelle application et générer des fichiers pour nous. Vous pouvez voir ci-dessus, vous pouvez générer deux ressources différentes; modèles et contrôleurs. Si vous connaissez le modèle de conception MVC, vous devez savoir de quoi il s'agit, mais en bref, les modèles sont vos données et les contrôleurs conservent votre code logique. Nous allons donc avoir besoin de deux collections, une pour les utilisateurs et une pour les messages..

Ensuite, pour les contrôleurs, il nous en faut un pour gérer les routes de page, je l'ai appelé 'principale', alors nous avons un deuxième contrôleur nommé'messages'. Maintenant, vous pourriez vous demander pourquoi j'ai créé un contrôleur avec le même nom que notre messages modèle? Eh bien, si vous vous en souvenez, j'ai dit que Sails peut créer une API REST pour vous. En créant un contrôleur vierge portant le même nom qu'un modèle, Sails saura se replier et créer une API REST pour la ressource correspondante..

Nous avons donc créé un contrôleur pour notre messages modèle, mais il n'y a pas besoin de créer un pour le modèle des utilisateurs, donc je l'ai laissé de côté. Et c'est tout ce qu'il y a à créer des modèles et des contrôleurs.

Ensuite, configurons quelques itinéraires.

Itinéraires

Les itinéraires sont toujours un endroit sûr pour commencer, car vous avez généralement une bonne idée des pages à créer..

Alors ouvrez le routes.js fichier qui est dans le config dossier, cela peut sembler un peu difficile au début, mais si vous supprimez tous les commentaires et ajoutez le dans les itinéraires suivants, il vous restera quelque chose comme ceci:

module.exports.routes = '/': controller: 'main', action: 'index', '/ inscription': controller: 'main', action: 'inscription', '/ login':  contrôleur: 'main', action: 'login', '/ chat': contrôleur: 'main', action: 'chat';

Nous avons une page d’accueil, une page de discussion, puis deux pages pour gérer les pages de connexion et d’inscription. Je les mets tous dans le même contrôleur, mais dans Sails, vous pouvez créer autant de contrôleurs que vous le souhaitez..

Des modèles

Ensuite, jetons un coup d'oeil à la génération messages modèle qui peut être situé à "api> modèles> Messages.js". Nous devons ajouter les colonnes nécessaires à notre modèle. Ce n’est plus une nécessité absolue, mais il créera des fonctions d’aide que nous pourrons utiliser:

// Messages Model module.exports = attributs: userId: 'INT', nom d'utilisateur: 'STRING', message: 'STRING';

Pour le messages modèle, nous commençons par le identifiant de l'utilisateur auquel ce message appartient, un Nom d'utilisateur de sorte que nous n'aurons pas à interroger cela séparément, puis le réel message.

Maintenant remplissons le modèle de l'utilisateur:

// Modèle d'utilisateur module.exports = attributs: nom d'utilisateur: 'STRING', mot de passe: 'STRING';

Et ça y est, nous avons juste le Nom d'utilisateur et mot de passe les attributs. L’étape suivante consiste à créer nos fonctions d’itinéraire dans le MainController.

Contrôleurs

Alors ouvrez le MainController, qui peut être trouvé à "api> contrôleurs> MainController.js". Commençons par créer une fonction pour chacune des routes définies ci-dessus:

var MainController = index: fonction (req, res) , inscription: fonction (req, res) , connexion: fonction (req, res) , discussion: fonction (req, res) ; module.exports = MainController;

Si vous connaissez Express, vous constaterez avec plaisir que ces fonctions sont des fonctions standard d’itinéraires Express. Ils reçoivent deux variables, req pour la requête HTTP et res pour créer la réponse.

Suivant le modèle MVC, Sails offre une fonction de rendu des vues. La page d'accueil n'a besoin de rien de spécial, alors rendons simplement la vue.

index: fonction (req, res) res.view (); ,

Les voiles se penchent davantage vers la convention que sur la configuration, alors quand vous appelez res.view (); Voiles recherchera un fichier de vue (avec un .ejs extension par défaut) en utilisant le modèle suivant: 'vues> controllerName> methodName.ejs'. Donc, pour cet appel, il va rechercher 'vues> principale> index.ejs'. Il convient également de noter que ces vues ne contiennent que les parties spécifiques de la page. Si vous jetez un oeil à 'vues> layout.ejs', vous verrez un appel au milieu pour <%- body %>, C'est ici que votre fichier de vue sera inséré. Par défaut, il utilise ce 'layout.ejs'fichier, mais vous pouvez utiliser d'autres fichiers de mise en page en passant simplement le nom de la mise en res.view () fonction, sous la propriété nommée 'layout'. Par exemple: 'res.view (layout: "other.ejs");'.

Je vais utiliser le fichier de présentation par défaut avec un petit ajustement, je vais ajouter jQuery, Backbone et Underscore. Donc dans le 'layout.ejs'déposer juste avant la fermeture tag, ajoutez les lignes suivantes:

Avec cela en place, nous sommes maintenant prêts à créer la page d'accueil.

La page d'accueil

Créons un nouveau dossier à l'intérieur du vues dossier nommé principale, et à l'intérieur de notre nouvelle principale dossier, nous allons créer un nouveau fichier nommé 'index.ejs'.

Dans le fichier, créons simplement un formulaire de connexion et d'inscription:

Code Chat
 
 
S'identifier
   S'identifier 
 
 
S'inscrire
    S'inscrire 

Assez simple, juste l'essentiel.

Les zones de connexion et d'inscription

Ensuite, nous devons ajouter un peu de JS pour que cela communique avec le serveur. Maintenant, ce ne sera pas spécifique à Sails, nous allons simplement envoyer une requête AJAX via jQuery au serveur Sails.

Ce code peut être inclus sur la page elle-même ou chargé via un fichier JS séparé. Par souci de commodité, je vais simplement le mettre au bas de la même page:

Tout cela n’est que standard JS et jQuery, nous écoutons l’événement click sur le bouton de connexion, nous nous assurons que les champs nom d’utilisateur et mot de passe sont bien remplis et nous affichons les données dans le dossier './s'identifier'itinéraire. Si la connexion réussit, nous redirigeons l'utilisateur vers la page de discussion, sinon nous afficherons l'erreur renvoyée par le serveur..

Ensuite, créons la même chose pour la zone d’inscription:

$ ("# signupButton"). click (function () var nom d'utilisateur = $ ("# signupName"). val (); var mot de passe = $ ("# signupPassword"). val (); var confirmPassword = $ (" #signupConfirmPassword "). val (); if (nom d'utilisateur && mot de passe) if (mot de passe === confirmPassword) $ .post ('/ inscription', nom d'utilisateur: nom d'utilisateur, mot de passe: mot de passe, fonction () fenêtre. location = "/ chat";) .fail (function (res) alert ("Erreur:" + res.getResponseHeader ("error"));); alert ("Les mots de passe ne correspondent pas") ; else alert ("Un nom d'utilisateur et un mot de passe sont requis"););

Ce code est presque identique, à un point tel que vous pouvez probablement résumer la partie entière d’Ajax dans sa propre fonction, mais pour ce tutoriel c’est bien.

Maintenant, nous devons revenir à notreMainController'et gérer ces deux routes, mais avant cela, je souhaite installer un module Node. Nous allons avoir besoin de hacher le mot de passe, comme les mots de passe en texte brut sont ne pas une bonne chose, même pas pour la démonstration! J'ai trouvé un joli module nommé 'password-hash' de David Wood qui fonctionnera bien.

Pour l'installer, allez simplement à la racine de votre application Sails, depuis votre terminal et tapez: NPM installer mot de passe hash.

Une fois cela installé, ouvrons le MainController et mettre en œuvre les deux itinéraires nécessaires. Commençons avec s'inscrire:

inscription: fonction (req, res) nom d'utilisateur var = req.param ("nom d'utilisateur"); var password = req.param ("mot de passe"); Users.findByUsername (nom d'utilisateur) .done (function (err, usr) if (err) res.send (500, erreur: "Erreur de base de données"); else if (usr) res.send (400, erreur: "nom d'utilisateur déjà utilisé"); sinon var hasher = require ("mot de passe-hachage"); mot de passe = hasher.generate (mot de passe); Users.create (nom d'utilisateur: nom d'utilisateur, mot de passe: mot de passe). done (fonction (erreur, utilisateur) if (erreur) res.send (500, erreur: "Erreur de base de données"); else req.session.user = utilisateur; res.send (utilisateur); );); 

C'est un peu bavard, mais tout ce que nous faisons ici est de lire le nom d'utilisateur et le mot de passe de la demande POST et de nous assurer que le nom d'utilisateur n'est pas déjà pris. Vous pouvez voir que j'utilise aussi le mot de passe hasher que nous venons d'installer, c'est super simple à utiliser, il suffit de passer le mot de passe dans la méthode generate et il le hachait en utilisant un sel aléatoire.

Il convient également de mentionner que, chaque fois que nous rencontrons une erreur ou un problème, nous renvoyons un code d'erreur HTTP et un message via un en-tête personnalisé nommé 'Erreur'qui, si vous vous en souvenez, s'affiche dans un message d'alerte sur la page d'index.

Un autre point remarquable est le fait que nous utilisons une fonction 'magique' nommée 'findByUsername', cela est rendu possible parce que nous avons un Nom d'utilisateur colonne à l'intérieur de notre modèle Utilisateurs.

Enfin, au bas de l'écran, vous pouvez voir si tout s'est bien passé. Nous stockons l'utilisateur dans une variable de session et nous le renvoyons avec un code d'état par défaut de 200, ce qui indiquera à jQuery que la demande AJAX a abouti..

Ensuite, écrivons la fonction de connexion:

login: function (req, res) nom d'utilisateur var = req.param ("nom d'utilisateur"); var password = req.param ("mot de passe"); Users.findByUsername (nom d'utilisateur) .done (function (err, usr) if (err) res.send (500, erreur: "Erreur de base de données"); if (usr) var hasher = require ( "password-hash"); if (hasher.verify (mot de passe, usr.password)) req.session.user = usr; res.send (usr); else res.send (400, erreur: "Faux Mot de passe "); else res.send (404, erreur:" Utilisateur introuvable ");); 

Encore une fois, cela ressemble beaucoup à la précédente s'inscrire fonction, nous recherchons un utilisateur avec le même nom d'utilisateur qui a été posté à partir du formulaire et s'il en trouve un, nous vérifions si le mot de passe correspond à l'aide du hasher Vérifier méthode. La raison pour laquelle nous ne pouvons pas simplement hacher le mot de passe à nouveau et le transmettre aux modèles trouver la fonction est parce que le hasher utilise un sel aléatoire, donc si nous hachions le mot de passe à nouveau, il serait égal à autre chose.

Le reste du code est identique. si tout est vérifié, nous stockons l'utilisateur dans une session et la renvoyons, sinon nous renvoyons un message d'erreur.

Le système de connexion est maintenant terminé et nous pouvons enfin passer à la création de la fonction de chat..

Construire la fonction de chat

Puisque nous allons utiliser Backbone pour recevoir les messages, la fonction de route réelle sera très simple. Voici la fonction de chat complète:

chat: fonction (req, res) if (req.session.user) res.view (username: req.session.user.username);  else res.redirect ('/'); 

Nous commençons par vérifier si l'utilisateur est connecté ou non. Si cela se vérifie, il chargera la vue en lui transmettant le nom d'utilisateur qui était dans la session, sinon nous redirigeons simplement vers la page d'accueil..

Créons maintenant une nouvelle vue nommée 'chat.ejsà l'intérieur du principale dossier. Ouvrez-le et créons un formulaire simple pour poster de nouveaux messages et un div conteneur pour afficher tous.

Bienvenue <%= username %>
 
  Ajouter un message 
 
 

Donc, pour cette vue, nous venons d'utiliser du HTML assez standard. La seule chose qui peut nécessiter une explication est la <%= username %> code, ce style de codage n’est pas spécifique à Sails, c’est en fait la syntaxe d’EJS. Cette syntaxe est très similaire aux balises courtes de PHP. <% est l'équivalent de en PHP et <%= est le même que . Le premier extrait d'EJS vous permet d'intégrer le code JS standard sur la page, tandis que le second imprime le code qu'il contient. Ici, nous imprimons simplement le nom d'utilisateur que nous avons transmis du contrôleur.

_.templateSettings = interpolate: /\\(.+?)\Buch\Name/g; var MessagesView = Backbone.View.extend (el: '#messagesContainer', initialize: function () this.collection.on ('add', this.render, this); this.render ();, template: _.modèle("
 message 
"), render: function () this. $ el.html (" "); this.collection.each (function (msg) this. $ el.append (this.template (msg.toJSON ())); , this)); var mView = new MessagesView (collection: messages);

module.exports = function (req, res, next) if (req.session.user) var action = req.param ('action'); if (action == "create") req.body.userId = req.session.user.id; req.body.username = req.session.user.username;  suivant();  else res.send ("Vous devez être connecté", 403); ;

module.exports.policies = '*': true, 'messages': 'MessagesPolicy';

modèle: _.template ("
 Nom d'utilisateur :  message 
"),

var SailsCollection = Backbone.Collection.extend (sailsCollection: "", socket: null, sync: fonction (méthode, modèle, options) var where = ; if (options.where) où = où: options. où if (typeof this.sailsCollection === "chaîne" && this.sailsCollection! == "") this.socket = io.connect (); this.socket.on ("connect", _.bind ( function () this.socket.request ("/" + this.sailsCollection, où, _.bind (function (utilisateurs) this.set (utilisateurs);, this)); this.socket.on ("message ", _.bind (fonction (msg) var m = msg.uri.split (" / "). pop (); if (m ===" créer ") this.add (msg.data); else if (m === "mise à jour") this.get (msg.data.id) .set (msg.data); else if (m === "détruire") this.remove (this.get (msg.data.id));, this));, this)); else console.log ("Erreur: Impossible d'extraire les modèles car la propriété 'sailsCollection' n'est pas définie sur la collection") );

var où = ; if (options.where) où = où: options.where

this.socket.on ("message", _.bind (fonction (msg)



		
			
	   
	




Code