在ASP.NET Core下使用SignalR技術

時間 2019-11-11

標籤 asp.net asp core 使用 signalr 技術欄目 ASP 简体版

原文原文鏈接

1、前言

　　上次咱們講到過如何在ASP.NET Core中使用WebSocket,沒有閱讀過的朋友請參考 WebSocket in ASP.NET Core 文章。此次的主角是SignalR它爲咱們提供了簡化操做WebSocket的框架。javascript

　　ASP .NET SignalR 是一個ASP.NET 下的類庫，能夠在ASP.NET 的Web項目中實現實時通訊。什麼是實時通訊的Web呢？就是讓客戶端（Web頁面）和服務器端能夠互相通知消息及調用方法，固然這是實時操做的。 WebSockets是HTML5提供的新的API，能夠在Web網頁與服務器端間創建Socket鏈接，當WebSockets可用時（即瀏覽器支持Html5）SignalR使用WebSockets，當不支持時SignalR將使用其它技術來保證達到相同效果。 SignalR固然也提供了很是簡單易用的高階API，使服務器端能夠單個或批量調用客戶端上的JavaScript函數，而且很是方便地進行鏈接管理，例如客戶端鏈接到服務器端，或斷開鏈接，客戶端分組，以及客戶端受權，使用SignalR都很是容易實現。

2、SignalR目前狀況

　　咱們知道在ASP.NET Core 1.0.x 版本中並無包含SignalR，可是SignalR技術計劃集成在ASP.NET Core 1.2版本中，而且它的開發團隊還要使用TypeScript對它的javascript客戶端進行重寫，服務端方面也會貼近ASP.NET Core的開發方式，好比會集成到ASP.NET Core依賴注入框架中。

　　目前的狀況就是在1.0中沒法使用SignalR技術，本文實現的Demo都是在1.1下進行的。

3、集成SignalR

　　固然ASP.NET Core 1.2離正式發佈還有一段時間，目前想集成SignalR都不是現成的方案，咱們要經過手動的方式集成SignalR。css

　　要在ASP.NET Core中使用SignalR，要先引用Microsoft.AspNetCore.SignalR.Server 、 Microsoft.AspNetCore.WebSockets 的NuGet Package包。html

　　固然上面也說過目前沒有ASP.NET Core沒有集成SignalR，因此NUGET上也找不到SignalR的程序包，想添加引用咱們就得去MyGet上去找找。java

　　1.添加NuGet源

　　在程序根目錄新建一個命爲NuGet.Config的文件內容以下：jquery

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <packageSources>
        <clear/>
            <add key="aspnetcidev" value="https://dotnet.myget.org/F/aspnetcore-ci-dev/api/v3/index.json"/>
            <add key="api.nuget.org" value="https://api.nuget.org/v3/index.json"/>
    </packageSources>
</configuration>

　　固然咱們也能夠經過在Visual Studio中設置 NuGet Packages的源，來引用這個程序集。git

　　2.在project.json添加引用

"Microsoft.AspNetCore.SignalR.Server": "0.2.0-*",
"Microsoft.AspNetCore.WebSockets": "1.0.0-*"

　　能夠注意到SignalR的版本是0.2.0的alpha版本，因此後續版本可能變化也會比較大！據說是好重寫的。
github

　　值得注意的是，SignalR目前只能在ASP.NET Core 1.1及以上版本上使用，在這個文章中我使用的.NET Core SDK版本爲 1.0.0-preview2-003131 ，因此引用有問題的同窗能夠嘗試把CoreApp版本改成1.1，全部AspNetCore的程序集也都改變爲1.1的版本。ajax

　　3.添加配置代碼

　　咱們須要在Startup類中的 ConfigureServices方法中添加以下代碼：json

public void ConfigureServices(IServiceCollection services)
{
     services.AddSignalR(options => 
     {
         options.Hubs.EnableDetailedErrors = true;
      });
}

　　在Startup類中的Configure方法中添加以下代碼：api

app.UseWebSockets();
app.UseSignalR();

　　4.添加一個HUB類

　　這裏咱們只實現一個小Demo，一個簡單的聊天室，多我的進入能夠看到各自發送的信息：

public class ChatHub : Hub
{
        public static List<string> ConnectedUsers;

        public void Send(string originatorUser, string message)
        {
            Clients.All.messageReceived(originatorUser, message);
        }

        public void Connect(string newUser)
        {
            if (ConnectedUsers == null)
                ConnectedUsers = new List<string>();

            ConnectedUsers.Add(newUser);
            Clients.Caller.getConnectedUsers(ConnectedUsers);
            Clients.Others.newUserAdded(newUser);
        }
}

　　5.客戶端支持

　　在wwwroot目錄下建立一個名爲chat.html的Html靜態文件，內容以下：

<!DOCTYPE html>
<html>
<head>
    <title>Awesome Chat Application</title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        .userListDiv{ float: right; }
    </style>
    <ul id="messages"></ul>
    <input type="text" id="messageBox" />
    <input type="button" id="sendMessage" value="Send Message!" />
    <div class="userListDiv">
        <ul id="userList"> </ul>
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"></script>
    <script src="signalr/hubs"></script>
    <script src="chat.js"></script>
</body>
</html>

　　同目錄下創建一個chat.js添加要實現功能的腳本：

var userName = prompt("Enter your name: ");
var chat = $.connection.chatHub;
chat.client.messageReceived = function (originatorUser, message) {
    $("#messages").append('<li><strong>' + originatorUser + '</strong>: ' + message);
};
chat.client.getConnectedUsers = function (userList) {
    for (var i = 0; i < userList.length; i++)
        addUser(userList[i]);
};
chat.client.newUserAdded = function (newUser) {
    addUser(newUser);
}
$("#messageBox").focus();
$("#sendMessage").click(function () {
    chat.server.send(userName, $("#messageBox").val());
    $("#messageBox").val("");
    $("#messageBox").focus();
});
$("#messageBox").keyup(function (event) {
    if (event.keyCode == 13)
        $("#sendMessage").click();
});
function addUser(user){
    $("#userList").append('<li>' + user + '</li>');
}
$.connection.hub.logging = true;
$.connection.hub.start().done(function () {
    chat.server.connect(userName);
});