How to use @storybook/channel-websocket - 6 common examples

if (!channel || params.resetStorybook) {
        if (params.onDeviceUI && !params.useWebsockets) {
          channel = this._events;
        } else {
          const host = params.host || parse(NativeModules.SourceCode.scriptURL).hostname;
          const port = params.port !== false ? `:${params.port || 7007}` : '';

          const query = params.query || '';
          const { secured } = params;
          const websocketType = secured ? 'wss' : 'ws';
          const httpType = secured ? 'https' : 'http';

          const url = `${websocketType}://${host}${port}/${query}`;
          webUrl = `${httpType}://${host}${port}`;
          channel = createChannel({ url });
        }

        addons.setChannel(channel);

        channel.emit('channelCreated');
      }

      channel.on('getStories', () => this._sendSetStories());
      channel.on('setCurrentStory', d => this._selectStory(d));
      this._events.on('setCurrentStory', d => this._selectStory(d));
      this._sendSetStories();
      this._sendGetCurrentStory();

      // finally return the preview component
      return params.onDeviceUI ? (

// Registers the storyboards command to trigger a new HTML preview which hosts the storybook server
  let disposable = vscode.commands.registerCommand("extension.showStorybookPreview", () => {
    return vscode.commands.executeCommand("vscode.previewHtml", previewUri, vscode.ViewColumn.Two, "Storybooks").then(
      success => {},
      reason => {
        vscode.window.showErrorMessage(reason)
      }
    )
  })

  context.subscriptions.push(disposable, registration)

  const host = vscode.workspace.getConfiguration("react-native-storybooks").get("host")
  const port = vscode.workspace.getConfiguration("react-native-storybooks").get("port")

  storybooksChannel = createChannel({ url: `ws://${host}:${port}`, async: true, onError: () => {} })
  var currentKind: string = null
  var currentStory: string = null
  var currentStoryId: string = null

  // Create a statusbar item to reconnect, when we lose connection
  const reconnectStatusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left)
  reconnectStatusBarItem.command = "extension.restartConnectionToStorybooks"
  if (connectedOnce) {
    reconnectStatusBarItem.text = "Reconnect Storybooks"
    reconnectStatusBarItem.color = "#FF8989"
  } else {
    reconnectStatusBarItem.text = "Connect to Storybooks"
  }

  reconnectStatusBarItem.hide()

constructor({ url: domain, options }) {
    super();

    const { secured, host, port } = options;
    const websocketType = secured ? 'wss' : 'ws';
    let url = `${websocketType}://${domain}`;

    if (options.manualId) {
      this.pairedId = uuid();
      url += `/pairedId=${this.pairedId}`;
    }

    const channel = this.channel || createChannel({ url });

    addons.setChannel(channel);
    channel.emit(Events.CHANNEL_CREATED, {
      host,
      pairedId: this.pairedId,
      port,
      secured,
    });

    this.addons = addons;
    this.channel = channel;
    this.options = options;
  }

if (!channel || params.resetStorybook) {
      if (onDeviceUI && params.disableWebsockets) {
        channel = new Channel({ async: true });
        this._setInitialStory(initialSelection, shouldPersistSelection);
      } else {
        const host = getHost(params.host || 'localhost');
        const port = `:${params.port || 7007}`;

        const query = params.query || '';
        const { secured } = params;
        const websocketType = secured ? 'wss' : 'ws';
        const httpType = secured ? 'https' : 'http';

        const url = `${websocketType}://${host}${port}/${query}`;
        webUrl = `${httpType}://${host}${port}`;
        channel = createChannel({
          url,
          async: onDeviceUI,
          onError: () => {
            this._setInitialStory(initialSelection, shouldPersistSelection);
          },
        });
      }

      addons.setChannel(channel);
      this._stories.setChannel(channel);

      channel.emit(Events.CHANNEL_CREATED);
    }

    channel.on(Events.GET_STORIES, () => this._sendSetStories());
    channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d));

vscode.commands.registerCommand("extension.connectToStorybooks", () => {
    storybooksChannel = createChannel({ url: `ws://${host}:${port}`, async: true, onError: () => {} })
    registerCallbacks(storybooksChannel)
  })

} catch (err) {
      this.channel = undefined;
    }

    const { secured } = options;
    const websocketType = secured ? 'wss' : 'ws';
    let url = `${websocketType}://${domain}`;
    if (options.manualId) {
      const pairedId = uuid().substr(-6);

      this.pairedId = pairedId;
      url += `/pairedId=${this.pairedId}`;
    }

    if (!this.channel) {
      this.channel = createChannel({ url });
      addons.setChannel(this.channel);
    }
  }