Créez une application Web avec Backbone.js et Socket.io

Les plats clés

• Backbone.js fournit une structure aux applications Web en offrant des modèles avec des événements de liaison à la valeur clé et des événements personnalisés, des collections avec des fonctions énumérables, des vues avec manipulation d'événements et une connexion aux API existantes sur une interface JSON RESTFul.
• Socket.io est une bibliothèque JavaScript qui permet des applications Web en temps réel en permettant une communication bidirectionnelle entre les clients Web et les serveurs. Il est utilisé pour créer une session de communication interactive entre le navigateur de l'utilisateur et un serveur.
• Le motif Pubsub est un paradigme de messagerie asynchrone qui aide à éviter le couplage, ce qui rend le code plus flexible, extensible et maintenable. Backbone.js rend la mise en œuvre simple de ce système d'événements.
• Dans l'exemple fourni, Backbone.js et Socket.io sont utilisés pour créer un outil de visualisation du graphique où les données sont synchronisées entre les utilisateurs en temps réel. Le code est structuré pour permettre une personnalisation et une migration faciles vers d'autres bibliothèques ou bases de données.
• L'exécution de l'exemple implique de cloner le référentiel GitHub, d'installer des dépendances, de démarrer l'application et de se diriger vers http: // localhost: 5000 pour voir l'application en cours d'exécution.

Cet article a été revu par des pairs par Thomas Greco et Marc Towler. Merci à tous les pair examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!

Comme beaucoup d'entre vous le savent, Backbone.js est un framework MV * bien connu. Il est hébergé sur github et It donne une structure aux applications Web en fournissant des modèles avec des événements de liaison et personnalisés de valeur clé, des collections avec une riche API de fonctions énumérées, des vues avec une manipulation déclarative d'événements, et connecte tout cela à votre API existante sur une interface JSON reposante.

Dans cet article, nous utiliserons une fonctionnalité intégrée de l'épine dorsale appelée Events pour implémenter un paradigme de messagerie asynchrone pour éviter le couplage. L'idée est de séparer les groupes de code qui dépendent fortement les uns des autres.

L'exemple que je vais montrer est un outil de visualisation du graphique où les données sont des utilisateurs croisés magnifiquement synchronisés. L'utilisation de WebSockets permettra d'ouvrir une session de communication interactive entre le navigateur de l'utilisateur et un serveur.

L'objectif est de garder l'exemple aussi simple que possible. Les concepts appris ici vous aideront beaucoup à réduire le couplage. De plus, il s'agit d'une approche très utile pour construire un code extensible, flexible et maintenable. À la fin de notre expérience, nous aurons le résultat suivant:

dynamique.js

Backbone.js est un framework pour créer des applications à une seule page en fournissant modèles , vues , contrôleurs , collections , et Événements personnalisés . Sa structure nous aide à séparer l'interface utilisateur de la logique métier. Dans cet article, je ne vous présenterai que sur certains de ces éléments, mais au cas où vous voudrez un guide plus approfondi, je vous suggère de lire l'article «Bascule.js Basics: Modèles, vues, collections et modèles».

Un modèle représente les données et peut être créé en étendant la dorsale.model:

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

Une vue est un moyen d'organiser l'interface utilisateur dans des vues logiques, soutenues par des modèles. Il ne contient pas de balisage HTML, mais juste la logique derrière la présentation des données du modèle à l'utilisateur. Pour créer une vue, vous devez étendre Backbone.View comme suit:

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

Les événements

est un module qui peut être mélangé à n'importe quel objet, donnant à l'objet la possibilité de lier et de déclencher des événements nommés personnalisés. Les deux Modèle et View ont ce module événement qui nous permettent de lier les événements à un modèle ou View . Un modèle commun consiste à créer des vues qui écoutent sur les changements dans les modèles. Cette technique est généralement destinée à permettre à la vue de se rendre automatiquement à se rendre automatiquement lorsque les données sous-jacentes changent.

Pour vous donner un exemple de la façon dont ces éléments fonctionnent ensemble, j'ai créé une démo sur Codepen.

Voir le stylo xxpwmq par SitePoint (@SitePoint) sur Codepen.

chaque fois que nous modifions la entrée , la View modifie notre modèle . Une fois appuyé sur le bouton OK, la vue rend la nouvelle valeur d'ID.

Communication en temps réel entre le serveur et le client

