javascript - 页面可见性检测-不知道如何设置初始状态

Question

我正在两个用户之间设置 nodejs/socket.io 私有(private)消息传递。一切都按预期工作，但唯一的问题是显示消息的已读回执。

据我了解，执行此操作的唯一方法是检测消息是否出现在收件人的屏幕上。因此，当消息出现在收件人的屏幕上时，我想发出一个 socket.io 事件:

socket.emit('messages read', user);

一起:

var newmessages = 0;

socket.emit("chat message", data); //sending message
newmessages = 1;


function onVisibilityChange(callback) {
    var visible = true;

    if (!callback) {
        throw new Error('no callback given');
    }
    function focused() {
        if (!visible) {
            callback(visible = true);
        }
    }

    function unfocused() {
        if (visible) {
            callback(visible = false);
        }
    }

    if ('hidden' in document) {
        document.addEventListener('visibilitychange',
            function() {(document.hidden ? unfocused : focused)()});
    }
    if ('mozHidden' in document) {
        document.addEventListener('mozvisibilitychange',
            function() {(document.mozHidden ? unfocused : focused)()});
    }
    if ('webkitHidden' in document) {
        document.addEventListener('webkitvisibilitychange',
            function() {(document.webkitHidden ? unfocused : focused)()});
    }
    if ('msHidden' in document) {
        document.addEventListener('msvisibilitychange',
            function() {(document.msHidden ? unfocused : focused)()});
    }

    if ('onfocusin' in document) {
        document.onfocusin = focused;
        document.onfocusout = unfocused;
    }

    window.onpageshow = window.onfocus = focused;
    window.onpagehide = window.onblur = unfocused;
};

onVisibilityChange(function(visible) {

    if (visible == true) { //here I want to send read confirmation when message appears on the screen
        if (newmes != '0') {
            socket.emit('messages read', user);
            newmessages = 0;
        }
    }

});

问题

它有效，但我不知道如何设置可见窗口的初始状态。例如，用户 A 正在与用户 B 聊天，并且两个用户都打开了聊天窗口。如果继续聊天而不切换浏览器选项卡或最小化会改变可见性的浏览器，则永远不会收到已读回执。当用户第一次加载聊天页面时，如何将 visible 设置为 true？

Answer 1

您可以使用window.onload要做到这一点。 load 事件在页面加载时触发，因此您可以在此事件处理程序中设置初始状态。

var visible;

window.onload = function() {
  // Set your initial state.
  visible = true;
};