@eyepop.ai/react-native-eyepop 1.15.1

package/src/rn_http_client.ts

@@ -0,0 +1,134 @@
+import 'react-native-polyfill-globals/auto';
+import { Logger } from 'pino';
+import { reactNativeStreamingFetch } from './rn_streaming_fetch';
+import { HttpClient } from '@eyepop.ai/eyepop';
+import TcpSockets from 'react-native-tcp-socket';
+import { ReadableStream } from 'web-streams-polyfill/ponyfill/es6';
+
+/** HTTP client that will work around the RN fetch implementation and truly stream request and response bodies.
+ *
+ * While '{ textStreaming: true }' helps somewhat for the response body, it does not truly stream the response
+ * body, instead it keeps a large buffer and does not stream bytes to the consumer as they come in.
+ * Additionally, it does not support streaming request bodies which forces the consumer to load large files
+ * into memory w/o any possibility to avoid OOMs.
+ *
+ * This implementation implements selected HTTP interactions by using TCP sockets directly. The implementation
+ * is minimal and far from complete, e.g. no redirect support. For that reason, EyePop wil prefer to use the
+ * built-in fetch() except for cases when (a) the request requires a ReadableStream request body, or
+ * (b) the response is supposed to truly stream as indicated by the proprietary init parameter
+ * '{ eyepop: { responseStreaming: true}  }'.
+ *
+ * */
+export async function createHttpClientRN(logger: Logger): Promise<HttpClient> {
+  class ReactNativeHttpClient {
+    private readonly logger: Logger;
+
+    constructor(logger_: Logger) {
+      this.logger = logger_;
+    }
+
+    public async fetch(
+      input: RequestInfo | URL,
+      init?: RequestInit
+    ): Promise<Response> {
+      init ||= {};
+      let streamBody: ReadableStream<Uint8Array> | undefined;
+      if (input instanceof Request && input.body instanceof ReadableStream) {
+        // Request body streaming not supported by RN fetch
+        streamBody = input.body;
+      } else if (init?.body instanceof ReadableStream) {
+        streamBody = init.body;
+        // @ts-ignore
+      } else if (init?.eyepop?.responseStreaming) {
+        const requestBody = input instanceof Request ? input.body : init?.body;
+        if (requestBody !== undefined) {
+          // The limited HTTP post requires a ReadableStream request body
+          if (typeof requestBody === 'string') {
+            streamBody = new ReadableStream({
+              start: (controller) => {
+                controller.enqueue(Buffer.from(requestBody as string, 'utf8'));
+                controller.close();
+              },
+            });
+          } else if (requestBody instanceof Uint8Array) {
+            streamBody = new ReadableStream({
+              start: (controller) => {
+                controller.enqueue(requestBody as Uint8Array);
+                controller.close();
+              },
+            });
+          } else {
+            this.logger.warn(
+              `EyePop responseStreaming requires a request body of type ReadableStream | string | Uint8Array but is ${typeof requestBody}`
+            );
+          }
+        }
+      }
+      if (streamBody) {
+        let url: URL;
+        let method: string;
+        let headers: Headers;
+        if (input instanceof Request) {
+          url = new URL(input.url);
+          method = input.method;
+          headers = input.headers;
+        } else {
+          if (input instanceof URL) {
+            url = input;
+          } else {
+            url = new URL(input);
+          }
+          method = init?.method || 'POST';
+          headers = new Headers(init?.headers);
+        }
+        let contentLength;
+        if (headers.has('content-length')) {
+          contentLength = parseInt(headers.get('content-length') || '', 10);
+        } else {
+          headers.append('Transfer-Encoding', 'chunked');
+        }
+        this.logger.debug(
+          `reactNativeStreamingFetch() BEFORE ${method} ${url}`
+        );
+        const response = await reactNativeStreamingFetch(
+          url,
+          method,
+          headers,
+          streamBody,
+          contentLength,
+          TcpSockets,
+          this.logger
+        );
+        this.logger.debug(`AFTER ${method} ${url} -> ${response.status}`);
+        return response;
+      }
+      // @ts-ignore
+      init.reactNative = { textStreaming: true };
+      const logLine = logLineFromRequest(input, init);
+      this.logger.debug(`ReactNative fetch() BEFORE ${logLine}`);
+      const response = await fetch(input, init);
+      this.logger.debug(`AFTER ${logLine} -> ${response.status}`);
+      return response;
+    }
+
+    public async close(): Promise<void> {}
+
+    public isFullDuplex() {
+      return true;
+    }
+  }
+
+  return new ReactNativeHttpClient(logger);
+}
+
+function logLineFromRequest(
+  input: RequestInfo | URL,
+  init?: RequestInit
+): string {
+  const url = input instanceof Request ? input.url : input;
+  const method =
+    input instanceof Request
+      ? input.method
+      : init?.method || (init?.body !== undefined ? 'POST' : 'GET');
+  return `${method} ${url}`;
+}

