Heim >Web-Frontend >js-Tutorial >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.
vorausSchlüsselkonzepte:
Erste Schritte mit Ember CLI:
ember new chatr
ember install semantic-ui-ember
(semantische UI liefert ein Responsive Layout -Framework). Brocfile.js
: <code class="language-javascript">app.import('bower_components/semantic-ui/dist/semantic.css'); app.import('bower_components/semantic-ui/dist/semantic.js');</code>
<code class="language-bash">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</code>
chat-room
-Komponente in die Vorlage der Route chat
(app/templates/chat.hbs
): <code class="language-handlebars">{{#chat-room users=room.users messages=room.messages topic=room.topic onSendChat="sendChat"}}{{/chat-room}}</code>
serverseitige Entwicklung mit SignalR (mit Visual Studio):
Install-Package Microsoft.AspNet.Signalr
App_Start/Startup.cs
): <code class="language-csharp">public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } }</code>
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:
bower install signalr --save
Brocfile.js
): <code class="language-javascript">app.import('bower_components/semantic-ui/dist/semantic.css'); app.import('bower_components/semantic-ui/dist/semantic.js');</code>
app/index.html
: <code class="language-bash">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</code>
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.
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!