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>

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

       

  • 相关阅读:
    前端思想实现:面向UI编程_____前端框架设计开发
    使用单体模式设计原生js插件
    QQ空间首页背景图片淡出解析与不足完善
    网页字体设置
    Asp.net MVC Session过期异常的处理
    日本设计的七个原则
    断开所有远程连接(sql server)
    Ubuntu1404+Django1.9+Apache2.4部署配置2配置文件设置
    Linux系统查找文件find命令使用(不断更新)
    ubuntu1404下Apache2.4错误日志error.log路径位置
  • 原文地址:https://www.cnblogs.com/yan7/p/8079600.html
Copyright © 2011-2022 走看看