vivo 快应用官方博客

快应用 IDE 定制 Devtools 元素面板系列三：通信方案

快应用开发工具 Jul 4, 2020

在上一篇快应用 IDE 定制 Devtools 元素面板系列二：新增面板，介绍了如何在 devtools-frontend 新增一个面板，接下来就需要考虑 element 面板的具体实现。Element 面板主要有下面 3 个功能：

  • 渲染元素树，编辑元素属性；
  • 渲染样式表，编辑样式；
  • 页面元素高亮，检查页面元素；

渲染元素树、样式表，需要获取页面的信息；设置属性、样式、高亮，需要页面有相应的更新。所以，为了实现这些功能，需要先建立 devtools (frontend) 和页面 (backend) 之间的通信。

建立通信，有两种可能的方案：

  • 基于 devtools 原本的通信协议开发，加上定制的内容。
  • 自定义通信协议，这里参考 react-devtools 的方案。

Devtools 通信机制

1. 阅读 wiki，初步了解 devtools 通信协议

  • devtools 包含前端和后端，前端是 devtools-frontend，后端是 chromium content（即 chromium 核心代码)。前后端通过远程调试协议 (Remote Debugging Protocol) 进行通信。
  • chromium 的远程调试协议在 json rpc 2.0 上运行，协议分为多个域（代表被检查实体的语义层），每个域定义了类型、commands（前端发送给后端的消息）、events（后端发送给前端的消息）。
  • chromium 有不同的消息通道：Embedder channel，Websocket channel，Chrome extension channel，USB/ADB channel。

2. devtools 和 page 的通信机制

devtools 和 page 通过 websocket 进行通信。调用 Electron 的 webContents.openDevTools() 方法，可以打开 devtools-frontend 页面的 devtools，在 Network 面板查看到其通信内容。

在 devtools-frontend 的源码中搜索 getResourceTree, 可以发现协议是在 browser_protocol.json 中定义的，在 InspectorBackendCommands.js 中注册后端命令，在 ResourceTreeModel.js 中调用。

// third_party/blink/public/devtools_protocol/browser_protocol.json
{
  "domain": "Page", // 域
  "description": "Actions and events related to the inspected page belong to the page domain.",
  "dependencies": [
    "Debugger",
    "DOM",
    "IO",
    "Network",
    "Runtime"
  ],
  "types": [...],
  "commands": [ // 前端发送给后端的消息
    {
      "name": "getResourceTree",
      "description": "Returns present frame / resource tree structure.",
      "experimental": true,
      "returns": [{
        "name": "frameTree",
        "description": "Present frame / resource tree structure.",
        "$ref": "FrameResourceTree"
      }]
    },
    ...
  ],
  "events": [ // 后端发送给前端的消息
    {
      "name": "domContentEventFired",
      "parameters": [{
        "name": "timestamp",
        "$ref": "Network.MonotonicTime"
      }]
    }
    ...
  ]
}

// front_end/generated/InspectorBackendCommands.js
inspectorBackend.registerCommand(
  "Page.getResourceTree",
  [],
  ["frameTree"],
  false
);

// front_end/sdk/ResourceTreeModel.js
// 通过 agent 获取后端数据
this._agent.getResourceTree().then(this._processCachedResources.bind(this));

从 ResourceTreeModel 入手，初步了解通信方式。

// front_end/sdk/ResourceTreeModel.js
export class ResourceTreeModel extends SDKModel { // 1. 父类是 SDKModel
  /**
  * @param {!Target} target
  */
  constructor(target) {
    super(target);

    // 2. 通过 target 可以获取到某个 model
    const networkManager = target.model(NetworkManager);
    ...

    // 3. 通过 target 可以获取到 agent
    this._agent = target.pageAgent();
    ...

    // 4. 通过 agent 可以发送消息给后端
    this._agent.getResourceTree().then(this._processCachedResources.bind(this));
  }
}

ResourceTreeModel 通过 Agent 发送消息给后端，而 Agent、Model 都可以通过 Target 获取。

devtools-frontend 的通信机制如下：