WebSockets est une manière avancée qui permet d'ouvrir une session de communication interactive entre le navigateur de l'utilisateur et un serveur. Avec cette API, les utilisateurs peuvent envoyer des messages à un serveur et recevoir des réponses axées sur les événements sans avoir à interroger le serveur pour une réponse. Ce contrat est un accord qui décrit les règles et le comportement attendu et implique des mesures des deux côtés. Lorsque ces deux pièces sont liées à une API, elle agit comme une colle pour intégrer le serveur et le client.

Dans une analogie du pont, une fois en place, les données et les instructions peuvent traverser le pont. Par exemple, le serveur reçoit une instruction, effectue une action et après avoir traité l'instruction, il renvoie les informations à l'application Web. Un don entre les parties. Avec cette couche d'abstraction (l'API), nous cachons des choses compliquées des services Web, sans avoir besoin de comprendre plus de détails sur la façon dont le serveur a effectué l'action.

socket.io est une bibliothèque JavaScript pour des applications Web en temps réel. Il permet une communication bidirectionnelle entre les clients Web et le serveur. Les deux parties ont une API identique et sont motivées par des événements comme Node.js. Pour ouvrir cette session de communication interactive entre le navigateur et un serveur, nous devons créer un serveur HTTP pour activer la communication en temps réel. Il nous permettra d'émettre et de recevoir des messages. La prise est l'objet qui gère cette communication entre les clients Web et le serveur.

Le code ci-dessous crée ce serveur à l'aide de socket.io avec le framework express.

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

Après avoir créé ce serveur, nous avons la classe IO qui permet de configurer un rappel qui prend une prise en tant que paramètre. Avec cet objet à douille, nous pouvons créer la connexion entre le navigateur de l'utilisateur et un serveur.

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

Dans le navigateur, le client relie le serveur appelant la fonction IO qui renvoie une prise pour une connexion:

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

a dit que, créons une communication simple que les données et les instructions peuvent traverser le pont.

io<span>.on('connection', function(socket) {  
</span>  <span>console.log('a user connected');
</span>  socket<span>.on('disconnect', function(){
</span>    <span>console.log('user disconnected');
</span>  <span>});
</span><span>});</span>

Avec ce code en place, nous pouvons construire la démo suivante:

Voir le stylo Mvrymw par SitePoint (@SitePoint) sur Codepen.

Si vous souhaitez en savoir plus sur Socket.io et Express, je vous suggère les articles suivants:

• Une introduction à la pile moyenne
• Création d'API RESTful avec Express 4
• Créez une application Web de Chatroom à propulsion Node.js: Node, MongoDB et Socket
• Une application de chat utilisant socket.io

Backbone.js avec socket.io

Dans cette section, je vais vous montrer un exemple d'utilisation de socket.io avec dorsalbone.js:

<span>var socket = io("http://pubsub-example-with-backbone.herokuapp.com/");</span>

Et c'est le résultat:

Voir le stylo Qydxwo par SitePoint (@SitePoint) sur Codepen.

pubsub avec squelette.js

Pubsub est un paradigme de messagerie asynchrone. Il donne une fonctionnalité qui nous fournit pour éviter le couplage. Le couplage est lorsqu'un groupe de code dépend fortement les uns des autres, ce qui signifie que si un morceau de code change, alors une mise à jour de tout ce qui utilise ce morceau de code est nécessaire.

Pubsub est un modèle qui a un découplage de synchronisation. Il utilise un système d'événements comme la façon dont une radio fonctionne: une station de radio diffuse ( publie ) et tout le monde peut écouter ( souscrit ). De plus, plutôt que de parler directement à d'autres objets, vous pouvez publier des messages sur une station de radio partagée. Ce système d'événements nous permet de définir des événements qui peuvent transmettre des arguments contenant des valeurs nécessaires à l'abonné. Backbone.js rend cette implémentation du système d'événements assez simple. Il vous suffit de mélanger Backbone. Events dans un objet vide, de cette manière:

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

À ce stade, vous pouvez utiliser le déclencheur standard et sur des méthodes pour publier et vous abonner aux messages:

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

faisant cela, alors vous pouvez maintenant retirer socket.io de notre vue de la squelette.

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

L'objectif est d'éviter les dépendances entre les modules. Chaque module peut avoir une chaîne comme une station de radio tirant les événements (les éditeurs) et tout autre module peut écouter leurs événements souhaitant recevoir des notifications (abonnés).

