asp.net core 使用SignalR推送消息--【簡單在線聊天功能】 以及 【推送消息給指定用戶】

asp.net core 使用SignalR推送消息，本篇文章實現兩個功能：1、簡單在線聊天；2、推送消息給指定用戶。

一、使用SignalR前準備工作：

1、使用Visual Studio Code 創建mvc項目

2、mvc項目添加Microsoft.AspNetCore.SignalR引用

3、下載signalr.js，放在wwwroot文件下任意位置

4、自定義類繼承Hub，如下：

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;
using web.Model;

namespace web.Core
{
    public class MyHub : Hub
    { 
        //發送消息--發送給所有連接的客戶端
        public Task SendMessage(string msg)
        {
            return Clients.All.SendAsync("ReceiveMessage", msg);
        }

        //發送消息--發送給指定用戶
        public Task SendPrivateMessage(string userId, string message)
        {
            return Clients.User(userId).SendAsync("ReceiveMessage", message);
        }
    }
}

4、mvc項目配置 SignalR 服務、設置 SignalR 路由

在Startup.cs中的ConfigureServices方法添加代碼

services.AddSignalR();

在Startup.cs中的Configure方法添加SignalR路由配置代碼，路由指向自定義類MyHub，如下：

app.UseSignalR(routes=>{
   routes.MapHub<MyHub>("/MyHub");
});

5、客戶端js中創建連接、啓動連接代碼，如下：

//創建連接對象connection
const signalr_connection = new signalR.HubConnectionBuilder()
            .withUrl("/MyHub")
            .configureLogging(signalR.LogLevel.Information)
            .build();

//啓動connection
signalr_connection.start()
                    .then(function(){
                        console.log("連接成功");
                    }).catch(function(ex){
                        console.log("連接失敗"+ex);
                        //SignalR JavaScript 客戶端不會自動重新連接，必須編寫代碼將手動重新連接你的客戶端
                        setTimeout(() => start(), 5000);
                    });

async function start() {
    try {
        await signalr_connection.start();
        console.log("connected");
    } catch (err) {
        console.log(err);
        setTimeout(() => start(), 5000);
    }
};

這裏準備工作差不多了。

二、簡單在線聊天功能：

1、在HomeController 創建一個Action，如下：

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

html代碼如下：

<ul class="form-group" id="messagesListUl" style="margin-bottom:20px"></ul>

<form>
    <div class="form-group">
      <label for="username">姓名:</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="form-group">
      <label for="msgcontent">內容:</label>
      <textarea rows="5" cols="20" id="msgcontent" name="msgcontent" class="form-control"></textarea>
    </div>
    <input type="button" onclick="btnSendMsg()" value="發送">
</form>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/signalr/dist/signalr.js"></script>
<script type="text/javascript">
    //創建連接對象connection
    const signalr_connection = new signalR.HubConnectionBuilder()
                .withUrl("/MyHub")
                .configureLogging(signalR.LogLevel.Information)
                .build();

    //啓動connection
    signalr_connection.start()
                        .then(function(){
                            console.log("連接成功");
                        }).catch(function(ex){
                            console.log("連接失敗"+ex);
                            //SignalR JavaScript 客戶端不會自動重新連接，必須編寫代碼將手動重新連接你的客戶端
                            setTimeout(() => start(), 5000);
                        });

    async function start() {
        try {
            await signalr_connection.start();
            console.log("connected");
        } catch (err) {
            console.log(err);
            setTimeout(() => start(), 5000);
        }
    };

    signalr_connection.onclose(async () => {
        start();
    });

    
    //綁定事件("ReceiveMessage"和服務器端的SendMessage方法中的第一個參數一致)
    signalr_connection.on("ReceiveMessage", function(data) {
        var msgObj = JSON.parse(data);//json串轉對象
        const li = document.createElement("li");
        li.textContent = msgObj.name + " : " + msgObj.message;
        document.getElementById("messagesListUl").appendChild(li);
    });

    //發送消息
    function btnSendMsg(){
        var username = $.trim($("#username").val());
        var msgcontent = $.trim($("#msgcontent").val());
        var msgObj={};
        msgObj.name=username;
        msgObj.message=msgcontent;
        var jsonstr=JSON.stringify(msgObj);//對象轉json串
        console.log(jsonstr);
        signalr_connection.invoke("SendMessage", jsonstr).catch(err => console.error("發送失敗："+err.toString()));
    }
</script>

說明：

a、signalr_connection.on() 綁定事件時，第一個參數對應MyHub類中的SendMessage方法中“Clients.All.SendAsync("ReceiveMessage", msg)”的第一個參數。

b、signalr_connection.invoke()發送消息時，第一個參數對應MyHub類中的SendMessage方法名。

效果如下：