一步一步编写web3工具——Step-by-Step Development of Web3 Tools
安装之前,请确认安装好了node.js,npm和yarn
第一步安装node相关依赖
git clone git@github.com:web3ToolBoxDev/toolBoxClient.git
cd toolBoxClient
yarn install
第二步打包react前端项目
yarn build
第三步进入assets/scripts,安装相应的node依赖
cd assets/scripts
yarn install
第三步打包electron,打包前请确认根目录下config.js的IS_BUILD参数为true
yarn dist
即可在dist目录中找到可执行安装文件
该文档旨在指导开发人员接入 WebSocket 服务,实现与工具箱的实时通信。目前暂时支持JavaScript脚本,接入示例代码请见example 接入的脚本执行方式存在以下三种:
- 顺序执行,在多个账户执行脚本时,将按照顺序一个账户完成脚本任务后,下一个账户才能执行脚本
- 同步执行,在多个账户执行脚本时,将同时按不同账户启动脚本,执行将受到电脑性能的影响
- 全量执行,与前两种执行模式不同的是,脚本将获取到全量的账户信息,改执行模式获取到的数据与前两种不同
- Node.js 环境
- 熟悉 JavaScript 编程语言
确保安装了 ws
模块,该模块提供了 WebSocket 的实现。
npm install ws
工具箱采用了WebSocket协议进行通讯,工具箱通过调用子进程启动三方脚本,web socket的链接地址将通过进程参数传递给脚本。示例代码如下:
const webSocket = require('ws');
const url = process.argv[2];
let ws = new webSocket(url);
工具箱采用json定义了以下消息格式
- 心跳消息,工具箱用于确认进程是否正常运行,定时发送心跳消息至工具箱,如超过60秒未收到相应消息,工具箱将关闭脚本进程
{
{
"type": "heart_beat"
}
}
//定时发送心跳消息
setInterval(() => {
ws.send(JSON.stringify({type: 'heart_beat'}));
}, 5000);
- 请求任务数据信息,在WebSocket连接成功后即可请求数据,0.1.2版本可获取工具箱回传消息格式如下
//请求消息格式
{
"type": "request_task_data",
"data":""
}
顺序执行,同步执行获取的数据如下
{
"type": "request_task_data",
"data": {
"name":"钱包名称",
"address":"钱包地址",
"mnemonic":"钱包助记词",
"privateKey":"钱包私钥",
"walletInitialized":false, //是否完成初始化,初始化以后可以获取浏览器文件路径
"chromeUserDataPath":"浏览器用户文件储存路径",
"ipType":"http or socks5",
"ipHost": "ipUrl",
"ipPort": "ip端口",
"ipUsername": "ip用户名",
"ipPassword": "ip密码",
"twitterToken": "推特登录token",
"discordToken": "discord登录token",
"userAgent":"用户配置的浏览器userAgent信息",
"language":"用户配置的浏览器language信息",
"webglVendor":"用户配置的浏览器webglVendor信息",
"webglRenderer":"用户配置的浏览器webglRenderer信息",
"config":{
"default":{"默认配置"},
"0x1234..5678":{"当0x1234..5678===data.address时,使用该配置替换default中的配置"}
},
"ipInfo":{ //工具箱会启动一个ip代理服务,代理IP服务信息,全量执行的任务不支持
"proxyUrl":"工具箱启动的代理IP服务地址,使用puppeteer配置--proxy-server参数",
"ip":"代理ip地址",
"country":"国家缩写",
"ll":["latitude","longitude"],
"timezone":"代理IP时区"
}
},
"time": "2024/3/15 17:56:11"
}
全量执行时获取数据如下:
{
"type": "request_task_data",
"wallets":[
{
"name":"钱包名称",
"address":"钱包地址",
"mnemonic":"钱包助记词",
"privateKey":"钱包私钥",
"walletInitialized":false, //是否完成初始化,初始化以后可以获取浏览器文件路径
"chromeUserDataPath":"浏览器用户文件储存路径",
"ipType":"http or socks5",
"ipHost": "ipUrl",
"ipPort": "ip端口",
"ipUsername": "ip用户名",
"ipPassword": "ip密码",
"twitterToken": "推特登录token",
"discordToken": "discord登录token",
"userAgent":"用户配置的浏览器userAgent信息",
"language":"用户配置的浏览器language信息",
"webglVendor":"用户配置的浏览器webglVendor信息",
"webglRenderer":"用户配置的浏览器webglRenderer信息",
},...
],
"config":{
"default":{"默认配置"},
"0x1234..5678":{"当0x1234..5678===wallets.address时,使用该配置替换default中的配置"},
...
},
"time": "2024/3/15 17:56:11"
}
- 任务日志消息,用于显示任务进度的消息,工具箱收到消息后会展示在用户前端
{
"type": "task_log",
"message": "任务日志信息"
}
- 任务终止信息,由用户在工具箱客户端发出,进程接收到消息后需要主动结束任务
{
"type": "task_terminate"
}
- 任务完成信息,任务结束后需要发送任务结束消息,工具箱收到消息后会关闭进程
{
"type": "task_completed"
}
- 任务报错信息,任务执行出错后将出错信息回传客户前端
{
"type": "task_error",
"message": "错误信息"
}
通过调用 ws.send
方法向工具箱发送消息。
ws.send(JSON.stringify({type: 'task_completed'}));
通过监听 message
事件接收工具箱发送的消息。
ws.on('message', function incoming(data) {
console.log(data);
});
V0.1.2 调整脚本配置功能,实现不同钱包可拥有独立配置,脚本配置格式目前支持input和select两种,以下为脚本配置格式
{
"testInput": {"type":"input", "text":"测试输入框"},
"testSelect": {"type":"select", "options": [
{"value":"test1", "text":"选择框1"},
{"value":"test2", "text":"选择框2"},
{"value":"test3", "text":"选择框3"}
], "defaultValue":"test2"}
}
例如用户通用配置的测试输入框的输入内容"测试1",选择"选择框3"后,请求数据将收到以下信息
{
...,
"config":{
"default":{
"testInput":"测试1",
"testSelect":"选择框3"
}
}
}
如果在使用中遇到问题,进入discord @Aming 点击进入社区