Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Storm Client开发日志【1】

Storm Client开发日志【1】

作者头像
杜逸先
发布于 2023-04-30 07:23:06
发布于 2023-04-30 07:23:06
42100
代码可运行
举报
运行总次数:0
代码可运行

最近抽出了不少业余时间来开发一个新的项目Storm(一个使用 Solid.jsTauri 开发的跨平台 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 参数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export const [url, setUrl] = createSignal<string>("https://httpbin.org/get");

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

定义一个 queryString(使用 createMemo),当 queries 变化时,queryString 也会自动更新。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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() 即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export const realUrl = createMemo(() => {
  if (queryString().length === 0) return url();
  return url() + "?" + queryString();
});

使用 Tauri 提供的原生 API

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 环境下,配置读取用户目录的权限只需要简单的通配符就可以了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true,
        "scope": ["$HOME/**"]
      }
    }
  }
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true,
        "scope": [
          "$HOME/.storm",
          "$HOME/.storm/history",
          "$HOME/.storm/history/history.json"
        ]
      }
    }
  }
}

总结

使用 solid.js 和 tauri 进行跨平台桌面应用的开发体验还是相当不错的,构建出的应用在体积、内存占用、启动时间上的表现也都很优秀。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-04-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue3 封装 AI 问答组件实现 AI 流式回答问题的方法
通过Vue3的Composition API,我们可以方便地封装一个高效、可复用的AI流式问答组件。关键技术点包括:
用户2102001
2025/05/23
2390
Vue3 封装 AI 问答组件实现 AI 流式回答问题的方法
程序员为什么一定要去造几个轮子
通过进一步聊天我的感受是,他觉得重复造轮子在我们行业里其实是一件不那么光彩的事情,他一直以来听到的都是不要重复造轮子
用户6901603
2024/01/20
2821
程序员为什么一定要去造几个轮子
我用Tauri开发的待办效率工具开源了!
Git仓库地址:https://gitee.com/zhanhongzhu/zhanhongzhu.git
微芒不朽
2024/07/30
2750
我用Tauri开发的待办效率工具开源了!
Vuex调用接口的三个阶段
编者按:本文作者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团Web前端开发资深专家,360前端技术委员会委员、W3C AC代表。
前端劝退师
2020/05/20
1.2K0
得物商家客服从Electron迁移到Tauri的技术实践
得物商家客服采用的是桌面端应用表现形式,而桌面端应用主要架构形式就是一套和操作系统交互的“后端” + 一套呈现界面的“前端(渲染层)”。而桌面端技术又可以根据渲染层的不同核心划分为以下几类:
得物技术
2024/12/05
8470
使用Tauri开发一个公司的内部模板仓库管理工具
公司内部希望有一个可以快速开发项目的工具,不用每次都使用基础的脚手架进行初始化再根据项目需求进行定制改动,开源仓库又与公司业务有不少差距,所以决定在公司内部几个典型项目的基础上维护几个通用的示例项目方便开发同学快速进入开发。
薛定喵君
2024/09/30
2390
桌面端程序开发-Tauri入门
https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites/
码客说
2023/03/06
7.3K0
桌面端程序开发-Tauri入门
前端 mock 完美解决方案实战
写在前面,本文阅读需要一定Nodejs的相关知识,因为会扩展webpack的相关功能,并且实现需要遵守一定约定和Ajax封装。
coder_koala
2020/12/17
2.3K0
Dva + Ant Design 前后端分离之 React 应用实践
继 Rails 从入门到完全放弃 拥抱 Elixir + Phoenix + React + Redux 这篇文章被喷之后,笔者很长一段时候没有上社区逛了。现在 tkvern 又回归了,给大家带来React实践的一些经验,一些踩坑的经验。
零式的天空
2022/03/23
2.7K0
React 项目精进技巧
umi+dva作为底层框架,Ant Design Mobile为 UI 组件库,是蚂蚁金服推崇的的react项目最佳实践,具有国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等方便一线开发者的功能,部分功能代码可以参考Ant Design pro,目录结构预览如下
EchoROne
2022/08/15
1K0
React 项目精进技巧
你应该会喜欢的5个自定义 Hook
最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。
前端小智@大迁世界
2021/03/02
8.3K0
使用Tauri开发桌面应用
执行npm run tauri build出错,根据 https://github.com/tauri-apps/tauri/issues/7430
fliter
2023/11/16
1.4K0
使用Tauri开发桌面应用
让 ChatGPT 更智能,Tauri 带你实现 AI 对话应用
Tauri 和 Electron 都是用于开发跨平台桌面应用程序的工具,因为最近使用ChatGPT在国内环境的确不够友好,又没有一个比较轻量简洁的工具可用,如是想自己造个轻量点的轮子,力争做到代码轻量,界面美观简洁,打出的安装包小,请求ChatGPT速度快,会话安全,不被封号。实现玩之后的效果是这样:项目地址在 这里 https://github.com/bravekingzhang/tauri-chat-box
老码小张
2023/04/14
4.4K0
让 ChatGPT 更智能,Tauri 带你实现 AI 对话应用
使用 React 开发单页应用的实践
在阅读这篇文章前,推荐一篇“好”文章:如何提高业务系统的稳定性原创 这篇文章见解独到,深入剖析,为保障业务系统稳固运行提供了极具价值的指导。
奇迹_fly
2024/11/28
2810
在浏览器使用 MCP,纯边缘函数实现 MCP Client & Server
下面是一个在线示例:https://mcp-on-edge.edgeone.site/?from=eo
EdgeOne 小助手
2025/05/09
4570
使用 C# 开发 node.js 插件
项目需求 最近在开发一个 electron 程序,其中有用到和硬件通讯部分;硬件厂商给的是 .dll 链接库做通讯桥接, 第一版本使用 C 写的 Node.js 扩展 😁;由于有异步任务的关系,实现使用了 N-API 提供的多线程做异步任务调度, 虽然功能实现了,但是也有些值得思考的点。 纯 C 编程效率低,木有 trycatch 的语言调试难度也大 (磕磕绊绊的) 编写好的 .node 扩展文件,放在 electron 主进程中运行会有一定的隐患稍有差错会导致软件闪退 (后来用子进程隔离运行) 基于
conanma
2022/01/05
2.1K0
35·灵魂前端工程师养成-使用nodejs实现简单nginx功能
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/10/31
6580
35·灵魂前端工程师养成-使用nodejs实现简单nginx功能
关于koa2,你不知道的事
koa 是一个基于 node 实现的一个新的 web 框架,它是由 express 框架的原班人马打造。特点是优雅、简洁、表达力强、自由度高。和 express 相比,它是一个更轻量的 node 框架,因为它所有的功能都通过插件来实现,这种插拔式的架构设计模式,很符合 unix 哲学。
lucifer210
2020/04/14
7630
关于koa2,你不知道的事
我在工作中写React,学到了什么?
我工作中的技术栈主要是 React + TypeScript,这篇文章我想总结一下如何在项目中运用 React 的一些技巧解决一些实际问题,本文中使用的代码都是简化后的,不代表生产环境。生产环境的代码肯定比文中的例子要复杂很多,但是简化后的思想应该是相通的。
ssh_晨曦时梦见兮
2022/03/09
9680
滴滴前端二面常考react面试题(持续更新中)_2023-03-01
refs允许你直接访问DOM元素或组件实例。为了使用它们,可以向组件添加个ref属性。
用户10376779
2023/03/01
4.7K0
推荐阅读
相关推荐
Vue3 封装 AI 问答组件实现 AI 流式回答问题的方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验