SignalR简单Demo-阿里云开发者社区

SignalR简单Demo

2017-12-21 1197

简介： 我们实现一个简单的消息通知的Demo 在NuGet中添加SignalR引用 install-package Microsoft.AspNet.SignalR 然后我们创建一个类来引用Hub类 namespace SignalRDemo.

+关注继续查看

我们实现一个简单的消息通知的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>

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