Le résultat obtenu est le suivant:

Voir le stylo gpgnpz par SitePoint (@SitePoint) sur Codepen.

Exemple de visualisation du graphique

Notre visualisation de graphiques utilise deux modules sur le côté client: un pour dessiner des graphiques dirigés et un autre pour stocker et récupérer des données. Le module de dessin graphique utilise un outil nommé Editor Force. Ce module, que nous appelons ForceView dans le code, nous permet de positionner les nœuds du graphique dans un espace bidimensionnel de manière simple et intuitive. Le module de stockage, que nous appelons DBAAS, utilise Socket.io pour permettre une communication bidirectionnelle en temps réel entre les clients Web et le serveur. Aucun d'eux, ForceView et dbaas , ne connaît aucun des autres. Leurs comportements sont tous isolés.

Les deux modules sont configurés dans un style publier / abonner pour éviter les dépendances. Ils utilisent un système d'événements de la même manière qu'une radio fonctionne, avec une diffusion de la station de radio (publier) et des récepteurs de radio Écoute (sous-être). Plutôt que de parler directement à un autre, chaque module publie leurs messages sur une station de radio partagée « » en tirant des événements sur leur propre chaîne, et l'autre peut également écouter tout autre canal pour les événements.

La seule dépendance ici est sur chaque canal radio qui a une très petite API. Ce qui compte, c'est quel message le canal déclenche et s'assurer que le système réagit correctement aux événements. S'ils déclenchent un événement et donnent la bonne chose, le système fonctionnera dans son ensemble. Jetez un œil aux images ci-dessous pour voir quels événements sont émis dans chacun de ces modules.

Une vue de la colonne vertébrale agit comme un médiateur entre ForceView et DBAA. Cela nous permet de tout décomposer en petits morceaux utilisables, puis de faire fonctionner ces petits morceaux magnifiquement ensemble. De cette façon, le code devient plus simple à comprendre et à maintenir facilement.

Par exemple, si nous voulons le personnaliser un peu pour convenir à un goût particulier, nous pouvons facilement ramasser n'importe quel module et le modifier comme nous le voulons. Nous pourrions remplacer la visualisation du graphique par d'autres bibliothèques de graphiques, par exemple JQPlot, Dracula, Arborjs, Sigmajs, Raphaeljs et ainsi de suite. Ou nous pouvons utiliser n'importe quelle base de données en temps réel comme Firebase, Appbase, Neo4j, TitandB, etc. La bonne nouvelle est que nous devons simplement modifier un seul fichier pour migrer vers une autre bibliothèque. L'image ci-dessous illustre l'interaction entre la vue de la squelette et ces deux modules.

Veuillez noter que nous n'utilisons aucune base de données. Les données sont stockées en mémoire. La façon dont nous avons découplé le code nous permet de nous connecter à tout type de base de données.

exécuter notre exemple de visualisation du graphique localement

L'ensemble du code est disponible sur GitHub. Vous pouvez cloner le référentiel ou télécharger le code.

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

Ensuite, exécutez NPM Installer à partir d'une console pour installer toutes les dépendances.

Ensuite, exécutez Node Server.js pour démarrer l'application.

Dirigez-vous vers http: // localhost: 5000 avec votre navigateur pour voir l'application en cours d'exécution. Si vous voulez juste voir l'application en action, vous pouvez trouver une démo ici.

Conclusions

terminé! Nous venons d'utiliser une fonctionnalité intégrée de l'épine dorsale pour implémenter un modèle PubSub. De plus, nous avons utilisé ce modèle pour représenter et stocker les données de graphiques en temps réel où les données étaient magnifiquement synchronisées entre les utilisateurs. Comme vous l'avez vu, nous avons mélangé quelques concepts intéressants dans un excellent exemple pour voir des pièces de code découplées travailler ensemble.

L'étape suivante consiste maintenant à les personnaliser et à stocker les données dans une base de données plutôt qu'en mémoire. Mais nous allons probablement discuter de la personnalisation dans l'un des prochains articles.

N'hésitez pas à partager vos commentaires dans la section ci-dessous.

Questions fréquemment posées (FAQ) sur la création d'une application Web avec Backbone.js et Socket.io

Quel est le rôle de Backbone.js dans la création d'une application Web?

