如何实现SignalR提交的消息仅展示在指定页面而非提交页面？

可行，具体操作步骤如下 #

1. 修改SignalR Hub代码（实现定向推送） #

原示例用Clients.All将消息推送给所有客户端，现在需要区分djpage的连接，推荐用分组的方式更直观：

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        // 让djpage页面加入专属分组
        public async Task JoinDjGroup()
        {
            await Groups.AddToGroupAsync(Context.ConnectionId, "DjPageGroup");
        }

        // 发送点歌请求时，只推送给DjPageGroup分组
        public async Task SendSongRequest(string user, string songMessage)
        {
            await Clients.Group("DjPageGroup").SendAsync("ReceiveSongRequest", user, songMessage);
        }
    }
}

2. 配置djpage页面 #

创建djpage.cshtml，页面需连接SignalR并加入DJ分组，同时监听接收点歌请求的事件：

@page
<div class="container">
    <h3>DJ点歌列表</h3>
    <ul id="songRequestsList"></ul>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script>
"use strict";

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

// 监听点歌请求并渲染
connection.on("ReceiveSongRequest", function (user, songMessage) {
    var li = document.createElement("li");
    document.getElementById("songRequestsList").appendChild(li);
    li.textContent = `${user} 点歌：${songMessage}`;
});

connection.start().then(function () {
    // 连接成功后加入DJ专属分组
    connection.invoke("JoinDjGroup").catch(function (err) {
        return console.error(err.toString());
    });
}).catch(function (err) {
    return console.error(err.toString());
});
</script>

3. 修改index页面的JS代码 #

index页面只负责发送点歌请求，不需要监听接收事件（避免自己收到消息）：

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">点歌人</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">歌曲信息</div>
        <div class="col-5"><input type="text" class="w-100" id="songInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendRequestButton" value="提交点歌" />
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script>
"use strict";

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

document.getElementById("sendRequestButton").disabled = true;

connection.start().then(function () {
    document.getElementById("sendRequestButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendRequestButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var songMessage = document.getElementById("songInput").value;
    // 调用Hub中新增的SendSongRequest方法
    connection.invoke("SendSongRequest", user, songMessage).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});
</script>

替代方案（若分组方式不适用） #

1. 基于连接ID定向推送 #

• djpage页面加载时，将自身的连接ID存储到服务器（比如内存缓存、数据库）
• index页面发送请求时，Hub从存储中取出DJ的连接ID，用Clients.Client(djConnectionId)推送消息

2. 客户端筛选 #

所有页面都监听接收事件，但index页面收到消息后不做渲染，仅djpage页面渲染内容。这种方式实现简单，但不够高效（所有客户端都会收到消息，只是本地过滤不显示）

内容的提问来源于stack exchange，提问作者user19998215