package/src/rn_http_header_parser.ts

@@ -0,0 +1,138 @@
+// RFC-2068 Start-Line definitions:
+//   Request-Line: Method SP Request-URI SP HTTP-Version CRLF
+//   Status-Line:  HTTP-Version SP Status-Code SP Reason-Phrase CRLF
+var startLine = /^[A-Z_]+(\/\d\.\d)? /;
+var requestLine = /^([A-Z_]+) (.+) [A-Z]+\/(\d)\.(\d)$/;
+var statusLine = /^[A-Z]+\/(\d)\.(\d) (\d{3}) (.*)$/;
+
+export function parseHttpHeader(lines: string[], onlyHeaders: boolean) {
+  let line = lines[0] || '';
+  let match;
+
+  if (onlyHeaders && startLine.test(line)) {
+    return parseHeaders(lines);
+  } else if ((match = line.match(requestLine)) !== null) {
+    return {
+      method: match[1],
+      url: match[2],
+      version: {
+        major: parseInt(match[3] || '', 10),
+        minor: parseInt(match[4] || '', 10),
+      },
+      headers: parseHeaders(lines),
+    };
+  } else if ((match = line.match(statusLine)) !== null) {
+    return {
+      version: {
+        major: parseInt(match[1] || '', 10),
+        minor: parseInt(match[2] || '', 10),
+      },
+      statusCode: parseInt(match[3] || '', 10),
+      statusMessage: match[4],
+      headers: parseHeaders(lines),
+    };
+  } else {
+    return parseHeaders(lines);
+  }
+}
+
+function parseHeaders(lines: string[]) {
+  var headers = {};
+  var i = 0;
+  var line = lines[i] || '';
+  var index, name, value;
+
+  if (startLine.test(line)) {
+    line = line[++i] || '';
+  }
+
+  while (line) {
+    // subsequent lines in multi-line headers start with whitespace
+    if (line[0] === ' ' || line[0] === '\t') {
+      value += ' ' + line.trim();
+      i++;
+      if (i < lines.length) {
+        line = lines[i] || '';
+      } else {
+        line = '';
+      }
+      continue;
+    }
+
+    if (name && value) {
+      addHeaderLine(name, value, headers);
+    }
+
+    index = line.indexOf(':');
+    name = line.substr(0, index);
+    value = line.substr(index + 1).trim();
+    i++;
+    if (i < lines.length) {
+      line = lines[i] || '';
+    } else {
+      line = '';
+    }
+  }
+
+  if (name && value) {
+    addHeaderLine(name, value, headers);
+  }
+
+  return headers;
+}
+
+// The following function is lifted from:
+// https://github.com/nodejs/node/blob/f1294f5bfd7f02bce8029818be9c92de59749137/lib/_http_incoming.js#L116-L170
+//
+// Add the given (field, value) pair to the message
+//
+// Per RFC2616, section 4.2 it is acceptable to join multiple instances of the
+// same header with a ', ' if the header in question supports specification of
+// multiple values this way. If not, we declare the first instance the winner
+// and drop the second. Extended header fields (those beginning with 'x-') are
+// always joined.
+function addHeaderLine(field: string, value: string, dest: any) {
+  field = field.toLowerCase();
+  switch (field) {
+    // Array headers:
+    case 'set-cookie':
+      if (dest[field] !== undefined) {
+        dest[field].push(value);
+      } else {
+        dest[field] = [value];
+      }
+      break;
+
+    // list is taken from:
+    // https://mxr.mozilla.org/mozilla/source/netwerk/protocol/http/src/nsHttpHeaderArray.cpp
+    case 'content-type':
+    case 'content-length':
+    case 'user-agent':
+    case 'referer':
+    case 'host':
+    case 'authorization':
+    case 'proxy-authorization':
+    case 'if-modified-since':
+    case 'if-unmodified-since':
+    case 'from':
+    case 'location':
+    case 'max-forwards':
+    case 'retry-after':
+    case 'etag':
+    case 'last-modified':
+    case 'server':
+    case 'age':
+    case 'expires':
+      // drop duplicates
+      if (dest[field] === undefined) dest[field] = value;
+      break;
+
+    default:
+      // make comma-separated list
+      if (typeof dest[field] === 'string') {
+        dest[field] += ', ' + value;
+      } else {
+        dest[field] = value;
+      }
+  }
+}

