How to use @firebase/webchannel-wrapper - 8 common examples

fn: (param?: T) => void
    ): void => {
      // TODO(dimond): closure typing seems broken because WebChannel does
      // not implement goog.events.Listenable
      channel.listen(type, (param: unknown) => {
        try {
          fn(param as T);
        } catch (e) {
          setTimeout(() => {
            throw e;
          }, 0);
        }
      });
    };

    unguardedEventListen(WebChannel.EventType.OPEN, () => {
      if (!closed) {
        log.debug(LOG_TAG, 'WebChannel transport opened.');
      }
    });

    unguardedEventListen(WebChannel.EventType.CLOSE, () => {
      if (!closed) {
        closed = true;
        log.debug(LOG_TAG, 'WebChannel transport closed');
        streamBridge.callOnClose();
      }
    });

    unguardedEventListen(WebChannel.EventType.ERROR, err => {
      if (!closed) {
        closed = true;

Code.UNAVAILABLE,
            'The operation could not be completed'
          )
        );
      }
    });

    // WebChannel delivers message events as array. If batching is not enabled
    // (it's off by default) each message will be delivered alone, resulting in
    // a single element array.
    interface WebChannelResponse {
      data: Resp[];
    }

    unguardedEventListen(
      WebChannel.EventType.MESSAGE,
      msg => {
        if (!closed) {
          const msgData = msg!.data[0];
          assert(!!msgData, 'Got a webchannel message without data.');
          // TODO(b/35143891): There is a bug in One Platform that caused errors
          // (and only errors) to be wrapped in an extra array. To be forward
          // compatible with the bug we need to check either condition. The latter
          // can be removed once the fix has been rolled out.
          // Use any because msgData.error is not typed.
          const msgDataOrError: WebChannelError | object = msgData;
          const error =
            msgDataOrError.error ||
            (msgDataOrError as WebChannelError[])[0]?.error;
          if (error) {
            log.debug(LOG_TAG, 'WebChannel received error:', error);
            // error.status will be a string like 'OK' or 'NOT_FOUND'.

openStream(
    rpcName: string,
    token: Token | null
  ): Stream {
    const urlParts = [
      this.baseUrl,
      '/',
      RPC_STREAM_SERVICE,
      '/',
      rpcName,
      '/channel'
    ];
    const webchannelTransport = createWebChannelTransport();
    const request: WebChannelOptions = {
      // Background channel test avoids the initial two test calls and decreases
      // initial cold start time.
      // TODO(dimond): wenboz@ mentioned this might affect use with proxies and
      // we should monitor closely for any reports.
      backgroundChannelTest: true,
      // Required for backend stickiness, routing behavior is based on this
      // parameter.
      httpSessionIdParam: 'gsessionid',
      initMessageHeaders: {},
      messageUrlParams: {
        // This param is used to improve routing and project isolation by the
        // backend and must be included in every request.
        database: `projects/${this.databaseId.projectId}/databases/${this.databaseId.database}`
      },
      sendRawJson: true,

xhr.listenOnce(EventType.COMPLETE, () => {
        try {
          switch (xhr.getLastErrorCode()) {
            case ErrorCode.NO_ERROR:
              const json = xhr.getResponseJson() as Resp;
              log.debug(LOG_TAG, 'XHR received:', JSON.stringify(json));
              resolve(json);
              break;
            case ErrorCode.TIMEOUT:
              log.debug(LOG_TAG, 'RPC "' + rpcName + '" timed out');
              reject(
                new FirestoreError(Code.DEADLINE_EXCEEDED, 'Request time out')
              );
              break;
            case ErrorCode.HTTP_ERROR:
              const status = xhr.getStatus();
              log.debug(
                LOG_TAG,
                'RPC "' + rpcName + '" failed with status:',
                status,
                'response text:',
                xhr.getResponseText()
              );
              if (status > 0) {
                const responseError = (xhr.getResponseJson() as WebChannelError)
                  .error;
                if (
                  !!responseError &&
                  !!responseError.status &&
                  !!responseError.message
                ) {

xhr.listenOnce(EventType.COMPLETE, () => {
        try {
          switch (xhr.getLastErrorCode()) {
            case ErrorCode.NO_ERROR:
              const json = xhr.getResponseJson() as Resp;
              log.debug(LOG_TAG, 'XHR received:', JSON.stringify(json));
              resolve(json);
              break;
            case ErrorCode.TIMEOUT:
              log.debug(LOG_TAG, 'RPC "' + rpcName + '" timed out');
              reject(
                new FirestoreError(Code.DEADLINE_EXCEEDED, 'Request time out')
              );
              break;
            case ErrorCode.HTTP_ERROR:
              const status = xhr.getStatus();
              log.debug(
                LOG_TAG,
                'RPC "' + rpcName + '" failed with status:',
                status,

xhr.listenOnce(EventType.COMPLETE, () => {
        try {
          switch (xhr.getLastErrorCode()) {
            case ErrorCode.NO_ERROR:
              const json = xhr.getResponseJson() as Resp;
              log.debug(LOG_TAG, 'XHR received:', JSON.stringify(json));
              resolve(json);
              break;
            case ErrorCode.TIMEOUT:
              log.debug(LOG_TAG, 'RPC "' + rpcName + '" timed out');
              reject(
                new FirestoreError(Code.DEADLINE_EXCEEDED, 'Request time out')
              );
              break;
            case ErrorCode.HTTP_ERROR:
              const status = xhr.getStatus();
              log.debug(
                LOG_TAG,
                'RPC "' + rpcName + '" failed with status:',
                status,
                'response text:',
                xhr.getResponseText()
              );
              if (status > 0) {
                const responseError = (xhr.getResponseJson() as WebChannelError)

return new Promise((resolve: Resolver, reject: Rejecter) => {
      const xhr = new XhrIo();
      xhr.listenOnce(EventType.COMPLETE, () => {
        try {
          switch (xhr.getLastErrorCode()) {
            case ErrorCode.NO_ERROR:
              const json = xhr.getResponseJson() as Resp;
              log.debug(LOG_TAG, 'XHR received:', JSON.stringify(json));
              resolve(json);
              break;
            case ErrorCode.TIMEOUT:
              log.debug(LOG_TAG, 'RPC "' + rpcName + '" timed out');
              reject(
                new FirestoreError(Code.DEADLINE_EXCEEDED, 'Request time out')
              );
              break;
            case ErrorCode.HTTP_ERROR:
              const status = xhr.getStatus();
              log.debug(

return new Promise((resolve: Resolver, reject: Rejecter) => {
      const xhr = new XhrIo();
      xhr.listenOnce(EventType.COMPLETE, () => {
        try {
          switch (xhr.getLastErrorCode()) {
            case ErrorCode.NO_ERROR:
              const json = xhr.getResponseJson() as Resp;
              log.debug(LOG_TAG, 'XHR received:', JSON.stringify(json));
              resolve(json);
              break;
            case ErrorCode.TIMEOUT:
              log.debug(LOG_TAG, 'RPC "' + rpcName + '" timed out');
              reject(
                new FirestoreError(Code.DEADLINE_EXCEEDED, 'Request time out')
              );
              break;
            case ErrorCode.HTTP_ERROR:
              const status = xhr.getStatus();