SignalR前后端通信

SignalR功能介绍

SignalR是.Net框架中提供的前后端实时通信框架，能够有效的替换webSocket

SignalR Demo例子

1、创建ASP.NET MVC5项目

2、Nuget安装如下的包

 

3、创建Hub

在项目根目录创建要给Hubs目录，右击目录添加如下的文件类型

代码如下：

    public class chatHub : Hub
    {
        //前端调用的方法名
        public void send(string name, string message)
        {
            //获取客户端的标识
            string connectionId = Context.ConnectionId;

            //后端通过SentMsgToClient回调方法给前端发送数据
            Clients.All.SendMsgToClient(name, message);
        }

        //客户接入后
        public override Task OnConnected()
        {
            //获取客户端的标识,可以保存起来后边方便
            string clientID = Context.ConnectionId;

            return base.OnConnected();
        }
        //客户退出后
        public override Task OnDisconnected(bool stopCalled)
        {
            string clientID = Context.ConnectionId;


            return base.OnDisconnected(stopCalled);
        }
        //客户重新接入后
        public override Task OnReconnected()
        {
            string clientID = Context.ConnectionId;

            return base.OnReconnected();
        }
    }

    //服务器直接客户端发送消息
    public class ServerToClient
    {
        //获取到Hub上下文对象
        static readonly IHubContext _myHubContext = GlobalHost.ConnectionManager.GetHubContext<chatHub>();
        
        //给所有用户发送
        public static void SendAll(string message)
        {
            //调用回调方法给客户端发送
            _myHubContext.Clients.All.SendMsgToClient("服务器", message);
        }
        //给特定用户发送
        public static void SendTo(string clientID, string message)
        {
            //调用回调方法给客户端发送
            _myHubContext.Clients.Client(clientID).SendMsgToClient("服务器", message);
        }
    }

　　

4、创建Startup

在根目录创建如下的文件类型

代码如下：

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

5、聊天例子

创建chat控制器，在Action对应试图中添加如下的代码

@{
    ViewBag.Title = "Index";
}
<script type="text/javascript" src=@Url.Content("~/Content/scripts/jquery-1.12.4.min.js")></script>
<script src="@Url.Content("~/content/signalR/jquery.signalR-2.4.1.js")"></script>
<script src="/signalr/hubs"></script>

<script type="text/javascript">
    //客户端方法代理
    var chat = $.connection.chatHub;

    //后端的回调方法
    chat.client.SendMsgToClient = function (name, message) {
        $('#msgUl').append('<li><strong>' + name
            + '</strong>: ' + message + '</li>');
    };

    //给后台发送消息
    function sendMsg() {
        var userName = $("#userName").val();
        if (!userName) {
            $(".alert").show();
            return;
        }
        var msg = $('#messageBox').val();
        if (msg) {
            //调用代理的send方法
            chat.server.send(userName, msg);
            $('#messageBox').val('').focus();
        }

    }
    //启动后，绑定按钮事件
    $.connection.hub.start().done(
        function () {
            //设置按钮事件
            $("#btnSent").click(
                sendMsg
            );
            $("#userName").focus(
                function () {
                    $(".alert").hide();
                }
            );
        }
    );
    $(document).ready(
        function () {
            //设置高度
            var msgListH = window.innerHeight - 150;
            $(".messageList").height(msgListH);
            $('#messageBox').keypress(
                function (e) {
                    var key = e.keyCode;
                    //回车后直接发送消息
                    if (key == 13) {
                        sendMsg();
                    }
                }
            );
        }
    );
</script>
<h2>SignalR Chat Room</h2>
<div style="width: 99%;margin: 4px" id="outBoard">
    <div class="messageList">
        <ul id="msgUl" class="unstyled">
        </ul>
    </div>
    <div class="form-inline">
        <input type="text" id="userName" placeholder="昵称" class="input-mini" />
        <input type="text" id="messageBox" class="input-xxlarge" />
        <input type="submit" value="发送" class="btn btn-info" id="btnSent" />

    </div>
    <div class="alert" style="display: none; width: 100px">
        必须输入昵称！
    </div>
</div>