@jolibox/implement 1.1.4-beta.10

package/src/native/js-core/message-port.ts

@@ -0,0 +1,52 @@
+import { normalizeParams } from './utils';
+import { AnyFunction } from '@jolibox/types';
+
+declare const globalThis: {
+  onmessage?: (msg: MessageEvent) => void;
+  ttJSBridge: {
+    invokeHandler: AnyFunction;
+    subscribeHandler: AnyFunction;
+  };
+};
+
+interface MessageEvent {
+  data: string;
+  ports: MessagePort[];
+}
+
+interface MessagePort {
+  onmessage: (msg: MessageEvent) => void;
+  postMessage: (msg: string) => void;
+  publish: (event: string, data: Record<string, unknown>) => void;
+}
+
+type PublishEvent = ['publish', string, string];
+type InvokeEvent = ['invoke', number, string];
+
+export let messagePort: MessagePort | undefined;
+
+export function initMessagePort() {
+  globalThis.onmessage = function (msg) {
+    if (msg.data !== 'msg:setup') {
+      return;
+    }
+
+    [messagePort] = msg.ports;
+    messagePort.onmessage = function (message) {
+      const data: PublishEvent | InvokeEvent = JSON.parse(message.data);
+      if (data[0] === 'publish') {
+        globalThis.ttJSBridge.subscribeHandler(data[1], data[2]);
+      } else if (data[0] === 'invoke') {
+        globalThis.ttJSBridge.invokeHandler(data[1], data[2]);
+      }
+    };
+
+    messagePort.publish = function (event, params) {
+      const data = normalizeParams(params as Record<string, unknown>, 'messagePort');
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      messagePort!.postMessage(JSON.stringify(['publish', event, JSON.stringify(data)]));
+    };
+
+    messagePort.postMessage('msg:setup:ok');
+  };
+}

package/src/native/js-core/utils.ts

@@ -0,0 +1,9 @@
+export function normalizeParams(params: Record<string, unknown>, type: string) {
+  return {
+    params,
+    __extra: {
+      startTime: Date.now(),
+      type
+    }
+  };
+}

package/src/native/network/create-fetch.ts

