一文带你理解微信小程序中RPC通信的实现

// 页面脚本代码
// 监听逻辑层线程发送的消息
wx.onMessage((message) => {
  console.log('主线程收到消息:', message);
  // 发送消息到逻辑层线程
  wx.postMessage({
    message: 'Hello, Worker!',
  });
});
// 发送消息到逻辑层线程
wx.postMessage({
  message: 'Hello, Worker!',
});

// Worker脚本代码
// 监听主线程发送的消息
self.addEventListener('message', (event) => {
  console.log('逻辑层线程收到消息:', event.data);
  // 发送消息到主线程
  self.postMessage({
    message: 'Hello, Main Thread!',
  });
});
// 发送消息到主线程
self.postMessage({
  message: 'Hello, Main Thread!',
});

let requestId = 0;
const rpcCallbacks = {};
// 监听来自另一个线程的消息
wx.onMessage((message) => {
  if (message.type === 'rpcResponse') {
    const { id, result, error } = message.payload;
    const callback = rpcCallbacks[id];
    if (callback) {
      if (error) {
        callback.reject(error);
      } else {
        callback.resolve(result);
      }
      delete rpcCallbacks[id];
    }
  }
});
// 封装的 RPC 方法
function rpc(method, params) {
  const id = ++requestId;
  const payload = {
    id,
    method,
    params,
  };
  // 创建 Promise 对象，用于等待 RPC 响应
  const promise = new Promise((resolve, reject) => {
    rpcCallbacks[id] = {
      resolve,
      reject,
    };
  });
  // 发送 RPC 请求到另一个线程
  wx.postMessage({
    type: 'rpcRequest',
    payload,
  });
  return promise;
}
module.exports = rpc;

const rpc = require('common.js');
// 在页面中调用 RPC 方法
async function fetchData() {
  try {
    const result = await rpc('getData', { param1: 'value1', param2: 'value2' });
    console.log('获取到的数据:', result);
  } catch (error) {
    console.error('RPC 错误:', error);
  }
}
fetchData();

const rpc = require('common.js');
// 监听来自主线程的消息
self.addEventListener('message', async (event) => {
  if (event.data.type === 'rpcRequest') {
    const { id, method, params } = event.data.payload;
    try {
      // 执行相应的方法，并获取结果
      const result = await executeMethod(method, params);
      // 发送 RPC 响应到主线程
      self.postMessage({
        type: 'rpcResponse',
        payload: {
          id,
          result,
        },
      });
    } catch (error) {
      // 发送 RPC 错误响应到主线程
      self.postMessage({
        type: 'rpcResponse',
        payload: {
          id,
          error: error.message,
        },
      });
    }
  }
});
// 示例方法，用于执行具体的方法逻辑
function executeMethod(method, params) {
  return new Promise((resolve) => {
    // 模拟异步操作，这里可以替换为实际的方法逻辑
    setTimeout(() => {
      resolve(`执行方法 ${method} 成功，参数为 ${JSON.stringify(params)}`);
    }, 2000);
  });
}

const rpc = require('common.js');
// 在页面或组件的逻辑层线程中调用 RPC 方法
async function fetchData() {
  try {
    const result = await rpc('getData', { param1: 'value1', param2: 'value2' });
    console.log('获取到的数据:', result);
  } catch (error) {
    console.error('RPC 错误:', error);
  }
}
fetchData();