跳到主要内容

安装

通过脚手架创建项目#

你可以通过脚手架工具 create-tsrpc-app 快速创建全栈项目。

npx create-tsrpc-app@latest
# 或者
yarn create tsrpc-app

或者,你也可以根据本节内容,手动安装和配置项目。

手动安装#

TSRPC 客户端支持许多平台,根据目标平台选择对应的 NPM 包安装。

客户端平台NPM 包
浏览器、React Nativetsrpc-browser
小程序(微信、抖音、QQ 等)tsrpc-miniapp
NodeJS(如后端微服务互调)tsrpc

例如目标平台是浏览器,则安装 tsrpc-browser

npm install tsrpc-browser
# 或者
yarn add tsrpc-browser

创建客户端#

无论安装哪个平台的客户端 SDK,其 API 都是一致的:

  • HTTP 客户端使用 HttpClient
  • WebSocket 客户端使用 WsClient
  • 客户端支持并发请求,所以你可以只创建一个,全局共享

HttpClientWsClient 的构造函数均有 2 个参数。

HTTP 客户端#

import { HttpClient } from 'tsrpc-browser';
import { serviceProto } from './shared/protocols/serviceProto';
// 创建全局唯一的 apiClient,需要时从该文件引入
export const apiClient = new HttpClient(serviceProto, {
server: 'https://xxx.com/api',
json: true
});

WebSocket 客户端#

WebSocket 客户端需要手动连接后方可使用:

import { WsClient } from 'tsrpc-browser';
import { serviceProto } from './shared/protocols/serviceProto';
// 创建客户端
export const client = new WsClient(serviceProto, {
server: 'wss://xxx.com/api',
json: true
});
// 连接
client.connect().then(res=>{
// 连接不一定成功(例如网络错误),所以要记得错误处理
if(!res.isSucc){
console.log(res.errMsg);
}
})

跨平台使用#

例如你在使用 uni-appTaro 这样的跨平台前端框架实现一个需要同时支持多端(例如浏览器 + 微信小程序 + Android App + iOS App)的应用。 那么你需要根据实际运行的平台,来选择对应的客户端库。 由于 TSRPC 的 API 在不同平台的库之间是 重名 的,所以你需要在 import 时手动 as 为一个 别名,例如:

import { HttpClient as HttpClientBrowser } from 'tsrpc-browser';
import { HttpClient as HttpClientMiniapp } from 'tsrpc-miniapp';
import { serviceProto } from './shared/protocols/serviceProto';
// 根据实际运行平台创建对应的 Client
export const client = 是微信小程序 ?
// 微信小程序使用 tsrpc-miniapp
new HttpClientMiniapp(serviceProto, {
server: 'https://xxx.com/api',
json: true
})
// 浏览器和原生环境使用 tsrpc-browser (XMLHttpRequest 兼容的环境都可以使用 tsrpc-browser)
: new HttpClientBrowser(serviceProto, {
server: 'https://xxx.com/api',
json: true
});

在 Cocos Creator 中使用#

目前 Cocos Creator 2.x 和 3.x 各版本都是完美支持的。

由于 Cocos Creator 天然就是 NPM 支持良好,所以无需额外配置,参照上述例子 npm install 安装和 import 使用即可。 如果你的项目是跨平台的,那么也需要像上面的例子那样,根据运行平台来创建对应的客户端。