Model、Agent、Target 实现了 devtools 和页面的通信。

  • Agent：代理，发送消息给后端。与前端同步的后端数据对象，按 domain 划分，比如 pageAgent，domAgent，cssAgent，workerAgent 等。
  • Model：模型，监听后端消息。与后端同步的前端数据对象，比如 ResourceTreeModel，DomModel，CssModel 等。
  • Target：目标页面对象，处理前后端通信，挂载 Model 和 Agent。

为了进一步理解通信的启动流程，我们需要继续阅读源码。

2.1 Target 启动流程

devtools 有 devtools_app，inspector， node_app，js_app，work_app 等多种应用。其中，浏览器右键检查对应的是 inspector 模块，其文件结构如下：

front_end
  ├── ...
  ├── inspector.html    // 入口文件，加载 inspector.js
  ├── inspector.js      // 启动文件
  ├── inspector.json    // 配置文件
  ├── ...

inspector.js 通过 front_end/RuntimeInstantiator.js 的 startApplication 启动应用，加载应用需要的模块、资源等，并启动核心模块。核心模块中有一个 main 模块，是页面初始化的入口，用于创建应用 UI、初始化 Target 等。这里只关注 Target 的初始化。

  • _initializeTarget: 加载 early-initialization 类型的插件。
// front_end/main/MainImpl.js
  async _initializeTarget() {
    MainImpl.time('Main._initializeTarget');
    // 1. 实例化 'early-initialization' 类型的插件
    const instances =
        await Promise.all(self.runtime.extensions('early-initialization').map(extension => extension.instance()));
    // 2.运行 'early-initialization' 类型的插件
    for (const instance of instances) {
      await /** @type {!Common.Runnable.Runnable} */ (instance).run();
    }
    ...
  }
  • 搜索 early-initialization，可以发现它们是各应用的主模块的主插件。对于 inspector 应用，加载的是 inspector_main 模块的 InspectorMain 类。
// front_end/inspector_main/module.json
{
  "extensions": [
    {
      "type": "early-initialization",
      "className": "InspectorMain.InspectorMain"
    },
    ...
  ],
  ...
}
  • 运行 InspectorMain，建立主连接，创建 Target。
