当打开一页的两个选项卡时，通知不起作用

Question

我在我的 MVC Web 应用程序上与 SignalR 一起使用通知。我正在从服务器的某个页面中调用客户端函数。问题是当该页面同时在两个浏览器选项卡中打开时，不会弹出任何通知。我应该提一下，当页面仅在一个选项卡中打开时，它确实可以正常工作。

我注意到，如果我在创建通知对象的行之前放置一个警报，两个选项卡都会收到通知，这就是我所期望的。提前致谢。

$(function () {
    var notificationHub = $.connection.notificationHub;
    $.connection.hub.start();
    notificationHub.client.sendMessage = function (content) {
        setTimeout(notifyMe(content), 10);
    };
});

function notifyMe(message) {
    if (!("Notification" in window)) {
        alert("This browser does not support system notifications");
    }
    else if (Notification.permission === "granted") {
        var notification = new Notification(message);            
    }
    else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {
            // If the user accepts, let's create a notification
            if (permission === "granted") {
                var notification = new Notification(message);
            }
        });
    }
}

更新： 以下是通知创建代码前面有一个警报的场景，它可以按预期工作：

    function notifyMe(message, system) {
        if (!("Notification" in window)) {
            alert("This browser does not support system notifications");
        }
        else if (Notification.permission === "granted") {
            alert('hit');
            var notification = new Notification(system, {
                body: message,
                tag: (Math.floor(Math.random() * 10)).toString(),
                icon: 'Content/Images/logo.png',
                dir: 'rtl',
                background: '#ff0000'
            });

        }
        else if (Notification.permission !== 'denied') {
            alert('hit');
            Notification.requestPermission(function (permission) {
                if (permission === "granted") {
                    var notification = new Notification(message)
                }
            });
        }
    }

$(function () {
    var notificationHub = $.connection.notificationHub;
    $.connection.hub.start();
    notificationHub.client.sendMessage = function (content, system) {
        setTimeout(notifyMe(content, system), 10);
    };
});

Answer 1

问题可能出在您的信号器初始化代码中。 我假设 var notificationHub 是一个 globla 对象，并且您已将此 doe 放在母版页中。

那么你需要在初始化之前检查notificationHub是否为null。只需像这样更改您的代码：

$(function () {
    if(notificationHub === undefined || notificationHub === null){
       var notificationHub = $.connection.notificationHub;
       $.connection.hub.start();
       notificationHub.client.sendMessage = function (content) {
           setTimeout(notifyMe(content), 10);
       };
    }
});

更新：

当您确认信号器正常工作（即警报消息在两个选项卡中都有效）后，请尝试对 Notification 对象执行以下操作：

var notification = new Notification('Test', {
    body : message,
    tag : 'notify-tag-name', //Make this a random number
    icon : 'icon.png'
});

请注意，如果 tag 属性的值在两个浏览器选项卡中相同，则即使打开了许多浏览器选项卡，通知也只会显示一次。在这种情况下，您可以在标签名称中添加一个随机数，以确保它们在标签之间是不同的。