Azure SignalR 使用

做了一个小型直播demo，接入阿里云的视频直播，需要统计实时在线人数，使用了SignalR做通讯。

1、在世纪互联上找到SignalR的Key、Endpoint,这些东西需要配置到WebConfig

image.png

2、在WebConfig中配置

image.png

3、在程序中添加Owin Startup类，需要在NuGet中引入Owin的相关dll（依赖项会自动添加），并在Configuration方法中配置如下

image.png

4、创建一个集线器类，并继承Hubs，然后需要在Nuget中获取SignalR

image.png

4.1安装 Mictosoft.ASP.NET.SignalR，使用的是2.4.1版本

image.png

4.2 Azure SignalR 需要安装4.1截图中最下面的【Microsoft.Azure.SignalR.AspNet 】
4.3 在安装此控件后，会自动添加相对应的 js 文件

image.png

5、开始使用，以下代码为测试代码

<div>
    消息接收
    <p id="msg"></p>
    <img style="width:300px;" id="PPTImg" src="" />

    <input id="UserID" placeholder="用户id" />
    <p>在线人数:<span id="OnlineNum"></span></p>
    <div id="Users">

    </div>
</div>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="https://localhost:112313/signalr/hubs"></script>

<script>
    function sj() {
        //x上限，y下限     
        var x = 10000;
        var y = 0;
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        return rand;
    }
    $(function () {
        
        $.connection.hub.url = "https://localhost:112313/signalr";
        var hub = $.connection.messageHub;
        var i = 0;
        var maxc = 10;  //最大连接数
        hub.client.receiveMassage = function (m) {
            $("#PPTImg").prop("src", m);
            $("#msg").text(m);
        }
        //接收在线人数变化
        hub.client.pushOnlineNum = function (m) {
            $("p>#OnlineNum").text(m);
        }
        $.connection.hub.disconnected(function (e) {
            if ($("#UserID").val() != "") {
                $.post("https://localhost:123432/LoginApi/OutOnline", { UserID: $("#UserID").val() }, function (res) {

                });
            }
            console.log("断开连接"); //这里添加断开连接的处理方法
        });
        // hub连接开启
        $.connection.hub.start().done(function () {
            //发送上线信息
            var init = setInterval(function () {
                if (i <= maxc) {
                    //测试，随机生成UserID
                    var UserId = sj();
                    i += 1;
                    //hub.server.clientLogin(UserId, 1);
                    $("#Users").append("<p>用户：" + UserId + " 上线了!</p>");
                } else {
                    init = window.clearInterval(init);
                }
            }, 1000);
        });
    });
</script>