// front_end/inspector_main/InspectorMain.js
export class InspectorMainImpl extends Common.ObjectWrapper.ObjectWrapper {
  async run() {
    let firstCall = true;
    // 1. 建立主连接
    await SDK.Connections.initMainConnection(async () => {
      // 2. Target 的类型：node 或 frame
      const type = Root.Runtime.queryParam('v8only') ? SDK.SDKModel.Type.Node : SDK.SDKModel.Type.Frame;
      const waitForDebuggerInPage = type === SDK.SDKModel.Type.Frame && Root.Runtime.queryParam('panel') === 'sources';
      // 3. 用 TargetManager 实例创建 Target
      const target = SDK.SDKModel.TargetManager.instance().createTarget(
          'main', Common.UIString.UIString('Main'), type, null, undefined, waitForDebuggerInPage);

      ...
  }
}

在 inspector 中 Target 是 frame 类型，也就是说 Target 对应我们调试的页面 或 iframe。

  • 新建 Target
// front_end/sdk/SDKModel.js
export class TargetManager extends Common.ObjectWrapper.ObjectWrapper {
  createTarget(
    id,
    name,
    type,
    parentTarget,
    sessionId,
    waitForDebuggerInPage,
    connection
  ) {
    // 1. 新建 Target
    const target = new Target(
      this,
      id,
      name,
      type,
      parentTarget,
      sessionId || "",
      this._isSuspended,
      connection || null
    );
    if (waitForDebuggerInPage) {
      // 2. agent 等待调试，agent 来自于 TargetBase
      // @ts-ignore TODO(1063322): Find out where pageAgent() is set on Target/TargetBase.
      target.pageAgent().waitForDebugger();
    }
    // 3. 根据 _modelObservers 新建 Model
    target.createModels(new Set(this._modelObservers.keysArray()));
    // 4. Target 保存到 TargetManager 的 _targets 中
    this._targets.add(target);

    // 5. Target 添加到 Target 观察集合中
    // Iterate over a copy. _observers might be modified during iteration.
    for (const observer of [...this._observers]) {
      observer.targetAdded(target);
    }

    // 6. Model 添加到 Model 观察集合中
    for (const modelClass of target.models().keys()) {
      const model = /** @type {!SDKModel} */ (target.models().get(modelClass));
      this.modelAdded(target, modelClass, model);
    }

    // 7. 绑定 Model 的监听事件
    for (const key of this._modelListeners.keysArray()) {
      for (const info of this._modelListeners.get(key)) {
        const model = target.model(info.modelClass);
        if (model) {
          model.addEventListener(key, info.listener, info.thisObject);
        }
      }
    }

    return target;
  }
}

新建 Target 时，也新建了它的 model。而 agent 与 Target 的父类 TargetBase 有关。

  • 新建 Model
// front_end/sdk/SDKModel.js
export class Target extends ProtocolClient.InspectorBackend.TargetBase {

  createModels(required) {
    ...
    const registered = Array.from(SDKModel.registeredModels.keys());
    for (const modelClass of registered) {
      const info = (SDKModel.registeredModels.get(modelClass));
      if (info.autostart || required.has(modelClass)) {
        // 1.调用 this.model() 新建 model
        this.model(modelClass);
      }
    }
    this._creatingModels = false;
  }

  model(modelClass) {
    if (!this._modelByConstructor.get(modelClass)) {
      // 2. 确认 modelClass 已注册，从 SDKModel.registeredModels 获取 modelClass
      const info = SDKModel.registeredModels.get(modelClass);
      if (info === undefined) {
        throw 'Model class is not registered @' + new Error().stack;
      }
      if ((this._capabilitiesMask & info.capabilities) === info.capabilities) {
        // 3. 新建 model 实例
        const model = new modelClass(this);
        // 4. 保存 model 到 _modelByConstructor
        this._modelByConstructor.set(modelClass, model);
        if (!this._creatingModels) {
          this._targetManager.modelAdded(this, modelClass, model);
        }
      }
    }
    // 5. 返回 model 实例
    return this._modelByConstructor.get(modelClass) || null;
  }
}

从以上代码可以看出，新建 model 时需要确认 modelClass 已经注册。也就是说新建 model 之前，需要先注册 modelClass；新建时，再从 SDKModel.registeredModels 中获取 modelClass。以 ResourceTreeModel 为例：

// front_end/sdk/ResourceTreeModel.js
// 1. 注册 modelClass
SDKModel.register(ResourceTreeModel, Capability.DOM, true);

// front_end/sdk/SDKModel.js
export class SDKModel extends Common.ObjectWrapper.ObjectWrapper {
  // 2. 保存 modelClass 到 _registeredModels
  static register(modelClass, capabilities, autostart) {
    _registeredModels.set(modelClass, { capabilities, autostart });
  }

  // 3. 获取 _registeredModels
  static get registeredModels() {
    return _registeredModels;
  }
}
  • 新建 Agent

前面已经知道 agent 与 TargetBase 有关，查看 TargetBase 的代码，可以发现 agent 在其构造函数中新建。但是这里没有 pageAgent() 等获取 agent 的方法。

// front_end/protocol_client/InspectorBackend.js
export class TargetBase {
  constructor(needsNodeJSPatching, parentTarget, sessionId, connection) {
    ...

    this._agents = {};
    // 1. 遍历 inspectorBackend._agentPrototypes，新建 agent，按 domain 添加到 this._agents
    for (const [domain, agentPrototype] of inspectorBackend._agentPrototypes) {
      this._agents[domain] = Object.create(/** @type {!_AgentPrototype} */ (agentPrototype));
      this._agents[domain]._target = this;
    }
  }
}

继续查看 inspectorBackend._agentPrototypes，可以发现是在注册命令时，新建 agent 原型，注册命令，同时给 target 添加 {domain}Agent 方法，比如 pageAgent() 获取 page 域对应的 agent。

// front_end/generated/InspectorBackendCommands.js
// 调用注册命令：Page 是域，getResourceTree 是 方法
inspectorBackend.registerCommand('Page.getResourceTree', [], ['frameTree'], false);

// front_end/protocol_client/InspectorBackend.js
export class InspectorBackend {
  // 1. 注册命令（前端发送给后端的消息）：调用 this._agentPrototype 添加 agent 原型
  registerCommand(method, signature, replyArgs, hasErrorData) {
    // 取出 domain 和方法名
    const domainAndMethod = method.split('.');
    // 新建 agent 原型，注册命令
    this._agentPrototype(domainAndMethod[0]).registerCommand(domainAndMethod[1], signature, replyArgs, hasErrorData);
    this._initialized = true;
  }


  // 2. 新建 agent 原型
  _agentPrototype(domain) {
    if (!this._agentPrototypes.has(domain)) {
      // 根据 domain 新建 agent 原型
      this._agentPrototypes.set(domain, new _AgentPrototype(domain));
      this._addAgentGetterMethodToProtocolTargetPrototype(domain);
    }

    return /** @type {!_AgentPrototype} */ (this._agentPrototypes.get(domain));
  }

  // 3. 给 target 原型添加 agent 的 getter 方法
  _addAgentGetterMethodToProtocolTargetPrototype(domain) {
    ...

    // 方法名：比如 Page -> pageAgent
    const methodName = domain.substr(0, upperCaseLength).toLowerCase() + domain.slice(upperCaseLength) + 'Agent';

    function agentGetter() {
      return this._agents[domain];
    }

    // {domain}Agent 方法挂载到 TargetBase 原型，比如 target.pageAgent() = target._agents.page
    TargetBase.prototype[methodName] = agentGetter;
  }
}

class _AgentPrototype {
  // 1. 注册命令
  registerCommand(methodName, signature, replyArgs, hasErrorData) {
    const domainAndMethod = this._domain + '.' + methodName;

    function sendMessagePromise(vararg) {
      const params = Array.prototype.slice.call(arguments);
      // 发送消息给后端
      return _AgentPrototype.prototype._sendMessageToBackendPromise.call(this, domainAndMethod, signature, params);
    }

    // @ts-ignore Method code generation
    this[methodName] = sendMessagePromise;

    ...
  }

  // 2. 发送消息给后端
  _sendMessageToBackendPromise(method, signature, args) {
    ...

    return new Promise((resolve, reject) => {
      ...
      // 用 TargetBase 中的 router 发送消息
      this._target._router.sendMessage(this._target._sessionId, this._domain, method, params, callback);
    });
  }
}

2.2 初始化主连接

agent 发送消息给后端，是通过 target._router 发送的，而 _router 来自 TargetBase。在新建 Target 时，如果没有传入 connection，使用的是主连接。

// front_end/protocol_client/InspectorBackend.js
export class TargetBase {
  constructor(needsNodeJSPatching, parentTarget, sessionId, connection) {
    ...
    // 1. 新建 router，用于通信
    /** @type {!SessionRouter} */
    let router;
    if (sessionId && parentTarget && parentTarget._router) {
      router = parentTarget._router;
    } else if (connection) {
      router = new SessionRouter(connection);
    } else {
      // 2. 没有传入 connection 时，使用 _factory，也就是主连接
      router = new SessionRouter(_factory());
    }

    /** @type {?SessionRouter} */
    this._router = router;

    router.registerSession(this, this._sessionId);

    ...
  }
}

在 2.1 启动流程中，通过 initMainConnection 初始化主连接。

// front_end/sdk/Connections.js
// 初始化主连接
export async function initMainConnection(
  createMainTarget,
  websocketConnectionLost
) {
  // 1. 设置 factory
  ProtocolClient.InspectorBackend.Connection.setFactory(
    _createMainConnection.bind(null, websocketConnectionLost)
  );
  await createMainTarget();
  Host.InspectorFrontendHost.InspectorFrontendHostInstance.connectionReady();
  Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
    Host.InspectorFrontendHostAPI.Events.ReattachMainTarget,
    () => {
      TargetManager.instance()
        .mainTarget()
        .router()
        .connection()
        .disconnect();
      createMainTarget();
    }
  );
  return Promise.resolve();
}

// 新建主连接
export function _createMainConnection(websocketConnectionLost) {
  const wsParam = Root.Runtime.queryParam("ws");
  const wssParam = Root.Runtime.queryParam("wss");
  if (wsParam || wssParam) {
    // 2. 获取 websocket 参数，新建 websocket 连接
    const ws = wsParam ? `ws://${wsParam}` : `wss://${wssParam}`;
    return new WebSocketConnection(ws, websocketConnectionLost);
  }
  if (Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
    return new StubConnection();
  }
  return new MainConnection();
}

2.3 Model 监听 event

通过 2.1 和 2.2 的解析，可以知道 command 的实现如下：

