Asp.Net Core + SignalR 實現實時通訊

1、搭建項目

一、建立一個ASP.NET Core MVC 項目

 

二、nuget 下載和安裝 MicroSoft.AspNetCore.SignalR

vs提示版本衝突

這時咱們選擇低版本便可

2、SignalR配置

一、在model中建立一個類MyHub 代碼以下

 public class MyHub:Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user+"["+DateTime.Now.ToLongTimeString()+"]", message);
        }
        public async Task SendMessageToUser(string user, string message)
        {
            await Clients.Client(Context.ConnectionId).SendAsync("ReceiveMessage", user + ":" + DateTime.Now.ToLongTimeString()+"]", message);
        }
    }

View Code

 

二、在Startup中注入SignalR並在Configure中配置路由

 

 三、右鍵項目名=>添加=>添加客戶端庫

 

 

 

•  對於「提供程序」選擇unpkg。

• 對於「庫」輸入 @aspnet/signalr@1.0.4  （@1.0.4 是根據 nuget SignalR的本本定的）。

• 選擇「選擇特定文件」，展開「dist/browser」文件夾，而後選擇「signalr.js」和「signalr.min.js」。

• 將「目標位置」設置爲 wwwroot/lib/signalr/，而後選擇「安裝」。

 

 

配置完畢。

3、編碼實現

一、修改Views/Home中的Index.cshtml以下

<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            User..........<input type="text" id="userInput" />
            <br />
            Message...<input type="text" id="messageInput" />
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

View Code

二、在js文件見建立一個js文件 chat.js

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

View Code

三、Ctrl+F5 運行出兩個網頁