package/src/rn_http_response_parser.ts

@@ -0,0 +1,248 @@
+import 'react-native-polyfill-globals/auto';
+
+import { EyepopLineDecoder } from '@eyepop.ai/eyepop';
+import { parseHttpHeader } from './rn_http_header_parser';
+import { Logger } from 'pino';
+import {
+  ReadableStream,
+  ReadableStreamDefaultController,
+} from 'web-streams-polyfill/ponyfill/es6';
+
+enum ResponseState {
+  RECEIVING_HEADER,
+  RECEIVING_BODY,
+  RECEIVING_BODY_CHUNKED,
+  RECEIVING_COMPLETED,
+}
+
+export class ResponseParser {
+  private error: any;
+  private readonly logger: Logger;
+  private readonly resolve: (value: Response | PromiseLike<Response>) => void;
+  private readonly reject: (reason?: any) => void;
+  private responseChunkRemainder = 0;
+  private responseReadBuffer: Buffer | undefined;
+  private responseState: ResponseState;
+
+  private pullController: any;
+  private pullResolve: (() => void) | undefined;
+  private pullReject: ((reason?: any) => void) | undefined;
+
+  constructor(
+    logger: Logger,
+    resolve: (value: Response | PromiseLike<Response>) => void,
+    reject: (reason?: any) => void
+  ) {
+    this.logger = logger;
+    this.resolve = resolve;
+    this.reject = reject;
+    this.error = null;
+    this.responseReadBuffer = undefined;
+    this.responseState = ResponseState.RECEIVING_HEADER;
+    this.pullController = undefined;
+    this.pullResolve = undefined;
+    this.pullReject = undefined;
+  }
+
+  public processResponseReadBuffer(data: Buffer): boolean {
+    if (this.error) {
+      this.logger.info(
+        `RN http streamed response, received ${data.length} bytes in error mode`
+      );
+      return false;
+    }
+    if (this.responseReadBuffer) {
+      this.responseReadBuffer = Buffer.concat([this.responseReadBuffer, data]);
+    } else {
+      this.responseReadBuffer = Buffer.from(data.subarray());
+    }
+
+    if (this.responseState === ResponseState.RECEIVING_COMPLETED) {
+      if (this.pullController) {
+        this.pullController.close();
+        if (this.pullResolve) {
+          this.pullResolve();
+        }
+      }
+      return false;
+    } else if (this.responseState === ResponseState.RECEIVING_HEADER) {
+      const headerEnd = this.responseReadBuffer.indexOf('\r\n\r\n');
+      if (headerEnd >= 0) {
+        let headerChunk = this.responseReadBuffer.subarray(0, headerEnd + 4);
+        this.responseReadBuffer = Buffer.from(
+          this.responseReadBuffer.subarray(headerEnd + 4)
+        );
+        const maxHeaderLines = 128;
+        let responseHeaderLines: string[] = [];
+        const lineDecoder = new EyepopLineDecoder();
+        for (const line of lineDecoder.decode(headerChunk)) {
+          if (line.length > 0) {
+            responseHeaderLines.push(line);
+            if (responseHeaderLines.length > maxHeaderLines) {
+              this.error = `Response header exceeds ${maxHeaderLines} lines`;
+              this.reject(this.error);
+              return false;
+            }
+          }
+        }
+        let responseHeader: any = parseHttpHeader(responseHeaderLines, false);
+        if (responseHeader.statusCode === undefined) {
+          this.logger.warn(
+            `Could not find status header in HTTP response ${JSON.stringify(responseHeader)}`
+          );
+          this.reject('missing status header in HTTP response');
+          return false;
+        }
+
+        const headers = new Headers(responseHeader.headers);
+        if (headers.has('transfer-encoding')) {
+          if (headers.get('transfer-encoding')?.toLowerCase() === 'chunked') {
+            this.responseState = ResponseState.RECEIVING_BODY_CHUNKED;
+            this.responseChunkRemainder = 0;
+          } else {
+            this.error = `Response with unsupported transfer-encoding '${headers.get('transfer-encoding')}'`;
+            this.reject(this.error);
+            return false;
+          }
+        } else if (headers.has('content-length')) {
+          this.responseState = ResponseState.RECEIVING_BODY;
+          this.responseChunkRemainder = parseInt(
+            headers.get('content-length') || '-1',
+            10
+          );
+        } else {
+          this.responseState = ResponseState.RECEIVING_BODY_CHUNKED;
+          this.responseChunkRemainder = 0;
+        }
+        const responseBody = new ReadableStream<Uint8Array>({
+          pull: (controller) => {
+            if (
+              this.error ||
+              this.responseState === ResponseState.RECEIVING_COMPLETED
+            ) {
+              // done with the whole request
+              return;
+            }
+            if (this.pull(controller)) {
+              // one chunk enqueued, fulfilled the pull() protocol
+              return;
+            }
+            // nothing to enqueue yet, need to defer top a promise
+            return new Promise((resolve, reject) => {
+              if (this.pullController) {
+                if (this.pullReject) {
+                  this.pullReject('pull, we got a pending controller already');
+                }
+              }
+              this.pullController = controller;
+              this.pullResolve = resolve;
+              this.pullReject = reject;
+            });
+          },
+          cancel: (reason) => {
+            if (!this.error) {
+              this.error = `cancelled: ${reason}`;
+              this.reject(this.error);
+            }
+          },
+        });
+        this.resolve(
+          // @ts-ignore
+          new Response(responseBody, {
+            status: responseHeader.statusCode,
+            statusText: responseHeader.statusText,
+            headers: headers,
+          })
+        );
+      }
+    } else if (this.pullController) {
+      if (this.pull(this.pullController)) {
+        this.pullController = undefined;
+        if (this.pullResolve) {
+          this.pullResolve();
+        }
+        this.pullResolve = undefined;
+        this.pullReject = undefined;
+      }
+    }
+    return true;
+  }
+
+  private pull(
+    controller: ReadableStreamDefaultController<Uint8Array>
+  ): boolean {
+    if (this.responseState === ResponseState.RECEIVING_COMPLETED) {
+      controller.close();
+      return false;
+    }
+    if (this.responseReadBuffer === undefined) {
+      return false;
+    }
+    if (this.responseState === ResponseState.RECEIVING_BODY) {
+      controller.enqueue(this.responseReadBuffer);
+      this.responseChunkRemainder -= this.responseReadBuffer.length;
+      this.responseReadBuffer = undefined;
+      if (this.responseChunkRemainder <= 0) {
+        this.responseState = ResponseState.RECEIVING_COMPLETED;
+        controller.close();
+      }
+      return true;
+    } else if (this.responseState === ResponseState.RECEIVING_BODY_CHUNKED) {
+      while (this.responseReadBuffer.length > 1) {
+        if (this.responseChunkRemainder === 0) {
+          // need to find the new chunk length
+          let chunkHeaderEnd = 0;
+          while (this.responseReadBuffer.length >= 2 && chunkHeaderEnd === 0) {
+            chunkHeaderEnd = this.responseReadBuffer.indexOf('\r\n');
+            if (chunkHeaderEnd === 0) {
+              // skip closing \r\n line of a previous chunk
+              this.responseReadBuffer = Buffer.from(
+                this.responseReadBuffer.subarray(2)
+              );
+            }
+          }
+          if (chunkHeaderEnd > 0) {
+            this.responseChunkRemainder = parseInt(
+              Buffer.from(this.responseReadBuffer, 0, chunkHeaderEnd).toString(
+                'utf8'
+              ),
+              16
+            );
+            this.responseReadBuffer = Buffer.from(
+              this.responseReadBuffer.subarray(chunkHeaderEnd + 2)
+            );
+            if (this.responseChunkRemainder <= 0) {
+              this.responseState = ResponseState.RECEIVING_COMPLETED;
+              controller.close();
+              return true;
+            }
+          } else if (this.responseReadBuffer.length > 64) {
+            this.error =
+              'Cannot find chunked encoding header within 64 bytes, given up';
+            controller.error(this.error);
+          }
+        }
+        if (
+          this.responseChunkRemainder > 0 &&
+          this.responseReadBuffer.length > 0
+        ) {
+          const chunk = Buffer.from(
+            this.responseReadBuffer.subarray(0, this.responseChunkRemainder)
+          );
+          this.responseReadBuffer = Buffer.from(
+            this.responseReadBuffer.subarray(this.responseChunkRemainder)
+          );
+          controller.enqueue(chunk);
+          this.responseChunkRemainder -= chunk.length;
+          return true;
+        } else {
+          break;
+        }
+      }
+    } else {
+      this.error = `Received more data in wrong state ${this.responseState}`;
+      controller.error(this.error);
+    }
+    return false;
+  }
+}