  • TargetBase 用 router 管理前后端通信，新建 agent。
  • inspectorBarkend 注册 command，新建 agent 原型，给 TargetBase 挂载 {domain}Agent 方法。
  • Model 调用 target.{domain}Agent().{command}() 发送消息给后端。

对于 event 来说，也是一样的方式：

  • TargetBase 用 router 管理前后端通信，新建 dispatcher。
// front_end/protocol_client/InspectorBackend.js
export class TargetBase {
  constructor(needsNodeJSPatching, parentTarget, sessionId, connection) {
    ...

    // 1. 新建 router，用于通信
    // 没有传入 connection 时，使用 _factory，也就是主连接
    router = new SessionRouter(_factory());

    this._dispatchers = {};
    // 2. 遍历 inspectorBackend._dispatcherPrototypes，新建 dispatcherPrototype，按 domain 添加到 this._dispatchers
    for (const [domain, dispatcherPrototype] of inspectorBackend._dispatcherPrototypes) {
      this._dispatchers[domain] = Object.create(/** @type {!_DispatcherPrototype} */ (dispatcherPrototype));
      this._dispatchers[domain]._dispatchers = [];
    }
  }

  // 注册 dispatcher
  registerDispatcher(domain, dispatcher) {
    if (!this._dispatchers[domain]) {
      return;
    }
    this._dispatchers[domain].addDomainDispatcher(dispatcher);
  }
}

export class SessionRouter {
  constructor(connection) {
    ...
    this._connection.setOnMessage(this._onMessage.bind(this));
  }

