使用PubNub检测Javascript的断开连接

Question

我正在使用PubNub创建一个人对人聊天应用程序.

基本上,每个用户都订阅了他们自己的频道,然后双方以即时消息的方式将消息发送到彼此的频道.

然后,消息将显示在页面上.我正在使用JQuery.

pubnub.subscribe({
    restore  : true,
    channel  : 'my_channel',
    callback : function(message) {
        console.log(JSON.stringify(message));
        $('div.chatbox').append('<div>'+message+'</div>');
    }
});

但是,我希望能够检测用户何时脱机(我真的不在乎他们如何脱机,只是因为与另一方的连接不再可用).

因此,如果用户1和用户2正在通话,则用户2下线,PubNub端是否有任何机制允许用户1检查用户2的连接状态？我如何在JS代码中实现它(骨架代码是可以的)？

提前致谢.

PS我不想使用Socket.IO

Answer 1

如何使用PubNub检测丢弃的朋友和自我(本地)网络连接

为了检测移动设备,平板电脑和Web设备上丢失的网络连接,您可以使用PubNub通过绑定到PubNub JavaScript API中的内置事件来显示连接状态.理解掉线连接和重新连接状态有几个方面.此外,对于PubNub,您可能对社交发现您的在线朋友的连接/断开事件感兴趣.通过这种方式,您可以获得绿点效果,表示您的朋友在线状态,以及当您的朋友离线时的红点.我们将通过双方进行连接状态跟踪,以便您可以在自己的设备离线/在线时以及当他们的朋友上线/离线时检测并通知您的用户.

使用JavaScript PubNub API检测本地连接状态

在任何支持JavaScript的设备(如移动电话和Web浏览器)上检测到本地连接状态都很简单.您将使用一些高级PubNub参数来访问在连接状态更改期间触发的回调.在应用程序代码中注册回调很容易.这是一个快速复制/粘贴起点,供您放在后袋:

<div pub-key="demo" sub-key="demo" id="pubnub"></div>
<script src="http://cdn.pubnub.com/pubnub-3.3.min.js"></script>
<script>(function(){

// LISTEN FOR MESSAGES
PUBNUB.subscribe({
    channel    : "hello_world",      // CONNECT TO THIS CHANNEL.
    restore    : true,               // STAY CONNECTED, EVEN WHEN BROWSER IS
                                     // CLOSED OR WHEN PAGE CHANGES.
    callback   : alert,              // FUNCTION TO RUN ON MESSAGE RECEIVED.

    disconnect : function() {        // LOCAL LOST CONNECTION.
        alert("Connection Lost.")
    },
    reconnect  : function() {        // CONNECTION RESTORED.
        alert("And we're Back!")
    },
    connect    : function() {        // CONNECTION ESTABLISHED.
        PUBNUB.publish({             // SEND A MESSAGE.
            channel : "hello_world",
            message : "Hi from PubNub."
        }) 
    }
})

})();</script>

注意:上面显示的是一种注册本地设备连接事件的简单方法.

现在来谈谈PubNub Presence; PubNub的一项功能,它允许您在朋友上线或离线时检测朋友的连接并接收远程连接事件.

使用PubNub Presence检测在线/离线状态的朋友

接下来,您想要了解在他们上线时检测您的朋友连接状态并离线.您也可以注册这些活动,但由于您需要提供用户的ID(或抽象ID),因此您可以做更多的工作.你可以通过PubNub的存在来做到这一点,但是它会涉及更多,我会发送给你两篇博文,让你快速前进.在我发送给您之前,我将向您展示注册朋友的远程在线/离线事件通知的重要代码段:

// Open Bidirectional Socket Connection with
// REMOTE Connection Detect "Presence" Events.
PUBNUB.subscribe({
    channel  : "my_channel", // Channel Name
    connect  : connect,      // OnConnect Callback
    callback : alert,        // Received Message Callback
    presence : presence      // Presence Callback
});

注意:使用PubNub Presence回调事件接收远程连接状态更新(朋友连接状态).

在代码示例中,您将看到状态回调.此参数选项需要一个函数引用,该函数引用将在您的朋友在同一PubNub通道上发生连接更改(在线/离线)时执行.好了,现在你掌握了一些东西,你需要查看以下博客文章,以帮助您了解有关PubNub存在的具体细节.

PubNub Presence Resources

• 宣布PubNub频道存在http://blog.pubnub.com/announcing-pubnub-channel-presence/
• 使用PubNub Channel Presence在移动和Web上进行漂亮的HTML5聊天http://blog.pubnub.com/html5-websockets-beautiful-real-time-chat-on-mobile-using-pubnubs-channel-presence/
• Live PubNub Chat Channel Presence App http://pubnub.s3.amazonaws.com/rally/index.html
• Vimeo上的PubNub Presence视频https://vimeo.com/channels/379311
• 下载Sample Presence App源代码(GitHub) - https://github.com/pubnub/pubnub-chat-c​​hannel-presence - 开源MIT许可证.

使用上面的链接和参考资料,了解有关PubNub Presence的所有信息