.Net Core SignalR 實時推送信息

以前一直沒用成功過SignalR（.net asp），最近幾天又參考了對應的文檔，最終調成功啦。

開始之前，應該注意：

一定要.Net Core 2.1.0以上的SDK。

VS2017 15.6以上的開發工具。

SignalR.js（該js文件可以通過npm下載。指令：npm install @aspnet/signalr）。

 

 一.通過nuget包下載SignalR相關的第三方庫（Microsoft.AspNetCore.SignalR），然后建好.Net Core web mvc項目，

在該項目中建個ChatHub.cs類，繼承Hub類。

二.在Views目錄下建個SignalR視圖文件夾，在該文件夾內建Index.cshtml頁面。

頁面內容如下：

@page
<style>
    th, td {
        padding: 3px;
    }
</style>
<div class="row">
    <p></p>
    <div class="col-md-12">
        <form action="#">
            <table>
                <tr>
                    <td>Name</td>
                    <td colspan="2">
                        <input type="text" id="user" />
                    </td>
                </tr>
                <tr>
                    <td>Message</td>
                    <td colspan="2">
                        <input type="text" id="message" />
                    </td>
                    <td>
                        <input type="submit" id="send" value="Send" />
                    </td>
                </tr>
            </table>
        </form>
        <p></p>
        <ul id="messages" style="list-style-type:none;"></ul>
    </div>
</div>
<script src="~/lib/signalr.js"></script>
<script src="~/js/chat.js"></script>
<script src="~/js/jquery.min.js"></script>

三.把下好的signalr.js文件放到lib目錄下，然后再js目錄下建個Chat.js文件。

Chat.js文件內容如下：

//最新的用這個：const connection = new signalR.HubConnectionBuilder().withUrl("/chathub").build();
const connection = new signalR.HubConnection('/chathub');

//綁定接收方法
connection.on('RecieveMsg', (timestamp, user, message) => {
    const encodedUser = user;
    const encodedMsg = message;
    const listItem = document.createElement('li');
    listItem.innerHTML = timestamp + ' <b>' + encodedUser + '</b>: ' + encodedMsg;
    document.getElementById('messages').appendChild(listItem);
});

document.getElementById('send').addEventListener('click', event => {
    const msg = document.getElementById('message').value;
    const usr = document.getElementById('user').value;

    //委托后台Hub類中的SendMsg方法發送消息給前台的接收(RecieveMsg)方法。
    connection.invoke('SendMsg', usr, msg).catch(err => showErr(err));
    event.preventDefault();
});

//異常情況顯示的內容。
function showErr(msg) {
    const listItem = document.createElement('li');
    listItem.setAttribute("style", "color: red");
    listItem.innerText = msg.toString();
    document.getElementById('messages').appendChild(listItem);
}

//開啟連接
connection.start().catch(err => showErr(err));
//以上注釋都是個人理解，有誤請指出。

四:建個SignalR控制器。

SignalR控制器內容如下：

using Microsoft.AspNetCore.Mvc;

namespace WebEFCodeFirst.Controllers
{
    public class SignalRController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

 

五.在StartUp類中注冊SignalR相關信息。

最后運行程序，運行后的效果圖：

 

 

項目結構圖：