  _onMessage(message) {
    // 监听到后端消息时，触发对应域发送事件
    session.target._dispatchers[domainName].dispatch(
          method[1], /** @type {{method: string, params: ?Array<string>}} */ (messageObject));
  }
}
  • inspectorBackend 注册 event，新建 dispatcher 原型，给 TargetBase 挂载 register{domain}Dispatcher 方法。

// front_end/generated/InspectorBackendCommands.js
// 调用注册事件：Page 是域，domContentEventFired 是 事件
inspectorBackend.registerEvent('Page.domContentEventFired', ['timestamp']);

// front_end/protocol_client/InspectorBackend.js
export class InspectorBackend {
  // 1. 注册事件（后端发送给前端的消息）
  registerEvent(eventName, params) {
    const domain = eventName.split('.')[0];
    // 新建监听器原型，注册事件
    this._dispatcherPrototype(domain).registerEvent(eventName, params);
    this._initialized = true;
  }

  // 2. 新建监听器原型
  _dispatcherPrototype(domain) {
    if (!this._dispatcherPrototypes.has(domain)) {
      // 按 domain 添加到 _dispatcherPrototypes
      this._dispatcherPrototypes.set(domain, new _DispatcherPrototype());
    }
    return /** @type {!_DispatcherPrototype} */ (this._dispatcherPrototypes.get(domain));
  }

  // 3. 新建 agent 原型时，也给 target 添加 register{domain}Dispather 方法
  _addAgentGetterMethodToProtocolTargetPrototype(domain) {
    ...

    // register{domain}Dispatcher 方法挂载到 TargetBase 原型，比如 target.rigisterPageDispatcher(dispatcher) = target.registerDispatcher('page', dispatcher)
    TargetBase.prototype['register' + domain + 'Dispatcher'] = registerDispatcher;
  }
}

class _DispatcherPrototype {
  constructor() {
    this._eventArgs = {};
    this._dispatchers;
  }

  // 注册事件
  registerEvent(eventName, params) {
    this._eventArgs[eventName] = params;
  }

