Storm Client开发日志【1】

杜逸先

发布于 2023-04-30 15:23:06

42500

代码可运行

文章被收录于专栏：追不上乌龟的兔子追不上乌龟的兔子

运行总次数：0

代码可运行

最近抽出了不少业余时间来开发一个新的项目Storm（一个使用 Solid.js 和 Tauri 开发的跨平台 Rest 客户端），简单记录一下开发过程。

项目想法的来源

作为一个后端开发，免不了遇到测试 http 接口的场景。这个领域最成熟的应用当然是 Postman，近期也有一些国产替代品出现，比如Apifox。

这些应用都是基于 Electron 开发的，但本人十分抗拒在电脑上安装除了 VS Code 之外的第二个 Electron 应用（出于 Electron 应用的体积、启动速度和内存占用的缘故）。

我现在一般使用 VS Code 的Thunder Client插件进行接口测试，在大部分简单场景下已经足够用了。

趁着近期想认真学习实践一下 solid.js 的契机，我决定用 solid.js 和 tauri 开发一个 Rest 客户端。

对比一下不同 Rest 客户端的安装包体积

以下数据均为 Windows 11 64 位系统下的安装包体积。

应用	框架	安装包体积（MB）
Postman	Electron	160
Apifox	Electron	129
Storm	Tauri	2.7

开发小记

Solid.js 的开发体验

免运行时和虚拟 DOM 的高性能 web 体验

编译后的 js 只有 32KB。作为对比，cdn 上直接引入 react-dom.production.min.js 就需要 128KB。

JSX 语法，上手很快

使用 JSX 语法定义组件还是很方便的，并且 solid.js 提供了很多内置的组件，比如<For>、<Show>、<Switch>等，可以很方便地实现循环、条件渲染等功能。

基于 Signal 的状态管理极大地简化了组件间的通信

solid.js 中的 signal 可以定义在任何地方，不用和具体的组件绑定，天生就是 MVVM 架构。

例如可以分别定义了一个 url signal 和一个 queries signal 用于表示请求的 url 与 query 参数。

export const [url, setUrl] = createSignal<string>("https://httpbin.org/get");

export const [queries, setQueries] = createSignal<Query[]>([
  { key: "", value: "" },
]);

定义一个 queryString（使用 createMemo），当 queries 变化时，queryString 也会自动更新。

const queryString = createMemo(() => {
  const params = new URLSearchParams();
  queries().forEach((query) => {
    query.key.length > 0 && params.append(query.key, query.value);
  });
  return params.toString();
});

最后定义一个 realURL，当 url 或者 queryString 变化时，realURL 也会自动更新。最终发起请求时，只需要使用 realURL() 即可。

export const realUrl = createMemo(() => {
  if (queryString().length === 0) return url();
  return url() + "?" + queryString();
});

使用 Tauri 提供的原生 API

我最初是使用 fetch API 来发起请求的，但是遇到了跨域问题，经过调研后使用了 Tauri 提供的原生 HTTP API。

import { fetch } from "@tauri-apps/api/http";
export async function doRequest() {
  setLoading(true);
  setError("");
  setResponse(defaultResponse);
  console.log(realUrl(), method(), requestHeaders(), requestForm(), body());
  const record = {
    method: method(),
    url: url(),
    headers: headers(),
    queries: queries(),
    formItems: formItems(),
    body: body(),
    ts: Date.now(),
  };
  await storage.appendRequestRecord(record);
  setHistory((history) => [record, ...history.slice(0, 19)]);
  try {
    const start = Date.now();
    const response = await fetch<number[]>(realUrl(), {
      method: method(),
      headers: requestHeaders(),
      body: method() === Method.GET ? undefined : requestBody(),
      responseType: ResponseType.Binary,
    });
    setResponse({
      status: response.status,
      headers: response.headers,
      body: new Uint8Array(response.data).buffer,
      time: Date.now() - start,
    });
  } catch (error) {
    setError((error as any).toString());
  } finally {
    setLoading(false);
  }
}

趁热打铁，我还是用了 Tauri 提供的其他原生 API，包括利用文件系统接口实现一个简单的请求历史记录、利用剪贴板接口实现复制请求结果等功能。

正确配置 Tauri 权限

Tauri 提供的所有原生 API 都需要进行相关配置才能正常使用（修改src-tauri\tauri.conf.json的 allowlist），基本上参考官方文档就可以了。

不过我还是遇到了一个坑，在 Windows 环境下，配置读取用户目录的权限只需要简单的通配符就可以了。

{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true,
        "scope": ["$HOME/**"]
      }
    }
  }
}

但是在 ubuntu 编译运行应用的时候，会遇到没有对应路径的权限的报错。经过在互联网上查询后，发现 tauri 的文件权限在 linux 下需要非常细致的定义。

{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true,
        "scope": [
          "$HOME/.storm",
          "$HOME/.storm/history",
          "$HOME/.storm/history/history.json"
        ]
      }
    }
  }
}