zoukankan      html  css  js  c++  java
  • SignalR简单Demo

     

      我们实现一个简单的消息通知的Demo

       在NuGet中添加SignalR引用

    install-package Microsoft.AspNet.SignalR

     然后我们创建一个类来引用Hub类

    namespace SignalRDemo.Hubs
    {
        public class ServerHub:Hub
        {
        }
    }

     或者直接在添加项中添加SignalR添加SignalR

      然后我们在ServerHub类中创建一个发送信息方法

    /// <summary>
    /// 服务器发送方法
    /// </summary>
    /// <param name="msg"></param>
    public void SendMsg(string msg)
    {
           //调用客户端的showMsg方法
           Clients.All.showMsg(Context.ConnectionId, msg);
    }

       这个方法由客户端进行调用,方法中Clients代表客户端对象,这段话表示调用客户端的showMsg方法.而All代表是给所有人发送通知

        All:调用所有人方法

        Others:调用除去自己所有人方法

      Caller:调用自己方法

      Group:调用组内所有人方法

      Client(string connectionId):调用指定连接编号的方法

         Context.ConnectionId是当前连接用户的标志,是一个GuId

        然后我们创建一个Start类来注册SignalR

    namespace SignalRDemo
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.MapSignalR();
           }
        }
    }

       注意,此处是一个约定,类名与方法名必须为Startup和Configuration。该类还必须在网站根目录,否则运行时就会出错

        接下来我们就可以创建页面了

        创建一个Home控制器Index页面。

        在页面中引用JQuery类库与SignalR类库

    然后我们再手动添加一个类库引用

     <script src="~/SignalR/Hubs"></script>

      这个js类库在目录下是找不到的,它是在运行时自动创建

      我们可以启动项目来查看下这个路径

      如果出现此页面则表示我们SignalR配置OK。

       下面我们就可以写客户端了

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div> 
             <input  type="text" id="msg"/>
            <button id="sendMsg">发送消息</button>
        </div>
        <ol id="showMsg">
    
        </ol>
        <script src="~/Scripts/jquery-1.6.4.js"></script>
        <script src="~/Scripts/jquery.signalR-2.2.2.js"></script>
        <script src="~/SignalR/Hubs"></script>
        <script>
            $(function () {
                //获取服务端连接对象
                var hub = $.connection.serverHub;
                //创建服务端所调用的客户端方法
                hub.client.showMsg=function(name, msg){
                    $('#showMsg').append('<li><span style="color:red">'+name+':</span>'+msg+'</li>')
                }
                //开始连接服务器
                $.connection.hub.start().done(function () {
                    //连接成功
                    $('#sendMsg').bind('click', function () {
                        //调用服务端发送方法
                        hub.server.sendMsg($('#msg').val());
                    })
                }).fail(function () {
                    //连接失败
                    alert("连接失败");
                });
            })
        </script>
    </body>
    </html>

       然后就可以简单进行消息通知了

       

  • 相关阅读:
    表单重复提交问题
    Win8.1卸载64位Oracle Database 11g的详细图文步骤记录
    A1084. Broken Keyboard (20)
    A1088. Rational Arithmetic (20)
    A1089. Insert or Merge (25)
    A1034. Head of a Gang (30)
    A1013. Battle Over Cities (25)
    A1030. Travel Plan (30)
    A1003. Emergency (25)
    A1076. Forwards on Weibo (30)
  • 原文地址:https://www.cnblogs.com/yan7/p/8079600.html
Copyright © 2011-2022 走看看