  // 添加域监听器
  addDomainDispatcher(dispatcher) {
    this._dispatchers.push(dispatcher);
  }

  // 发送事件
  dispatch(functionName, messageObject) {
    ...

    // 遍历监听器，执行对应的方法
    for (let index = 0; index < this._dispatchers.length; ++index) {
      const dispatcher = this._dispatchers[index];
      if (functionName in dispatcher) {
        dispatcher[functionName].apply(dispatcher, params);
      }
    }
  }
}
  • Model 调用 target.register{domain}Dispatcher 注册监听器，监听后端消息。
export class ResourceTreeModel extends SDKModel {
  constructor(target) {
    ...
    // 注册监听器
    target.registerPageDispatcher(new PageDispatcher(this));
  }
}

export class PageDispatcher {

  constructor(resourceTreeModel) {
    this._resourceTreeModel = resourceTreeModel;
  }

  // 监听后端发送过来的消息 'domContentEventFired'
  domContentEventFired(time) {
    // model 发送事件 'Events.DOMContentLoaded'，在其他地方（比如 ui）监听事件
    this._resourceTreeModel.dispatchEventToListeners(Events.DOMContentLoaded, time);
  }
}

2.4 总结

  • Agent：代理，与前端同步的后端数据对象，按 domain 划分（即调试协议中的 domain），比如 pageAgent，domAgent，cssAgent，workerAgent 等。
    • 在 InspectorBackendCommands.js 中注册 commands，再通过 agent 发送命令给后端。
  • Model：模型，与后端同步的前端数据对象，比如 ResourceTreeModel，DomModel，CssModel 等。
    • target()：获取对应的 target，target 在 model 实例化时传入。
    • 在 InspectorBackendCommands.js 中注册 events，model 监听后端事件，并通过 dispatchEventToListeners 广播消息。
  • Target：目标页面对象，处理前后端通信，挂载 Model 和 Agent。
    • model(modelClass)：新建并返回 model，如果已有直接返回
    • models()：获取所有 models
    • {domain}Agent()：获取对应域的 agent
    • register{domain}Dispatcher：注册对应域的监听器
    • router()：获取管理通信的 SessionRouter
  • TargetManager：目标页面管理器，用于管理 Target，比如 比如新增/删除/获取 Target，管理 Model 的监听器等。
    获取 Target 有以下方法：
    • targets()：获取所有 target
    • mainTarget()：获取主 target
    • targetById(id)：根据 id 获取 target

react-devtools 通信方案

react-devtools 通过 websocket 进行通信，有 extension 和 standalone（electron 应用）两种实现方式，这里只分析 standalone 这种方案。

1. 启动入口

devtools 的入口是 standalone.js，通过 startServer 启动一个 http 服务和对应的 websocket 服务。

page 的 html 通过 <script src="http://localhost:${port}"></script> ，向 devtools 启动的 http 服务请求 backend.js。在 backend.js 中，page 新建 websocket 客户端，和 devtools 建立通信；并注入 hook 转发页面原生事件，比如 mountComponent。

2. 通信方案

react-devtools 的通信模式如下图所示：

devtools 和 page 都是通过 wall 和 bridge 发送和监听消息，通信模式大体一致。可以先看 page 部分，page 各部分的关系和方法如下图所示：

  • hook：用于转发页面原始事件，比如 mountComponent，unmountComponent 等。

    注：由于新版本 hook 的代码太多，这里用旧版本代码进行解释。

    • 注入全局钩子，设置 window.REACT_DEVTOOLS_GLOBAL_HOOK = hook。hook 主要作用是订阅事件，发送事件。
    // backend.js
// window 注入 hook
installGlobalHook();

// hook.js
// 注入 hook
function installGlobalHook(window: Object) {
  if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
    return;
  }

