Listening for Events

Listening for Events

import React, { useEffect } from 'react';
import Upscope from '@upscopeio/react-native-sdk';

function MyComponent() {
  useEffect(() => {
    const subs = [
      Upscope.addListener('connectionStateChanged', ({ state, error }) => {
        switch (state) {
          case 'inactive':
            console.log('Inactive');
            break;
          case 'connecting':
            console.log('Connecting...');
            break;
          case 'connected':
            console.log('Connected');
            break;
          case 'reconnecting':
            console.log('Reconnecting...');
            break;
          case 'error':
            console.log('Error:', error?.message);
            break;
        }
      }),

      Upscope.addListener('sessionStarted', ({ agentName }) => {
        console.log(`Session started with ${agentName ?? 'an agent'}`);
      }),

      Upscope.addListener('sessionEnded', ({ reason, error }) => {
        switch (reason) {
          case 'userStopped':
            console.log('User ended session');
            break;
          case 'agentStopped':
            console.log('Agent ended session');
            break;
          case 'timeout':
            console.log('Session timed out');
            break;
          case 'error':
            console.log('Session error:', error?.message);
            break;
        }
      }),

      Upscope.addListener('customMessageReceived', ({ message, viewerId }) => {
        console.log(`Message from ${viewerId}: ${message}`);
      }),

      Upscope.addListener('error', ({ code, message }) => {
        console.log(`Error: ${code} - ${message}`);
      }),

      Upscope.addListener('viewerJoined', (viewer) => {
        console.log(`Viewer joined: ${viewer.name ?? viewer.id}`);
      }),

      Upscope.addListener('viewerLeft', ({ viewerId }) => {
        console.log(`Viewer left: ${viewerId}`);
      }),

      Upscope.addListener('viewerCountChanged', ({ count }) => {
        console.log(`Viewers: ${count}`);
      }),

      Upscope.addListener('remoteControlStateChanged', ({ state }) => {
        console.log(`Remote control: ${state}`);
      }),

      Upscope.addListener('fullDeviceSharingStateChanged', ({ state }) => {
        console.log(`Full-device sharing: ${state}`);
      }),

      Upscope.addListener('sessionRequest', ({ requestId, agentName }) => {
        // An agent is requesting to start a cobrowsing session. Only fires
        // when the config sets customSessionRequestUI: true (replacing the
        // native authorization dialog) and authorization is required.
        // Pass true to start the session, false to decline.
        const userAllowsSession = true;
        console.log(`${agentName ?? 'An agent'} requested a session`);
        Upscope.respondToSessionRequest(requestId, userAllowsSession);
      }),

      Upscope.addListener('controlRequest', ({ requestId, agentName }) => {
        // An agent is requesting remote control of the device. Only fires
        // when the config sets customControlRequestUI: true (replacing the
        // native control request prompt).
        // Pass true to grant control, false to decline.
        const userGrantsControl = true;
        console.log(`${agentName ?? 'An agent'} requested remote control`);
        Upscope.respondToControlRequest(requestId, userGrantsControl);
      }),

      Upscope.addListener('fullDeviceRequest', ({ requestId, agentName }) => {
        // Only fires when the config sets customFullDeviceRequestUI: true
        // (otherwise the SDK proceeds directly to the system prompt).
        // Pass true to proceed to the prompt, false to stay in in-app mode.
        const userWantsFullDevice = true;
        console.log(`${agentName ?? 'An agent'} requested full-device sharing`);
        Upscope.respondToFullDeviceRequest(requestId, userWantsFullDevice);
      }),
    ];

    return () => subs.forEach((sub) => sub.remove());
  }, []);

  return null;
}

Event Reference

Using Hooks Instead

For most use cases, the reactive hooks are simpler than manual event subscriptions. See SDK Functions for details on useConnectionState(), useSessionState(), and other hooks.