SignalR示例demo

最新推荐文章于 2024-09-09 14:25:02 发布

weixin_30836759

最新推荐文章于 2024-09-09 14:25:02 发布

阅读量338

点赞数

文章标签： json javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/mazhlo/p/8385353.html

版权

本demo是通过mvc 实现

（1）首先在App_Start下添加Startup.cs文件定义管线的启动：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRTest.App_Start.Startup))]

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

（2）定义Hub的客户端中包括的方法

    public interface IPlatHubClient
    {
        void ReceiveMsg(string message);//定义前台客户端上注册的方法
    }

（3）实现Hub服务器端

首先定义Hub的注册绑定类，该类可以实现hub的clientid与sessionID、userid的绑定（按需修改使用）

    public class PlatHubRegisteInfo
    {
        public string Id { get; set; }
        public string SessionId { get; set; }
        public string UserId { get; set; }
    }

PlatHub实现接口如下：（这是真正的通信管线，直接放到项目中即可，无需其他地方注册）

[HubName("PlatHub")]
    public class PlatHub : Hub<IPlatHubClient>
    {
        private static readonly object ClientMapLock = new object();
        public static readonly Dictionary<PlatHubRegisteInfo, string> ClientMap = new Dictionary<PlatHubRegisteInfo, string>();
        /// <summary>
        /// 客户端注册连接信息
        /// </summary>
        /// <param name="id"></param>
        [HubMethodName("Registe")]
        public void Registe(string id)
        {
            lock (ClientMapLock)
            {
                ClientMap.Add(new PlatHubRegisteInfo { Id = id }, this.Context.ConnectionId);
            }
            Log.Write("", "Registe:ConnectionId=" + Context.ConnectionId + Environment.NewLine +"id="+ id);
        }
        public void BroadcastToAll(string message)
        {
            Clients.All.ReceiveMsg(Newtonsoft.Json.JsonConvert.SerializeObject(new { id = Context.ConnectionId, msg = message }));
        }
        public void BroadcastToSome(string[] ids, string message)
        {
            Clients.Clients(ids.ToList()).ReceiveMsg(Newtonsoft.Json.JsonConvert.SerializeObject(new { id = Context.ConnectionId, msg = message }));
        }
        //
        // 摘要:
        //     Called when the connection connects to this hub instance.
        //
        // 返回结果:
        //     A System.Threading.Tasks.Task
        public override async Task OnConnected()
        {
            var t = this;
            base.OnConnected();
            return;
        }
        //
        // 摘要:
        //     Called when a connection disconnects from this hub gracefully or due to a timeout.
        //
        // 参数:
        //   stopCalled:
        //     true, if stop was called on the client closing the connection gracefully; false,
        //     if the connection has been lost for longer than the Microsoft.AspNet.SignalR.Configuration.IConfigurationManager.DisconnectTimeout.
        //     Timeouts can be caused by clients reconnecting to another SignalR server in scaleout.
        //
        // 返回结果:
        //     A System.Threading.Tasks.Task
        public override async Task OnDisconnected(bool stopCalled)
        {
            var t = this;
            var infos = ClientMap.Where(a => a.Value == this.Context.ConnectionId);
            if (infos.Any())
            {
                var info = infos.First();
                lock (ClientMapLock)
                {
                    ClientMap.Remove(info.Key);
                }
                Log.Write("", "Disconnected:ConnectionId=" + Context.ConnectionId + Environment.NewLine + "id=" + info.Key.Id);
            }
            base.OnDisconnected(stopCalled);
            return;
        }
        //
        // 摘要:
        //     Called when the connection reconnects to this hub instance.
        //
        // 返回结果:
        //     A System.Threading.Tasks.Task
        public override async Task OnReconnected()
        {
            var t = this;
            base.OnReconnected();
            return;
        }
        protected override async void Dispose(bool disposing)
        {
            var t = this;
            base.Dispose(disposing);
            return;
        }
    }

（3）添加控制器HomeController，并添加试图方法：

        public ActionResult Index()
        {
            Guid id = Guid.NewGuid();
            Response.Cookies.Add(new HttpCookie("id", id.ToString()));//cookie将通过客户端的Registe实现与服务器的关联
            return View();
        }

