使用Signalr構建聊天應用程序

>本教程演示了使用SignalR構建一個簡單的聊天應用程序，該應用程序是ASP.NET開發人員的開源庫。 SignalR提供了實時Web功能，類似於Node.js的socket.io。 雖然socket.io可能是Ember等JavaScript框架的首選，但Signalr提供了廣泛的文檔並利用ASP.NET生態系統的好處。 本教程假設熟悉ember.js。

密鑰概念：

• signalr：一個強大的庫，用於在ASP.NET應用程序中添加實時功能。 它簡化了構建Interactive Web應用程序的過程。
• ember.js組件：可重複使用的UI元素，這些元素封裝功能並改善代碼組織。 本教程利用聊天室，用戶列表，聊天區域和各個用戶項目的組件。
• >ember控制器和模型：分別管理應用程序邏輯和數據綁定，提供了一種結構化方法來處理聊天數據。 >
• > Signalr Hubs：服務器端組件，可促進服務器與客戶端之間的通信。 本教程使用“大廳”集線器來管理用戶連接和消息。 >
CORS（交叉原始資源共享）：
• 解決服務器和客戶端駐留在不同域上時的潛在問題。 適當的CORS配置對於成功的通信至關重要。 > Ember CLI開始：

>

創建一個新的Ember應用程序：

1. 安裝依賴項：ember new chatr（語義UI提供了一個響應式佈局框架）。
2. 導入語義UI：將以下行添加到ember install semantic-ui-ember>：
>
3. 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>

組件集成到

路由的模板（
5. ）中：chat-room> chat app/templates/chat.hbs 使用SignalR（使用Visual Studio）：

<code class="language-handlebars">{{#chat-room
  users=room.users
  messages=room.messages
  topic=room.topic
  onSendChat="sendChat"}}{{/chat-room}}</code>

服務器端開發：>

>在Visual Studio中創建一個新的空Web應用程序。

1. 安裝SignalR軟件包：
2. Install-Package Microsoft.AspNet.Signalr創建OWIN啟動類（
）：
3. > App_Start/Startup.cs

<code class="language-csharp">public class Startup {
    public void Configuration(IAppBuilder app) {
        app.MapSignalR();
    }
}</code>

創建大廳集線器（

）：此中心處理用戶連接，消息廣播和用戶管理。 （為簡潔而省略了實施詳細信息，但原始響應提供了代碼。）>
4. 與Ember和Signalr：Lobby.cs

1. >使用Bower安裝Signalr： bower install signalr --save
>導入信號將您的ember應用程序（
2. >）：> 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>

在

>中包含signalr hubs腳本：
3. > 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>

>創建一個Ember Initializer來管理SignalR連接（
4. ）：（為簡潔而省略了實現詳細信息，但原始響應提供了代碼。）此初始化程序使用實用程序類來簡化Signalr交互。 >

   app/initializers/signalr.js SignalRConnection處理CORS：安裝

   nuget軟件包，並在文件中配置CORS中間件，以允許您的Ember應用程序中的跨域請求。 （實施詳細信息在原始響應中。）
>

5. Microsoft.Owin.CorsStartup.cs結論：

此修訂的響應提供了該過程的更簡潔，更結構化的概述，突出了使用SignalR和Ember構建實時聊天應用程序所涉及的關鍵組件和步驟。 原始響應包含每個組件的詳細代碼片段，此處省略了此處的簡潔性，但在原始輸出中很容易獲得。 請記住要查閱原始響應以完成完整的代碼實施。

>

以上是使用Signalr構建聊天應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！