package/src/rn_local_file.ts

@@ -0,0 +1,43 @@
+import 'react-native-polyfill-globals/auto';
+import { PathSource, StreamSource } from '@eyepop.ai/eyepop';
+import { Logger } from 'pino';
+import { ReadableStream } from 'web-streams-polyfill/ponyfill/es6';
+
+import { FileSystem } from 'react-native-file-access';
+
+export async function resolvePathRN(
+  source: PathSource,
+  _: Logger
+): Promise<StreamSource> {
+  const bufferSize = 1024 * 1024;
+  let pos = 0;
+  const size = (await FileSystem.stat(source.path)).size;
+  let eof = false;
+  const stream = new ReadableStream({
+    async pull(controller: any) {
+      if (eof) {
+        return;
+      }
+      const chunkSize = Math.min(bufferSize, size - pos);
+      const chunkAsB64 = await FileSystem.readFileChunk(
+        source.path,
+        pos,
+        chunkSize,
+        'base64'
+      );
+      if (chunkAsB64.length > 0) {
+        const chunk = Buffer.from(chunkAsB64, 'base64').subarray(0, chunkSize);
+        controller.enqueue(chunk);
+        pos += chunk.length;
+      } else {
+        eof = true;
+        controller.close();
+      }
+    },
+  });
+  return {
+    stream: stream,
+    size: size,
+    mimeType: source.mimeType || 'image/*',
+  };
+}

