.Net使用SignalR实现实时推送功能

1.创建一个项目,我这里创建的的是mvc的项目(其他的也可以),创建完成后使用Nuget安装SignalR包,安装完成后,Scripts文件夹下会出现 jquery.signalR-x.x.x.js和jquery.signalR-x.x.x.min.js文件.

2.右键项目添加一个SignalR Hub Class(v2) 我命齐名为ServerHub 如下图

创建完成后将一下代码粘贴到ServerHub中

        /// <summary>
        /// 供客户端调用的服务器端代码
        /// </summary>
        /// <param name="message"></param>
        public void Send(string message)
        {
            Clients.All.sendMessage(message);
        }    

3.创建一个Startup类，如果已有就不需要重复添加了。按照如下代码更新Startup类(如果是MVC项目也可以添加到RouteConfig中)。

[assembly: OwinStartupAttribute(typeof(SignalDemo.RouteConfig))]
namespace SignalDemo
{
　　public class Startup
    {
        #region MyRegion
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
            //ConfigureAuth(app);
        }
        #endregion
    }
}

4.前端页面(因为我这里创建的是mvc项目所以一下为cshtml代码)

@{
    ViewBag.Title = "Chat";
    Layout = null;
}

<h2>Chat</h2>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion"></ul>
</div>


    <!--引用SignalR库. -->
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 -->
    <script src="~/signalr/hubs"></script>
    <script>
        $(function () {
            // 引用自动生成的集线器代理
            var chat = $.connection.serverHub;
            // 定义服务器端调用的客户端sendMessage来显示新消息

            chat.client.sendMessage = function (message) {
                // 向页面添加消息
                $(‘#discussion‘).append(‘<li>‘ + htmlEncode(message) + ‘</li>‘);
            };
            // 设置焦点到输入框
            $(‘#message‘).focus();
            // 开始连接服务器
            $.connection.hub.start().done(function () {
                $(‘#sendmessage‘).click(function () {
                    // 调用服务器端集线器的Send方法
                    chat.server.send($(‘#message‘).val());
                    // 清空输入框信息并获取焦点
                    $(‘#message‘).val(‘‘).focus();
                });
            });
        });

        // 为显示的消息进行Html编码
        function htmlEncode(value) {
            var encodedValue = $(‘<div />‘).text(value).html();
            return encodedValue;
        }
    </script>

 下面是演示效果