  const hook = ({
    _renderers: {},
    helpers: {},

    // 注入原始事件的对象，比如 hook.inject(oldReact)
    inject: function(renderer) {
      var id = Math.random().toString(16).slice(2);
      hook._renderers[id] = renderer;
      ...
      // 触发 renderer 事件
      hook.emit('renderer', {id, renderer, reactBuildType});
      return id;
    },

    _listeners: {},

    // 订阅事件，给对应的事件添加监听函数
    sub: function (evt, fn) {
      hook.on(evt, fn);
      return () => hook.off(evt, fn);
    },

    // 添加监听函数
    on: function (evt, fn) {
      if (!hook._listeners[evt]) {
        hook._listeners[evt] = [];
      }
      hook._listeners[evt].push(fn);
    },

    // 删除监听函数
    off: function (evt, fn) {
      if (!hook._listeners[evt]) {
        return;
      }
      var ix = hook._listeners[evt].indexOf(fn);
      if (ix !== -1) {
        hook._listeners[evt].splice(ix, 1);
      }
      if (!hook._listeners[evt].length) {
        hook._listeners[evt] = null;
      }
    },

    // 触发事件，执行监听函数
    emit: function (evt, data) {
      if (hook._listeners[evt]) {
        hook._listeners[evt].map(fn => fn(data));
      }
    }
  });

  // 设置 window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook
  Object.defineProperty(window, '__DEVTOOLS_GLOBAL_HOOK__', {
    value: hook,
  });

  return hook;
}
    • 装饰页面原始事件，在页面原始事件触发时，会触发 hook 事件，并执行监听函数：
    // backend.js
// 1. 注入原始事件的对象，触发 hook 'renderer' 事件
hook.inject(oldReact);
...
// 2. 监听 hook 'renderer' 事件，执行 attachRenderer
hook.on('renderer', ({id, renderer}) => {
  hook.helpers[id] = attachRenderer(hook, id, renderer);
  hook.emit('renderer-attached', {id, renderer, helpers: hook.helpers[id]});
});

// attachRenderer.js
function attachRenderer(hook: Hook, rid: string, renderer: ReactRenderer): Helpers {
  ...
  // 3. 装饰原始方法
  oldMethods = decorateMany(renderer.Reconciler, {
    mountComponent(internalInstance, rootID, transaction, context) {
      var data = getData(internalInstance);
      rootNodeIDMap.set(internalInstance._rootNodeID, internalInstance);
      // 4. 触发 hook 事件(页面原始事件)，执行监听函数
      hook.emit('mount', {internalInstance, data, renderer: rid});
    },
    ...
  });
}

// inject.js
// 5. 订阅 hook 事件(页面原始事件)，设置监听函数 agent.xxx
hook.sub('mount', ({renderer, internalInstance, data}) => agent.onMounted(renderer, internalInstance, data))
    • 装饰方法的实现如下：
    // attachRenderer.js
// 装饰一个函数
function decorate(obj, attr, fn) {
  var old = obj[attr];
  obj[attr] = function(instance: NodeLike) {
    // 执行原始函数
    var res = old.apply(this, arguments);
    // 执行传入的函数，即 hook.emit，触发事件
    fn.apply(this, arguments);
    return res;
  };
  return old;
}

