Construire une application de chat avec Signalr

Ce didacticiel démontre la création d'une application de chat simple à l'aide de Signalr, une bibliothèque open source pour les développeurs ASP.NET. SignalR fournit des fonctionnalités Web en temps réel, similaires à socket.io pour node.js. Alors que Socket.io peut être préféré avec des cadres JavaScript comme Ember, SignalR offre une documentation étendue et tire parti des avantages de l'écosystème ASP.NET. Ce tutoriel assume la familiarité avec Ember.js.

Concepts clés:

• Signalr: Une bibliothèque puissante pour ajouter des capacités en temps réel aux applications ASP.NET. Il simplifie le processus de création d'applications Web interactives.
• Composants Ember.js: Éléments d'interface utilisateur réutilisables qui encapsulent les fonctionnalités et améliorent l'organisation du code. Ce tutoriel utilise des composants de la salle de chat, de la liste d'utilisateurs, de la zone de chat et des éléments utilisateur individuels.
• Contrôleurs et modèles Ember: Gérer la logique d'application et la liaison des données, respectivement, fournissant une approche structurée pour gérer les données de chat.
• Signalr Hubs: composants côté serveur qui facilitent la communication entre le serveur et les clients. Ce tutoriel utilise un centre "lobby" pour gérer les connexions et les messages des utilisateurs.
• CORS (partage de ressources croisées): résoudre les problèmes potentiels lorsque le serveur et le client résident sur différents domaines. La configuration des COR appropriée est cruciale pour une communication réussie.

Début avec CLI Ember:

1. Créez une nouvelle application Ember: ember new chatr
2. Installer les dépendances: ember install semantic-ui-ember (L'UI sémantique fournit un cadre de mise en page réactif).
3. Importer une interface utilisateur sémantique: ajoutez les lignes suivantes à Brocfile.js:

app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');

4. Générer des itinéraires et des composants en bilan:

ember g route chat
ember g component chat-room
ember g component chat-userlist
ember g component chat-area
ember g component chat-useritem
ember g controller chat
ember g model chat-room
ember g model chat-user
ember g model chat-message

5. Intégrez le composant chat-room dans le modèle chat Route de l'itinéraire (app/templates/chat.hbs):

{{#chat-room
  users=room.users
  messages=room.messages
  topic=room.topic
  onSendChat="sendChat"}}{{/chat-room}}

Développement côté serveur avec SignalR (en utilisant Visual Studio):

1. Créer un nouveau projet d'application Web vide dans Visual Studio.
2. Installez le package Signalr: Install-Package Microsoft.AspNet.Signalr
3. Créez la classe de démarrage OWIN (App_Start/Startup.cs):

public class Startup {
    public void Configuration(IAppBuilder app) {
        app.MapSignalR();
    }
}

4. Créez le Hobby Hub (Lobby.cs): Ce hub gère les connexions utilisateur, la diffusion de messages et la gestion des utilisateurs. (Détails d'implémentation omis pour la concision, mais la réponse originale fournit le code.)

Intégration côté client avec Ember et Signalr:

1. Installez le signal en utilisant Bower: bower install signalr --save
2. Importez Signalr dans votre application Ember (dans Brocfile.js):

app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');

3. Inclure le script SignalR Hubs dans app/index.html:

ember g route chat
ember g component chat-room
ember g component chat-userlist
ember g component chat-area
ember g component chat-useritem
ember g controller chat
ember g model chat-room
ember g model chat-user
ember g model chat-message

4. Créez un initialiseur Ember pour gérer la connexion SignalR (app/initializers/signalr.js): (Détails d'implémentation omis pour Brevity, mais la réponse d'origine fournit le code.) Cet initialiseur utilise une classe d'utilité SignalRConnection pour simplifier l'interaction Signalr.

5. Gire CORS: Installez le package Microsoft.Owin.Cors NUGET et configurez les middleware COR dans votre fichier Startup.cs pour permettre les demandes de domaine croisé de votre application Ember. (Les détails de l'implémentation sont dans la réponse originale.)

Conclusion:

Cette réponse révisée fournit un aperçu plus concis et structuré du processus, mettant en évidence les composants clés et les étapes impliqués dans la création d'une application de chat en temps réel à l'aide de SignalR et Ember. La réponse d'origine contient les extraits de code détaillés pour chaque composant, qui sont omis ici pour brièveté mais sont facilement disponibles dans la sortie d'origine. N'oubliez pas de consulter la réponse originale de l'implémentation complète du code.

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!