如何使用pubnub timetoken处理页面刷新

Question

When pubnub is connected, users inside my app receive messages no problem. However, let's say they refresh the page or go to another page within the app. There's a 2 -> 5 seconds of downtime before the user can connect to pubnub again. During this time some pubnub messages may be missed.

Thankfully, the pubnub subscribe API allows you to specify a timetoken to point to a past time (eg 10 seconds ago).

pubnub.subscribe({
  channels: ['my_channel'],
  timetoken: '13534398158620385'
});

Description:

Specifies timetoken from which to start returning any available cached messages.

Question: What's the safest way to specify this timetoken such that few messages are missed?

Answer 1

First, listen out for beforeunload events on the window. These will be fired before the page is moved away from. Inside this create a cookie to save the current timetoken :

window.addEventListener('beforeunload', () => {
  const now = new Date().getTime();
  // pubnub timetokens are 17 digits long
  const timetoken = `${now}0000`;

  createCookie(PUBNUB_TIMETOKEN_COOKIE, timetoken, EXPIRATION);
});

Note: PUBNUB_TIMETOKEN_COOKIE and EXPIRATION are constants of your choosing. I set my cookie to expire after 10 seconds to prevent clashes. Also you'll need to define a createCookie function similar to this one .

Next, when subscribing to pubnub on page load, use this cookie if it exists:

pubnub.subscribe({
  channels: ['my_channel'],
  timetoken: getCookie(PUBNUB_TIMETOKEN_COOKIE)
});

This way, if the user refreshes or navigates to another page, missed messages should be caught.