@@ -0,0 +1,237 @@
+import { isString, logger, Deferred, isObject, hostEmitter } from '@jolibox/common';
+import { reportNetworkAPI } from './report';
+import { RequestFrom } from './types';
+import { FetchResponse, FetchOptions } from './types';
+import { invokeNative, onNative } from '@/native/bootstrap/bridge';
+import { AnyFunction } from '@jolibox/types';
+import { reportError } from '@/common/report/errors/report';
+import { createAPIError } from '@/common/report/errors';
+
+type Fetch = <T>(
+  url: string,
+  innerOptions?: FetchOptions & {
+    baseUrl?: string;
+  }
+) => Promise<{
+  url: string;
+  timeout?: number;
+  method: string;
+  response: FetchResponse<T>;
+}>;
+
+type PublicFetch = <T>(
+  url: string,
+  options?: FetchOptions
+) => Promise<{
+  url: string;
+  timeout?: number;
+  method: string;
+  response: FetchResponse<T>;
+}>;
+
+const processUrl = (url: string, options?: FetchOptions & { baseUrl?: string }): string => {
+  if (/^https?:\/\//.test(url)) {
+    return url;
+  }
+  const query = options?.query;
+  const searchParams = new URLSearchParams(query);
+  const search = searchParams.toString();
+  return options?.baseUrl
+    ? `${options.baseUrl}${url}${search ? `?${search}` : ''}`
+    : `${url}${search ? `?${search}` : ''}`;
+};
+
+export function createFetch(
+  createMethod: 'createRequestTaskSync',
+  operateMethod: 'operateRequestTaskSync',
+  options?: {
+    baseUrl?: string;
+    type: 'public';
+  }
+): PublicFetch;
+
+export function createFetch(
+  createMethod: 'createRequestTaskSync',
+  operateMethod: 'operateRequestTaskSync',
+  options?: {
+    baseUrl?: string;
+    type: 'inner';
+    defaultHeaders?: Record<string, string>;
+  }
+): Fetch;
+
+export function createFetch(
+  createMethod: 'createRequestTaskSync',
+  operateMethod: 'operateRequestTaskSync',
+  options?: {
+    baseUrl?: string;
+    type: 'inner' | 'public';
+    defaultHeaders?: Record<string, string>;
+  }
+) {
+  const promiseMap = new Map<string, { resolve: AnyFunction; reject: AnyFunction }>();
+  const baseUrl = options?.baseUrl ?? `https://api.jolibox.com`;
+  const type = options?.type ?? 'public';
+  const defaultHeaders = options?.defaultHeaders ?? {};
+
+  onNative('onRequestTaskStateChange', (res) => {
+    if (typeof res.requestTaskId !== 'string') return;
+    const task = promiseMap.get(res.requestTaskId);
+    if (!task) return;
+
+    if (res.state === 'success') {
+      const { requestTaskId, state, ...rest } = res;
+      task.resolve(rest);
+      promiseMap.delete(requestTaskId);
+    } else if (res.state === 'fail') {
+      const { requestTaskId, state, ...rest } = res;
+      task.reject(rest);
+      promiseMap.delete(requestTaskId);
+    } else {
+      logger.warn(`onRequestTaskStateChange unknown event`, res);
+    }
+  });
+
+  hostEmitter.on('onLoginComplete', ({ isLogin, token }) => {
+    if (isLogin && token) {
+      defaultHeaders['X-JOLI-TOKEN'] = token;
+    }
+  });
+
+  const fetch: Fetch = async (originUrl, options = {}) => {
+    const startTime = Date.now();
+
+    const url = processUrl(originUrl, { ...options, baseUrl });
+    const {
+      method = 'GET',
+      responseType = 'text',
+      dataType = 'json',
+      timeout,
+      enableCache = false,
+      appendHostCookie = true
+    } = options;
+
+    const header = Object.assign({ 'content-type': 'application/json' }, defaultHeaders, options.header);
+
+    // modify params
+    const params = {
+      url,
+      method,
+      header,
+      enableCache,
+      responseType,
+      appendHostCookie
+    } as any;
+
+    if (method == 'POST' || method == 'PUT') {
+      const data = normalizeData(options.data, header['content-type']);
+      params['data'] = data;
+    }
+
+    if (timeout) {
+      Object.assign(params, { timeout });
+    }
+    const {
+      data: { requestTaskId }
+    } = invokeNative(createMethod, params);
+
+    if (typeof requestTaskId !== 'string') {
+      throw createAPIError({
+        code: -1,
+        msg: 'requestTaskId is not a string'
+      });
+    }
+
+    const report = (state: 'success' | 'fail', response: unknown) => {
+      reportNetworkAPI('request', url, {
+        state,
+        startTime,
+        endTime: Date.now(),
+        params,
+        response: response as FetchResponse,
+        requestId: requestTaskId,
+        requestFrom: type == 'public' ? RequestFrom.PUBLIC : RequestFrom.INNER
+      });
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { resolve, reject, promise } = new Deferred<FetchResponse<any>>();
+    promiseMap.set(requestTaskId, { resolve, reject });
+
+    try {
+      const res = await promise;
+      report('success', res);
+      let { data } = res;
+      if (dataType === 'json' && typeof data === 'string') {
+        data = parseJSON(data);
+      }
+      return {
+        url,
+        timeout,
+        method,
+        response: { ...res, data }
+      };
+    } catch (err: unknown) {
+      const error = err as {
+        errMsg?: string;
+        errNo?: number;
+        errorType?: string;
+        errorCode?: number;
+        prefetchDetail?: number;
+        isPrefetch?: boolean;
+      };
+
+      if (isObject(error)) {
+        const { errMsg, prefetchDetail, isPrefetch, errNo } = error;
+        if (isString(errMsg)) {
+          report('fail', {
+            errMsg,
+            isPrefetch,
+            prefetchDetail
+          });
+          reportError(createAPIError({ code: -1, msg: errMsg }, { errNo: errNo as number, errMsg }));
+        }
+      }
+      throw err;
+    }
+  };
+
+  return fetch;
+}
+
+export function parseJSON(data: string) {
+  try {
+    //
+    // 之所以要 trim, 是因为有些开发者不是按照标准的 application/json 返回的, 而是使用 text/html 返回
+    // 而 text/html 返回的时候前后有可能出现 &#65279 字符, 导致 JSON.parse 失败
+    return JSON.parse(data.trim());
+  } catch {
+    return data;
+  }
+}
+
+export function normalizeData(data: unknown, contentType = 'application/json') {
+  const type = contentType.toLowerCase();
+
+  if (data === undefined) {
+    return '';
+  }
+
+  if (typeof data === 'string' || data instanceof ArrayBuffer) {
+    return data;
+  }
+
+  if (type.includes('application/x-www-form-urlencoded')) {
+    return JSON.stringify(data as JSON);
+  }
+
+  if (type.includes('application/json')) {
+    return JSON.stringify(data);
+  }
+
+  if (typeof data === 'object') {
+    return JSON.stringify(data);
+  }
+
+  return String(data);
+}

package/src/native/network/index.ts

@@ -0,0 +1,15 @@
+import { xUserAgent } from '@/common/http/xua';
+import { createFetch } from './create-fetch';
+import { context } from '@/common/context';
+
+/**
+ * inner fetch
+ */
+export const innerFetch = createFetch('createRequestTaskSync', 'operateRequestTaskSync', {
+  type: 'inner',
+  baseUrl: context.testMode ? 'https://stg-api.jolibox.com' : 'https://api.jolibox.com',
+  defaultHeaders: {
+    'x-user-agent': xUserAgent(),
+    'X-JOLI-TOKEN': context.hostUserInfo?.token ?? ''
+  }
+});

package/src/native/network/report.ts

@@ -0,0 +1,58 @@
+import { FetchResponse, DownLoadResponse, UpLoadResponse, RequestFrom } from './types';
+
+import { track } from '@/native/report';
+
+type NetworkResponse = FetchResponse | DownLoadResponse | UpLoadResponse;
+interface ReportNetworkOptions {
+  state: 'success' | 'fail';
+  params: Record<string, unknown>;
+  response: NetworkResponse;
+  startTime: number;
+  endTime: number;
+  callbackStartTime?: number;
+  callbackEndTime?: number;
+  requestId?: string;
+  requestFrom?: RequestFrom; // 区分内部/外部请求
+}
+
+interface RequestResultData {
+  duration: number;
+  request_type: string;
+  url: string;
+  result: string;
+  error_msg: unknown;
+  socket_reused?: number; // reused
+  joli_request_number?: number; // 请求序号
+  request_from?: string; // 'public' / 'inner'
+}
+// report max count = 10
+let requestNumber = 0;
+const requestNumberLimit = 10;
+
+export function reportNetworkAPI(method: string, url: string, options: ReportNetworkOptions): void {
+  const { response, startTime, endTime, requestFrom } = options;
+  const { errMsg = '', profile = {} } = response as FetchResponse;
+
+  const duration = endTime - startTime;
+
+  const trackData: RequestResultData = {
+    duration,
+    request_type: method,
+    url: url.split('?')[0],
+    result: options.state,
+    error_msg: options.state === 'fail' ? errMsg : '',
+    socket_reused: profile.socketReused ? 1 : 0,
+    request_from: requestFrom
+  };
+
+  // 用户请求上报最多10个，内部的全部上报
+  if (
+    (requestFrom === RequestFrom.PUBLIC && requestNumber < requestNumberLimit) ||
+    requestFrom === RequestFrom.INNER
+  ) {
+    trackData.joli_request_number = requestNumber++;
+    setTimeout(() => {
+      track('joliboxNetRequestResult', trackData as unknown as Record<string, unknown>);
+    }, 500);
+  }
+}

package/src/native/network/types.ts

@@ -0,0 +1,77 @@
+interface Profile {
+  socketReused?: boolean; // 是否复用连接
+}
+
+export interface DownLoadOptions {
+  url: string;
+  header: Record<string, unknown>;
+  filePath?: string;
+  appendHostCookie?: boolean;
+  timeout?: number;
+}
+
+export interface DownLoadResponse {
+  statusCode?: number;
+  tempFilePath?: string;
+  errMsg?: string;
+  profile?: Profile;
+  filePath?: string;
+  header?: Record<string, string>;
+}
+
+export type HTTPMethod =
+  | 'GET'
+  | 'OPTIONS'
+  | 'HEAD'
+  | 'POST'
+  | 'PUT'
+  | 'DELETE'
+  | 'TRACE'
+  | 'CONNECT'
+  | 'PATCH';
+
+export interface FetchOptions {
+  method?: HTTPMethod;
+  data?: Record<string, unknown> | string | ArrayBuffer;
+  query?: Record<string, string>;
+  header?: Record<string, string>;
+  dataType?: string; // 'json'
+  timeout?: number;
+  enableCache?: boolean;
+  responseType?: string; // 'text' | 'arraybuffer';
+  appendHostCookie?: boolean;
+}
+
+export interface FetchResponse<T = string | JSON | ArrayBuffer | undefined> {
+  header?: Record<string, string>;
+  code?: string;
+  message?: string;
+  data: T;
+  errMsg?: string;
+  prefetchDetail?: number;
+  size?: number;
+  profile?: Profile;
+}
+
+export interface UpLoadOptions {
+  url: string;
+  filePath: string;
+  name: string;
+  header: Record<string, unknown>;
+  formData: Record<string, unknown>;
+  appendHostCookie?: boolean;
+  timeout?: number;
+}
+
+export interface UpLoadResponse<T = string | Record<string, unknown> | ArrayBuffer | undefined> {
+  statusCode?: number;
+  data: T;
+  errMsg?: string;
+  progress?: number;
+  profile?: Profile;
+}
+
+export enum RequestFrom {
+  PUBLIC = 'public',
+  INNER = 'inner'
+}

package/src/native/network/utils.ts

@@ -0,0 +1,90 @@
+import { isObject } from '@jolibox/common';
+
+export type HTTPMethod =
+  | 'GET'
+  | 'OPTIONS'
+  | 'HEAD'
+  | 'POST'
+  | 'PUT'
+  | 'DELETE'
+  | 'TRACE'
+  | 'CONNECT'
+  | 'PATCH';
+
+export function normalizeHeader(header: unknown) {
+  const normalized: Record<string, string> = {};
+
+  if (!isObject(header)) {
+    return normalized;
+  }
+  for (const [_key, value] of Object.entries(header)) {
+    const key = _key.toLocaleLowerCase();
+    if (!value) {
+      normalized[key] = '';
+    } else if (typeof value === 'object') {
+      normalized[key] = Object.prototype.toString.call(value);
+    } else {
+      normalized[key] = String(value);
+    }
+  }
+
+  return normalized;
+}
+
+export function normalizeFormData(formData: unknown) {
+  const normalized: Record<string, string> = {};
+
+  if (!isObject(formData)) {
+    return normalized;
+  }
+
+  for (const [key, value] of Object.entries(formData)) {
+    if (!value) {
+      normalized[key] = '';
+    } else if (typeof value === 'object') {
+      normalized[key] = Object.prototype.toString.call(value);
+    } else {
+      normalized[key] = String(value);
+    }
+  }
+
+  return normalized;
+}
+
+export function normalizeMethod(method = 'GET') {
+  if (method === '') {
+    return 'POST';
+  }
+
+  const _method = method.toUpperCase();
+
+  if (['GET', 'OPTIONS', 'HEAD', 'POST', 'PUT', 'DELETE', 'TRACE', 'CONNECT', 'PATCH'].includes(_method)) {
+    return _method as HTTPMethod;
+  }
+
+  return 'GET';
+}
+
+export function normalizeTimeout(time: number | undefined, unlimited = false) {
+  if (!time) return undefined;
+  if (unlimited || (time > 0 && time <= 60e3)) return Math.ceil(time);
+  return 60e3;
+}
+
+/**
+ * modify url
+ */
+export function dirtyURL(url: string, method: HTTPMethod, data?: unknown) {
+  if (['POST', 'PUT', 'PATCH'].includes(method)) return url;
+
+  if (!isObject(data)) return url;
+
+  const [_url, search = ''] = url.split('?');
+
+  const query = JSON.stringify({
+    ...JSON.parse(search),
+    ...data
+  });
+
+  return `${_url}?${query}`;
+}

package/src/native/report/errors/index.ts

@@ -0,0 +1,27 @@
+/**
+ * 端侧上报的实现逻辑
+ */
+import '@/common/report/errors/report/listeners';
+import { errorReportEmitter } from '@/common/report/errors';
+import { ErrorData } from '@/common/report/errors/report';
+import { logger } from '@jolibox/common';
+import { applyNative, invokeNative } from '@/native/bootstrap/bridge';
+
+errorReportEmitter.on('GLOBAL_ERROR', (error, errorData: ErrorData) => {
+  const extra = {
+    message: error.message,
+    stack: error.stack ?? '',
+    errorType: error.name,
+    source: 0
+  };
+
+  invokeNative('trackAsync', {
+    event: 'reportJsError',
+    data: extra
+  });
+});
+
+errorReportEmitter.on('GLOBAL_USER_ERROR', (error, errorData: ErrorData) => {
+  // TODO: User Error
+  logger.log('UserError', error, errorData);
+});

package/src/native/report/index.ts

@@ -0,0 +1,51 @@
+import './errors';
+import { createCommands, isObject, isString, EventEmitter } from '@jolibox/common';
+export * from '../../common/report/types';
+import { createTracks, EProject, ReportHandler } from '@/common/report';
+import { context } from '@/common/context';
+import { NativeTaskTracker } from './task-tracker';
+import { invokeNative } from '../bootstrap/bridge';
+
+const reportNative: ReportHandler = (event, data, webviewId) => {
+  const _data = data as Record<string, unknown>;
+  const originExtra = isObject(_data.extra)
+    ? _data.extra
+    : isString(_data.extra)
+    ? JSON.parse(_data.extra)
+    : {};
+  const extra = {
+    ...originExtra,
+    mp_id: (_data.mp_id as string) ?? '',
+    mp_version: (_data.mp_version as string) ?? ''
+  };
+  invokeNative('trackAsync', {
+    event,
+    data: extra,
+    webviewId
+  });
+};
+
+const { track, trackPerformance } = createTracks(reportNative, {
+  type: EProject.AppSDK,
+  platform: 'native',
+  jssdk_version: context.sdkInfo?.jssdkVersion ?? '1.0.0',
+  mp_id: context.mpId,
+  mp_version: context.mpVersion
+});
+
+export { track, trackPerformance };
+
+const commands = createCommands();
+
+commands.registerCommand('ReportSDK.traceSystemTimeline', ({ event, duration }) => {
+  trackPerformance(event, duration);
+});
+
+commands.registerCommand('ReportSDK.traceSystem', ({ event, info }) => {
+  track(event, info);
+});
+
+// 任务上报
+
+export const nativeTaskEmitter = new EventEmitter<{ visible: [boolean] }>();
+export const taskTracker = new NativeTaskTracker(track, nativeTaskEmitter);

package/src/native/report/task-tracker.ts

@@ -0,0 +1,72 @@
+/**
+ * 任务上报
+ */
+
+import { context } from '@/common/context';
+import { TaskTracker, TaskPoint } from '@/common/report/task-track';
+import { EventEmitter } from '@jolibox/common';
+import { innerFetch as fetch } from '../network';
+import { applyNative } from '../bootstrap/bridge';
+import type { Track } from '.';
+import type { TrackEvent } from '@jolibox/types';
+
+type NativeTaskPointEvent =
+  | 'OpenGame'
+  | 'CloseGame'
+  | 'LevelFinished'
+  | 'TaskFinished'
+  | 'LevelUpgrade'
+  | 'HistoryUserLevel'
+  | 'HistoryUserScore'
+  | 'UseGameItem'
+  | 'TaskEvent';
+
+export type NativeTaskPoint = {
+  event: NativeTaskPointEvent;
+  params: Record<string, unknown>;
+};
+export class NativeTaskTracker extends TaskTracker {
+  private gameId: string;
+  private sessionId: string;
+  private track: Track;
+
+  constructor(track: Track, eventEmitter: EventEmitter<{ visible: [boolean] }>, interval?: number) {
+    super(eventEmitter, interval);
+    this.gameId = context.mpId;
+    this.sessionId = context.sessionId;
+    this.track = track;
+  }
+  async reporter(point: TaskPoint): Promise<void> {
+    const { event, params } = point;
+    const reportTasks = [];
+    reportTasks.push(
+      fetch(`/api/base/app-event`, {
+        method: 'POST',
+        data: {
+          eventType: event,
+          gameInfo: {
+            gameId: this.gameId,
+            sessionId: this.sessionId,
+            ...params
+          }
+        }
+      })
+    );
+    await Promise.all(reportTasks);
+  }
+
+  async reportToNative(point: NativeTaskPoint) {
+    const { event, params } = point;
+    await applyNative('userTrackAsync', {
+      event: event,
+      params: {
+        ...params
+      },
+      gameId: this.gameId
+    });
+  }
+
+  tracker(event: TrackEvent, info: Record<string, unknown> | null = null) {
+    this.track(event, info);
+  }
+}