ASP.Net MVC SignalR的應用

ASP.Net MVC SignalR的應用

最近作的一個MVC項目有個模塊是要使用即時通訊實現彈幕效果。既要考慮通訊的實時性也要考慮服務器性能和資源消耗，所幸項目對瀏覽器的版本沒有要求。因此我最早想到用WebSocket來實現，在查詢資料時， 看到 SignalR 這個技術，也就是本專題所討論的對象。在拜讀了 史上最全面的SignalR系列教程-認識SignalR ，算是對 SignalR有一個簡單的認識，SignalR 是 .NET平臺爲咱們提供的一種簡潔高效智能的實時信息交互技術，SignalR 比 WebSocket 還要簡單，這簡直是個人福音。因此我直接一個Demo開始嘗試。

SignalR

關於SignalR的介紹這邊就很少贅述，能夠去看我上面說的這篇博文史上最全面的SignalR系列教程-認識SignalR 或者直接看Microsoft文檔 Introduction to SignalR，SignalR可用於任何即時性的功能；

Demo ：使用SignalR和MVC 5實現實時聊天

經過第一部分的介紹，相信你們對SignalR有初步的認識，接下來直接上手一個Demo來看看(個人開發環境：VS2019 + .net 4.6.2 + MVC 5)。步驟參考微軟教程 Tutorial: Real-time chat with SignalR 2 and MVC 5。

1. 使用Visual Studio 2019 建立一個MVC工程-SignalRMvcChat

建立ASP.NET Web應用程序

配置項目

2. 選擇MVC，而後身份驗證上，選擇「無身份驗證」，而後單擊「建立」。

3. 在項目上右擊-添加新建項，選擇 Installed > Visual C# > Web > SignalR and then 選擇 SignalR Hub Class (v2).

4. 將類命名爲ChatHub並將其添加到項目中。 此步驟將建立ChatHub.cs集線器類文件，並將一組支持SignalR的腳本文件和程序集引用添加到項目:

5. 用如下代碼替換新建的ChatHub.cs類文件中的代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRMvcChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message) {
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

6. 在項目上，右鍵選擇 添加>類，命名爲Startup.cs，並用如下代碼替換新建的Startup.cs類文件中的代碼：

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRMvcChat.Startup))]
namespace SignalRMvcChat
{
    public class Startup {
        public void Configuration(IAppBuilder app) {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

注意： SignalR 框架使用Owin組件，每個使用的OWin組件的Web框架都須要一個Startup入口類，用來聲明OWin組件：
1.項目會自動掃描程序集根下的名爲Startup的類，來做爲入口類；
2.經過添加 [assembly: OwinStartup(typeof(SignalRChat.Startup))] 標籤標記入口類；
3.若是你的啓動類不在當前命名空間下，須要在Web.config中添加節點： ，來指定啓動類；

7. 在Home控制器中添加一個方法，來返回下面聊天步驟所使用的頁面：在 HomeController.cs 中添加如下方法：

public ActionResult Chat() {
    return View();
}

8. 在Views/Home中添加Chat視圖，並用如下代碼替換到新建的視圖文件中：（注意：視圖中所引用的signalR腳本可能跟你實際安裝的版本不同，這裏須要你根據實際安裝的版本進行修改）

@{
    ViewBag.Title = "Chat";
}
<h2>Chat</h2> <div class="container"> <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" /> <ul id="discussion"></ul> </div> @section scripts { <!--jQuery庫是必需的,默認狀況下在_Layout.cshtml引用. --> <!--引用SignalR庫. --> <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script> <!--引用自動生成的SignalR 集線器(Hub)腳本.在運行的時候在瀏覽器的Source下可看到. --> <script src="~/signalr/hubs"></script> <script> $(function () { // 引用自動生成的集線器代理 必須用小寫字母開頭. var chat = $.connection.chatHub; // 定義服務器端調用的客戶端addNewMessageToPage來處理接收到的消息. chat.client.addNewMessageToPage = function (name, message) { // 將消息添加到ul上. $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; // 獲取用戶名. $('#displayname').val(prompt('Enter your name:', '')); // 設置焦點到輸入框. $('#message').focus(); // 開始鏈接服務器 done函數代表創建鏈接成功後爲發送按鈕註冊了一個click事件. $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // 調用服務器端集線器的Send方法 也要小寫開頭. chat.server.send($('#displayname').val(), $('#message').val()); // 清空輸入框信息並獲取焦點. $('#message').val('').focus(); }); }); }); // 這個可選功能將html-encodes消息顯示在頁面上. function htmlEncode(value) { var encodedValue = $('<div />').text(value).html(); return encodedValue; } </script> } 

運行一下看看效果：

• 在工具欄中，啓用「腳本調試」，而後點擊「運行」按鈕以在瀏覽器上調試（注意啓動項目要設成當前的這個MVC項目）。

-進入聊天頁面 ~/Home/Chat

1

可能出現的問題：

The following errors occurred while attempting to load the app.

The following errors occurred while attempting to load the app.
- No assembly found containing an OwinStartupAttribute.
- No assembly found containing a Startup or [AssemblyName].Startup class.
To disable OWIN startup discovery, add the appSetting owin:AutomaticAppStartup with a value of "false" in your web.config.
To specify the OWIN startup Assembly, Class, or Method, add the appSetting owin:AppStartup with the fully qualified startup class or configuration method name in your web.config.

以上的問題出如今我第一次運行的時候，看着錯誤提示是沒有找到 OwinStartupAttribute ，而後跟着提示在web.config的appSetting中添加以下的節點：

<appSettings>
    <add key="owin:AutomaticAppStartup" value="false" />
    ...
</appSettings>

運行竟然真的就不報錯，可是問題更大條了。在聊天頁面並無生成SignalR代理的hubs的腳本文件，出現了Uncaught TypeError: Cannot read property 'client' of undefined錯誤。

對比了微軟官方使用 SignalR 步驟，才認識到 SignalR 框架使用Owin組件，必定要指定一個Startup入口類，我是少了以上步驟6，在添加了Startup.cs類以後，問題解決了（添加的Startup.cs類的命名空間爲應用程序根目錄的名稱，去掉以前web.config中加入的錯誤代碼）。對於SignalR代理對象異常，你們還能夠看下這篇文章， SignalR代理對象異常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的結論，只要注意自動生成的集線器腳本中的代理名稱和服務端方法都是小寫字母開頭，調用的時候使用小寫就能夠避免這個問題。

查看源碼

以上就是今天給你們的分享所有內容了，祝你們元旦快樂！

參考文章

• 史上最全面的SignalR系列教程-認識SignalR
• Tutorial: Real-time chat with SignalR 2 and MVC 5
• SignalR代理對象異常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的結論