Backbone.js est une bibliothèque JavaScript légère qui fournit une structure aux applications Web en fournissant des modèles avec des événements de liaison à la valeur clé et des événements personnalisés, des collections Avec une riche API de fonctions énumérables, des vues avec une manipulation déclarative d'événements, et connecte tout cela à votre API existante sur une interface JSON RESTful. Il aide à organiser votre code et facilite la gestion. Il est particulièrement utile lors de la gestion des interfaces utilisateur complexes et de grandes quantités de données.

Comment socket.io améliore-t-il les fonctionnalités d'une application Web?

Socket.io est une bibliothèque JavaScript qui permet une communication en temps réel, bidirectionnel et basé sur des événements entre le navigateur et le serveur. Il se compose de deux parties: une bibliothèque côté client qui s'exécute dans le navigateur et une bibliothèque côté serveur pour node.js. Les deux composants ont une API identique. Socket.io est très utile pour créer des applications en temps réel comme les applications de chat, l'analyse en temps réel, le streaming binaire, la messagerie instantanée et la collaboration de documents.

Comment puis-je gérer les événements dans Backbone.js?

Backbone.js fournit un système de gestion d'événements qui vous permet de lier des événements personnalisés à vos modèles. Vous pouvez utiliser la méthode «ON» pour lier un événement à un modèle et la méthode «Trigger» pour déclencher l'événement. Vous pouvez également utiliser la méthode «OFF» pour supprimer un événement. Ce système d'événements facilite la gestion des modifications de votre application et conserve votre interface utilisateur en synchronisation avec vos données.

Comment puis-je utiliser socket.io avec express.js?

socket.io Peut être facilement intégré à Express.js, un cadre d'application Web populaire pour Node.js. Vous pouvez créer une application Express.js, puis y attacher un serveur socket.io. Vous pouvez ensuite utiliser Socket.io pour gérer la communication en temps réel entre le client et le serveur. Cette combinaison d'Express.js et de socket.io est très puissante et peut être utilisée pour créer des applications Web complexes.

Comment puis-je utiliser Backbone.js avec une API RESTful?

Backbone.js est conçu pour fonctionner avec des API RESTful. Vous pouvez utiliser la méthode «Fetch» ​​pour récupérer les données du serveur et la méthode «Enregistrer» pour enregistrer les données sur le serveur. Vous pouvez également utiliser la méthode «Détroyer» pour supprimer les données du serveur. Backbone.js convertit automatiquement vos données de modèle en format JSON lors de l'envoi au serveur et les convertit en données de modèle lors de la réception du serveur.

Comment puis-je gérer les données binaires avec socket.io?

socket.io prend en charge les données binaires, telles que les blobs et les tampons de tableau. Vous pouvez envoyer des données binaires du client au serveur ou depuis le serveur au client. Socket.io s'occupe automatiquement du codage et du décodage des données binaires.

Comment puis-je gérer les erreurs dans Backbone.js?

gérer les erreurs. Vous pouvez lier un gestionnaire d'erreurs à un modèle à l'aide de la méthode «ON», puis déclencher l'événement d'erreur à l'aide de la méthode «Trigger». Le gestionnaire d'erreur sera appelé avec le modèle et l'erreur comme arguments.

Comment puis-je gérer les déconnexions dans socket.io?

socket.io gère automatiquement les déconnexions et les reconnexions. Lorsqu'un client est déconnecté, un événement «déconnecter» est émis sur le serveur. Lorsqu'un client est reconnecté, un événement «reconnecter» est émis sur le client. Vous pouvez utiliser ces événements pour gérer les déconnexions et les reconnexions dans votre application.

Comment puis-je étendre les modèles et les vues de l'épine dorsale.js?

Backbone.js vous permet d'étendre ses modèles et vues pour créer vos propres modèles et vues personnalisés. Vous pouvez utiliser la méthode «Extende» pour créer une sous-classe d'un modèle ou d'une vue. Vous pouvez ensuite ajouter vos propres méthodes et propriétés à la sous-classe.

Comment puis-je mettre à l'échelle une application Socket.io?

Socket.io prend en charge la mise à l'échelle horizontale à travers l'utilisation de nœuds multiples et l'équilibrage de la charge . Vous pouvez utiliser l'adaptateur «socket.io-redis» pour activer la communication entre plusieurs nœuds socket.io. Vous pouvez également utiliser le module «Sticky-Session» pour vous assurer que toutes les demandes d'un client sont toujours envoyées au même nœud.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!