如何通过推送通知将WebAPI返回消息更新到浏览器Status页面

要实现服务器实时把状态推送到/Home/Status页面，你需要用到实时通信技术——因为普通的HTTP请求是客户端主动发起，服务器没法主动给已打开的页面发消息。针对ASP.NET MVC场景，最简便的方案是用ASP.NET SignalR，这是微软官方的实时通信库，能轻松实现服务器和客户端的双向通信。下面是具体的实现步骤：

步骤1：安装SignalR NuGet包 #

在你的项目中，通过NuGet包管理器安装Microsoft.AspNet.SignalR（注意根据你的.NET版本选择匹配的包版本）。

步骤2：创建SignalR Hub类 #

Hub是SignalR的核心组件，负责处理服务器和客户端之间的通信。在项目中添加一个新类：

using Microsoft.AspNet.SignalR;

public class StatusHub : Hub
{
    // 定义服务器发送状态的方法
    public void BroadcastStatus(string status)
    {
        // 将状态推送给所有连接到该Hub的客户端
        Clients.All.receiveStatusUpdate(status);
    }
}

步骤3：配置SignalR路由 #

如果你的项目还没有Startup类，需要添加一个用来配置SignalR路由：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(PamPam1.Startup))]
namespace PamPam1
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 启用SignalR路由
            app.MapSignalR();
        }
    }
}

步骤4：修改HomeController的POST接口 #

在你的POST方法中，调用SignalR Hub来推送状态给所有客户端：

using Microsoft.AspNet.SignalR;

public class HomeController : Controller
{
    public ActionResult Status() { return View(); }

    [HttpPost]
    public ActionResult Status(string status)
    {
        // 获取StatusHub的上下文，发送状态更新
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatusHub>();
        hubContext.Clients.All.receiveStatusUpdate(status);
        
        return Json(status, JsonRequestBehavior.AllowGet);
    }

    public class msg {
        public string message { get; set; }
    }
}

步骤5：更新Status视图页面 #

修改视图，添加SignalR的JS引用，连接Hub并接收服务器推送的消息：

@model PamPam1.Controllers.HomeController.msg
@{ ViewBag.Title = "Status"; }
<html>
<head>
    <!-- 先引用jQuery（SignalR依赖jQuery） -->
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <!-- 引用SignalR的JS库（版本根据你安装的包调整） -->
    <script src="~/Scripts/jquery.signalR-2.4.3.min.js"></script>
    <!-- 引用SignalR自动生成的Hub代理 -->
    <script src="~/signalr/hubs"></script>
</head>
<body>
    <!-- 显示状态的元素，初始值用Model或默认提示 -->
    <h2 id="status-display">@(Model != null ? Model.message : "等待状态更新...")</h2>

    <script>
        $(function () {
            // 连接到StatusHub
            var statusHub = $.connection.statusHub;

            // 定义客户端接收状态更新的方法（和Hub中调用的方法名一致）
            statusHub.client.receiveStatusUpdate = function (newStatus) {
                // 更新页面上的状态显示
                $('#status-display').text(newStatus);
            };

            // 启动SignalR连接
            $.connection.hub.start()
                .done(function () {
                    console.log("已成功连接到状态推送服务");
                })
                .fail(function (error) {
                    console.error("连接失败: " + error);
                });
        });
    </script>
</body>
</html>

测试方法 #

1. 启动你的ASP.NET MVC项目，打开http://localhost:2788/Home/Status页面；
2. 用Postman发送POST请求到http://localhost:2788/Home/Status，在请求体中通过form-data或x-www-form-urlencoded传入status参数（比如值为"新的状态消息"）；
3. 发送请求后，你会看到打开的Status页面实时更新显示这个新状态。

备选方案：Server-Sent Events（SSE） #

如果只需要服务器单向推送消息，也可以用SSE（HTML5原生特性），但SignalR的兼容性更好（支持旧浏览器），并且支持双向通信，所以更推荐SignalR方案。

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