Erstellen einer Chat -Anwendung mit SignalR

Dieses Tutorial zeigt, dass das Erstellen einer einfachen Chat-Anwendung mit SignalR, einer Open-Source-Bibliothek für ASP.NET-Entwickler, erstellt wird. SignalR bietet Echtzeit-Webfunktionen, ähnlich wie Socket.io für node.js. Während Socket.io mit JavaScript -Frameworks wie Ember bevorzugt werden kann, bietet SignalR umfangreiche Dokumentation und nutzt die Vorteile des ASP.NET -Ökosystems. Dieses Tutorial setzt Vertrautheit mit ember.js.

voraus

Schlüsselkonzepte:

• SignalR: Eine leistungsstarke Bibliothek zum Hinzufügen von Echtzeitfunktionen zu ASP.NET-Anwendungen. Es vereinfacht den Prozess des Erstellens interaktiver Webanwendungen.
• ember.js Komponenten: wiederverwendbare UI -Elemente, die die Funktionalität zusammenschließen und die Codeorganisation verbessern. In diesem Tutorial werden Komponenten für Chatraum, Benutzerliste, Chatbereich und einzelne Benutzerelemente verwendet.
• Ember -Controller und -modelle: Anwendungslogik und Datenbindung verwalten und einen strukturierten Ansatz zur Behandlung von Chat -Daten bereitstellen.
• SignalR Hubs: serverseitige Komponenten, die die Kommunikation zwischen dem Server und den Clients erleichtern. In diesem Tutorial verwaltet ein "Lobby" -Izentum, um Benutzerverbindungen und Nachrichten zu verwalten.
• cors (Cross-Origin-Ressourcenfreigabe): Bekämpfung potenzieller Probleme, wenn der Server und der Client in verschiedenen Domänen wohnen. Die richtige CORS -Konfiguration ist für eine erfolgreiche Kommunikation von entscheidender Bedeutung.

Erste Schritte mit Ember CLI:

1. Erstellen Sie eine neue Ember -Anwendung: ember new chatr
2. Abhängigkeiten installieren: ember install semantic-ui-ember (semantische UI liefert ein Responsive Layout -Framework).
3. semantische UI importieren: Fügen Sie die folgenden Zeilen zu Brocfile.js:
hinzu

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

4. Generieren Sie Glühstrouten und Komponenten:

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. integrieren Sie die chat-room -Komponente in die Vorlage der Route chat (app/templates/chat.hbs):

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

serverseitige Entwicklung mit SignalR (mit Visual Studio):

1. Erstellen Sie ein neues leeres Webantragsprojekt in Visual Studio.
2. Installieren Sie das SignalR -Paket: Install-Package Microsoft.AspNet.Signalr
3. Erstellen Sie die OWIN -Startklasse (App_Start/Startup.cs):

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

4. Erstellen Sie den Lobby -Hub (Lobby.cs): Dieser Hub übernimmt Benutzerverbindungen, Nachrichtenübertragung und Benutzerverwaltung. (Implementierungsdetails für die Kürze weggelassen, aber die ursprüngliche Antwort liefert den Code.)

clientseitige Integration in Ember und SignalR:

1. SignalR mit Bower installieren: bower install signalr --save
2. importieren SignalR in Ihre Ember -Anwendung (in Brocfile.js):

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

3. Fügen Sie das Skript von SignalR Hubs in app/index.html:
ein

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. Erstellen Sie einen Ember -Initialisierer, um die SIGNRR -Verbindung zu verwalten (app/initializers/signalr.js): (Implementierungsdetails für die Kürze weggelassen, aber die ursprüngliche Antwort liefert den Code.) Dieser Initialisierer verwendet eine SignalRConnection -Unterwaltklasse, um die SignalR -Interaktion zu vereinfachen.

5. CORS handhaben: Installieren Sie das Nuget-Paket Microsoft.Owin.Cors und konfigurieren Sie CORS Middleware in Ihrer Startup.cs -Datei, um Cross-Domain-Anforderungen von Ihrer Ember-Anwendung zu ermöglichen. (Implementierungsdetails sind in der ursprünglichen Antwort.)

Schlussfolgerung:

Diese überarbeitete Reaktion bietet einen prägnanteren und strukturierten Überblick über den Prozess, der die Schlüsselkomponenten und -schritte hervorhebt, die beim Erstellen einer Echtzeit-Chat-Anwendung mithilfe von SignalR und Ember verbunden sind. Die ursprüngliche Antwort enthält die detaillierten Codeausschnitte für jede Komponente, die hier für die Kürze weggelassen werden, aber im ursprünglichen Ausgang leicht verfügbar sind. Denken Sie daran, die ursprüngliche Antwort für die vollständige Code -Implementierung zu konsultieren.

Das obige ist der detaillierte Inhalt vonErstellen einer Chat -Anwendung mit SignalR. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!