（4）前台Index试图如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - 我的 ASP.NET 应用程序</title>
    
</head>
<body>
    

<div>home</div>
<div><input type="text" id="msg" /><input type="button" id="sendmsg" value="广播" /></div>
<div id="divStatus"></div>
<div>msgs:</div>
<div id="msgContainer"></div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/jquery.cookie-1.4.1.min.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    <script>
        $(function () {
            // hub名称（如若类名用特性重命名了，则是特性重命名的名称，否则就是类名的首字母小写；）.
            var chat = $.connection.PlatHub;
            //启用浏览器端输出日志
            $.connection.hub.logging = true;
            // 客户端定义一个函数，服务器上可以调用.
            chat.client.ReceiveMsg = function (message) {
                //var ob = $.parseJSON(message);
                //                $("#msgContainer").append("<div>id:" + ob.code + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:" + ob.content + "</div>");
                $("#msgContainer").append("<div>" + message+"</div>");
            };
            // Start the connection.
            $.connection.hub.starting(function () {
                console.log('starting.')
            });
            $.connection.hub.received(function (e) {
                console.log('received.'+e)
            });
            $.connection.hub.connectionSlow(function () {
                console.log('connectionSlow.')
            });
            $.connection.hub.reconnecting(function () {
                console.log('reconnecting.')
            });
            $.connection.hub.reconnected(function () {
                console.log('reconnected.')
            });
            $.connection.hub.stateChanged(function (o, n) {
                console.log('stateChanged.' + o + "," + n)
            });
            $.connection.hub.disconnected(function () {
                console.log('disconnected.');
                setTimeout(function () {
                    $.connection.hub.start();
                }, 1000); // Restart connection after 1 seconds.
            });
            $.connection.hub.error(function (error) {
                console.log('SignalR error: ' + error)
            });
            $.connection.hub.start().done(function () {
                chat.server.Registe($.cookie('id'));//定义id，与管线clientid关联
                $("#sendmsg").click(function () {
                    $.ajax({
                        url: 'GuangBo',
                        type: 'POST', //GET
                        async: true,    //或false,是否异步
                        data: {
                            msg: $("#msg").val()
                        },
                        timeout: 5000,    //超时时间
                        dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                        beforeSend: function (xhr) {
                            console.log(xhr)
                            console.log('发送前')
                        },
                        success: function (data, textStatus, jqXHR) {
                            if (data.code == 1) {
                                $("#divStatus").val(new Date().toString() + ":成功");
                            }
                            else
                                $("#divStatus").val(new Date().toString() + ":失败");
                        },
                        error: function (xhr, textStatus) {
                            console.log('错误')
                            console.log(xhr)
                            console.log(textStatus)
                        },
                        complete: function () {
                            console.log('结束')
                        }
                    });
                });
            }).fail(function (error) {
                console.log('fail Error: ' + error);
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>

</body>
</html>

在前端代码中，如下代码是定义客户端的方法：

chat.client.ReceiveMsg = function (message) {
                //var ob = $.parseJSON(message);
                //                $("#msgContainer").append("<div>id:" + ob.code + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg:" + ob.content + "</div>");
                $("#msgContainer").append("<div>" + message+"</div>");
            };

前端如下代码是访问服务器：

chat.server.Registe($.cookie('id'));//Registe是PlatHub上通过特性HubMethodName定义的

前端代码调用的后端控制器GuangBo实现如下：

        [HttpPost]
        public JsonResult GuangBo(string msg)
        {
            var chatHub = GlobalHost.ConnectionManager.GetHubContext<PlatHub>();
            chatHub.Clients.All.ReceiveMsg(msg);//给所有人
            return Json(new { code = 1 });
        }

若希望给单独一个ID发送，可以采用如下：

        [HttpPost]
        public JsonResult ToSingle(string client,string msg)
        {
            var chatHub = GlobalHost.ConnectionManager.GetHubContext<PlatHub>();
            chatHub.Clients.Client(client).ReceiveMsg(msg);
            return Json(new { code = 1 });
        }

可以通过