package/src/rn_streaming_fetch.ts

@@ -0,0 +1,131 @@
+import 'react-native-polyfill-globals/auto';
+
+import { Logger } from 'pino';
+import { ResponseParser } from './rn_http_response_parser';
+import { ReadableStream } from 'web-streams-polyfill/ponyfill/es6';
+
+export async function reactNativeStreamingFetch(
+  url: URL,
+  method: string,
+  headers: Headers,
+  body: ReadableStream<Uint8Array> | undefined,
+  contentLength: number | undefined,
+  sockets: any,
+  logger: Logger
+): Promise<Response> {
+  const isHttps = url.protocol === 'https:';
+  const port = url.port ? parseInt(url.port, 10) : isHttps ? 443 : 80;
+  return new Promise((resolve, reject) => {
+    const connectOptions = {
+      port: port,
+      host: url.hostname,
+      reuseAddress: true,
+    };
+    const clientSocket = new sockets.Socket();
+    const client = isHttps ? new sockets.TLSSocket(clientSocket) : clientSocket;
+
+    let error: any;
+    const responseParser = new ResponseParser(logger, resolve, (reason) => {
+      error = reason;
+      reject(error);
+      client.destroy();
+    });
+
+    client.on('data', function (data: Buffer) {
+      responseParser.processResponseReadBuffer(data);
+    });
+
+    client.on('error', function (err: any) {
+      logger.info(`error: ${err}`);
+      if (!error) {
+        error = err;
+        reject(error);
+      }
+      client.destroy();
+    });
+
+    client.on('close', function () {
+      if (!error) {
+        error = 'socket closed';
+        reject(error);
+      }
+    });
+
+    client.connect(connectOptions, async () => {
+      const headerLines = [
+        `${method} ${url.pathname}${url.search} HTTP/1.1\r\n`,
+        `Host: ${url.host}\r\n`,
+      ];
+      headers.forEach((value: string, key: string) => {
+        headerLines.push(`${key}: ${value}\r\n`);
+      });
+      headerLines.push('\r\n');
+
+      const textEncoder = new TextEncoder();
+      const headerChunk = headerLines.join('');
+      const bodyReader = body ? body.getReader() : undefined;
+
+      let headerEnqueued = false;
+      let eof = false;
+      const readableHeaderChunkedBody = new ReadableStream<Uint8Array>({
+        async pull(controller: any) {
+          if (!headerEnqueued) {
+            controller.enqueue(headerChunk);
+            headerEnqueued = true;
+            return;
+          }
+          if (eof) {
+            controller.close();
+            return;
+          }
+          if (!bodyReader) {
+            controller.close();
+            return;
+          }
+          const chunk = await bodyReader.read();
+          if (chunk.value) {
+            let outputChunk;
+            if (contentLength) {
+              outputChunk = chunk.value;
+            } else {
+              outputChunk = Buffer.concat([
+                textEncoder.encode(`${chunk.value.length.toString(16)}\r\n`),
+                chunk.value,
+                textEncoder.encode(`\r\n`),
+              ]);
+            }
+            controller.enqueue(outputChunk);
+          } else if (chunk.done) {
+            if (!contentLength) {
+              controller.enqueue(Buffer.from(`0\r\n\r\n`, 'utf8'));
+            }
+            eof = true;
+          }
+        },
+      });
+
+      const readableHeaderChunkedBodyReader =
+        readableHeaderChunkedBody.getReader();
+      const pipeChunk = async () => {
+        while (true) {
+          try {
+            const chunk = await readableHeaderChunkedBodyReader.read();
+            if (chunk.value) {
+              if (!client.write(chunk.value)) {
+                // interrupt this loop and wait for "drain" event
+                break;
+              }
+            } else if (chunk.done) {
+              break;
+            }
+          } catch (e) {
+            logger.error(e);
+            break;
+          }
+        }
+      };
+      client.on('drain', pipeChunk);
+      await pipeChunk();
+    });
+  });
+}