MVC项目中使用SignalR实现服务端后台向页面推送实时消息

首先在vs上安装signalR相关的库，然后建立MVC项目工程。

1、在MVC项目中新建文件夹ChatHubs，新建signal集线器类ChatHub.cs

2、添加OWINStartup类

    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }

3、新建signalRClient.js，在js文件中，进行signal页面客户端和服务端的连接、启动：

var testSignalRClient = startSignalRClient().client;

function startSignalRClient() {
    var chat = $.connection.chatHub;
    $.connection.hub.start().done(function () {
        console.log("connection success!");

    });
    return chat;
}

4、后端signal的服务端使用两种方式将数据推送至前端页面

a、页面的Controller中直接推送方法如下：

        public ActionResult clickTest(string text)
        {

                    GlobalHost.ConnectionManager.GetHubContext<ChatHub>().Clients.All.FreshTest(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), text);
            
            return Content("{ \"result\" : \"success\"}");
        }

页面添加接收方法：

注意signalRClient.js文件的引用

    <div>
        <input type="text" maxlength="100" id="txt_output" class="form-control i-text" placeholder="ttt"></input>        
        <button type="button" class="btn btn-warning dropdown-toggle" id="test_button" onclick="testClick()">测试</button>
        <ul id="messageBox"></ul>
        <input type="text" maxlength="100" id="result_input" class="form-control i-text" placeholder="ttt"></input>
    </div>

<script src="~/js/jquery.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src="~/signalr/hubs"></script>  
    <script src="~/js/signalRClient.js"></script>
    <script type="text/javascript">

        $(function () {         
            testSignalRClient.freshTest = function (name, message) {
                //向页面添加消息  
                $("#result_input").val(name + "===" + message);
            }            

        })

        var testClick = function () {
            
            $.ajax({
                type: 'get',
                url: '/WebTest/clickTest',
                data: { text: $('#txt_output').val() },
                dataType: "json",
                success: function (data) {
                    console.log("yes");
                    if (data.result == "success") {
                        $("#txt_output").val('').focus();
                    }
                }
            });

        }

    </script>

b、利用接口文件管理方法

先建立接口文件，将需要向页面推送数据的方法接口定义好：

    public interface ISignalRClientFunction
    {
        void Fresh1(string time, string text);
        void Fresh2(string text);
        void Fresh3(string text);
    }

在Controller中调用如下：

        public ActionResult clickTest(string text)
        {
            GlobalHost.ConnectionManager.GetHubContext<ISignalRClientFunction>("ChatHub").Clients.All.Fresh1(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), text);
                       
            return Content("{ \"result\" : \"success\"}");
        }

页面修改方法名称即可：

            testSignalRClient.fresh1 = function (name, message) {
                //向页面添加消息  
                $("#messageBox").append('<li><strong style="color:green">' + name + '</strong>:' + message + '</li>');
            }