// 装饰多个函数
function decorateMany(source, fns) {
  var olds = {};
  for (var name in fns) {
    olds[name] = decorate(source, name, fns[name]);
  }
  return olds;
}

  • agent：将 hook 事件转发给 bridge。

    • page 的消息发送、监听，是调用 agent 的方法，agent 再转发给 brige 处理。

  • bridge：用于缓冲发送事件、暂时发送事件、恢复发送事件、取消发送事件、处理接收的消息、转换消息格式（react 自定义的消息格式）等。

    • bridge 调用 wall 的方法发送消息或添加消息监听器。
    • 缓冲发送事件，主要是为了避免短时间内有太多的事件触发，发送过多消息，引发通信性能问题。具体实现如下：
      // 1. 把消息放入缓冲消息队列，设置 timeout
  send<EventName: $Keys<OutgoingEvents>>(
    event: EventName,
    ...payload: $ElementType<OutgoingEvents, EventName>
  ) {
    if (this._isShutdown) {
      console.warn(
        `Cannot send message "${event}" through a Bridge that has been shutdown.`,
      );
      return;
    }

    // When we receive a message:
    // - we add it to our queue of messages to be sent
    // - if there hasn't been a message recently, we set a timer for 0 ms in
    //   the future, allowing all messages created in the same tick to be sent
    //   together
    // - if there *has* been a message flushed in the last BATCH_DURATION ms
    //   (or we're waiting for our setTimeout-0 to fire), then _timeoutID will
    //   be set, and we'll simply add to the queue and wait for that
    this._messageQueue.push(event, payload);
    if (!this._timeoutID) {
      this._timeoutID = setTimeout(this._flush, 0);
    }
  }

  // 2. 根据 timeout，每隔一段时间，批量发送消息给 page
  _flush = () => {
    // This method is used after the bridge is marked as destroyed in shutdown sequence,
    // so we do not bail out if the bridge marked as destroyed.
    // It is a private method that the bridge ensures is only called at the right times.

    if (this._timeoutID !== null) {
      clearTimeout(this._timeoutID);
      this._timeoutID = null;
    }

    if (this._messageQueue.length) {
      for (let i = 0; i < this._messageQueue.length; i += 2) {
        this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]);
      }
      this._messageQueue.length = 0;

      // Check again for queued messages in BATCH_DURATION ms. This will keep
      // flushing in a loop as long as messages continue to be added. Once no
      // more are, the timer expires.
      this._timeoutID = setTimeout(this._flush, BATCH_DURATION);
    }
  };
    • 暂停和恢复发送事件，devtools 关闭 react panel 时，暂停消息发送；devtools 打开 react panel 时，恢复消息发送。

  • wall：socket 对外的方法，调用 socket 发送消息，监听消息。

devtools 和 page 基本一致，只是没有 hook（因为不需要转发事件），agent 变成 store。

store 的作用和 agent 基本一致，用于发送和接收消息：react-devtools panel 触发元素选择、高亮等操作时，把消息放入 bridge 缓冲消息队列，每隔一段时间，批量发送消息给 page。devtools 接收到添加/删除/更新元素等消息时，更新 panel 的 UI。

最终采取方案

基于 devtools 原有的通信协议开发，需要修改 chromium content 部分，意味着需要修改 C++ 代码，对于前端来说，开发成本太高。

自定义通信协议，react-devtools 已经有一套成熟方案，考虑了消息发送的缓冲，可避免通信崩溃。

所以，我们选择在 react-devtools 的通信方案基础上自定义通信协议，但由于应用场景不完全一致，存在以下差异：

1. ws 和 wss

和 react-devtools 相反，IDE 在 page 新建 websocket 服务，在 devtools 新建 websocket 客户端。

这是因为，react-devtools 是先运行 devtools 应用（新建 wss），再刷新页面建立通信（新建 ws）。而 IDE 是先加载预览页面，再根据预览的 url 获取 devtools 的链接，加载 devtools。所以 IDE 需要在预览页面新建 wss，在 devtools 新建 ws。

2. 页面注入 js 的方法不同

react-devtools 是页面通过 http 请求，从 devtools 端的 http server 获取 js。但 IDE 是先加载页面，再加载 devtools，无法按 react-devtools 的方法给页面注入 js。

方案一：IDE 的预览页面是通过 webview 加载的，webview 可以通过 preload 设置预加载文件，通过预加载文件可以给页面注入 js。

<webview src="" preload="./inject.js"></webview>

方案二：electron 支持自定义文件协议，可以在 IDE 注册文件协议，页面通过文件协议加载 js。

IDE 注册文件协议：

protocol.registerFileProtocol("customProtocol", (request, callback) => {
  // 返回文件地址
  callback({ filePath });
});

页面加载 js：

<scripts src="customProtocol://inject.js"></scripts>

3. 增加端口的确定和通信

react-devtools 的 websocket 通信端口取 process.env.PORT 或默认值 8097。直接用这种方案，可能造成端口冲突，所以我们增加了端口的确定和通信：在 page 获取空闲的端口，再通过 ipcRenderer 发送消息给 IDE。devtools 启动时，通过 ipcRenderer 发送消息给 IDE 获取 端口。

electron 的 ipcRenderer 通信方法请查阅官方文档 ipcRenderer。

Tags

vivo developer

快应用引擎、工具开发者、快应用生态拓展达人（vivo）。

Recommended for you