Display multi-tab error message when attempting to host two sessions

When hosting two sessions, the browser continually attempts to reconnect to the signal server since only one instance can be the session owner. This prevents that issue from popping up with an informative error message.

Author: samuelmaddock

packages/metastream-app/src/components/lobby/Disconnect.css

@@ -11,9 +11,12 @@
 .info {
   composes: center-vertical from '~styles/layout.css';
   composes: select-text from '~styles/text.css';
+  padding: 0 1rem;
+  max-width: 600px;
 }
 
 .info svg {
+  flex-shrink: 0;
   margin-right: 0.5rem;
 }
 

packages/metastream-app/src/constants/network.ts

@@ -37,7 +37,8 @@ export const enum NetworkDisconnectReason {
   InvalidClientInfo,
   VersionMismatch,
   Full,
-  Kicked
+  Kicked,
+  MultiTab
 }
 
 export const NetworkDisconnectMessages = {
@@ -46,7 +47,8 @@ export const NetworkDisconnectMessages = {
   [NetworkDisconnectReason.InvalidClientInfo]: 'networkDisconnectInvalidClientInfo',
   [NetworkDisconnectReason.VersionMismatch]: `networkDisconnectVersionMismatch`,
   [NetworkDisconnectReason.Full]: 'networkDisconnectFull',
-  [NetworkDisconnectReason.Kicked]: 'networkDisconnectKicked'
+  [NetworkDisconnectReason.Kicked]: 'networkDisconnectKicked',
+  [NetworkDisconnectReason.MultiTab]: 'networkDisconnectMultiTab'
 }
 
 export const NetworkDisconnectLabels = {
@@ -55,5 +57,6 @@ export const NetworkDisconnectLabels = {
   [NetworkDisconnectReason.InvalidClientInfo]: 'invalid-client-info',
   [NetworkDisconnectReason.VersionMismatch]: `version-mismatch`,
   [NetworkDisconnectReason.Full]: 'full',
-  [NetworkDisconnectReason.Kicked]: 'kicked'
+  [NetworkDisconnectReason.Kicked]: 'kicked',
+  [NetworkDisconnectReason.MultiTab]: 'multi-tab'
 }

packages/metastream-app/src/containers/LobbyPage.tsx

@@ -27,6 +27,7 @@ import { resetLobby, initLobby } from '../lobby/actions/common'
 import { IReactReduxProps } from 'types/redux-thunk'
 import { NetworkError, NetworkErrorCode } from '../network/error'
 import { addChat } from '../lobby/actions/chat'
+import { MultiTabObserver } from '../utils/multitab'
 
 interface IRouteParams {
   lobbyId: string
@@ -66,6 +67,7 @@ export class _LobbyPage extends Component<PrivateProps, IState> {
   private mounted: boolean = false
   private server?: NetServer
   private host: boolean
+  private tabObserver?: MultiTabObserver
 
   private get supportsNetworking() {
     return this.props.sessionMode !== SessionMode.Offline
@@ -81,10 +83,27 @@ export class _LobbyPage extends Component<PrivateProps, IState> {
     this.host = props.match.params.lobbyId === localUserId()
   }
 
+  private async checkIsMultiTab() {
+    if (!this.tabObserver) {
+      this.tabObserver = new MultiTabObserver()
+    }
+
+    const isMultiTab = await this.tabObserver.getIsMultiTab()
+    if (isMultiTab) {
+      this.disconnect(NetworkDisconnectReason.MultiTab)
+      return true
+    }
+
+    return false
+  }
+
   private async setupLobby(): Promise<void> {
     let successPromise
 
     if (this.host) {
+      const isMultiTab = await this.checkIsMultiTab()
+      if (isMultiTab) return
+
       successPromise = PlatformService.createLobby({
         p2p: true,
         websocket: true
@@ -113,6 +132,11 @@ export class _LobbyPage extends Component<PrivateProps, IState> {
       this.server = undefined
     }
 
+    if (this.tabObserver) {
+      this.tabObserver.destroy()
+      this.tabObserver = undefined
+    }
+
     PlatformService.leaveLobby(this.lobbyId)
     this.props.dispatch(NetActions.disconnect({ host: this.host }))
   }
@@ -152,7 +176,7 @@ export class _LobbyPage extends Component<PrivateProps, IState> {
   ) => {
     this.setState({ connected: false })
 
-    if (immediate || this.host) {
+    if (immediate) {
       this.props.dispatch(push('/'))
       return
     }

packages/metastream-app/src/locale/en-US.ts

@@ -65,6 +65,8 @@ export default {
   networkDisconnectVersionMismatch: `Client version mismatch.`,
   networkDisconnectFull: 'Session is full.',
   networkDisconnectKicked: 'Kicked from session.',
+  networkDisconnectMultiTab:
+    'You are hosting a Metastream session from more than one browser or tab. Please close the other tabs or other browsers, then reload the page.',
   networkTroubleshootingHelp: 'See <1>Network Troubleshooting guide</1> for help.',
   noticeAddedMedia: 'Added <Media id="{{mediaId}}">{{mediaTitle}}</Media>',
   noticeMediaError: 'There was an error requesting {{url}}',

packages/metastream-app/src/utils/multitab.ts

@@ -0,0 +1,61 @@
+import shortid from 'shortid'
+
+export class MultiTabObserver {
+  private channel?: BroadcastChannel
+  private observerId = shortid()
+
+  constructor() {
+    if ('BroadcastChannel' in window) {
+      this.channel = new BroadcastChannel('multitab_observer')
+      this.channel.addEventListener('message', this.onMessage)
+    }
+  }
+
+  destroy() {
+    if (this.channel) {
+      this.channel.close()
+    }
+  }
+
+  private onMessage = (event: MessageEvent) => {
+    const action = event.data
+    if (action.id === this.observerId) return
+    switch (action.type) {
+      case 'ping':
+        this.channel!.postMessage({ type: 'pong', payload: this.observerId })
+        break
+    }
+  }
+
+  getIsMultiTab() {
+    if (!this.channel) return Promise.resolve(false)
+    return new Promise(resolve => {
+      let done = false
+      let timeoutId: any
+
+      const channel = this.channel!
+      channel.postMessage({ type: 'ping', id: this.observerId })
+
+      const cleanup = () => {
+        if (timeoutId) clearTimeout(timeoutId)
+        channel.removeEventListener('message', onMessage)
+        done = true
+      }
+
+      const onMessage = (event: MessageEvent) => {
+        const action = event.data
+        if (action.type === 'pong' && action.id !== this.observerId) {
+          cleanup()
+          resolve(true)
+        }
+      }
+      channel.addEventListener('message', onMessage)
+
+      timeoutId = setTimeout(() => {
+        timeoutId = undefined
+        cleanup()
+        resolve(false)
+      }, 200)
+    })
+  }
+}