# 客户端架构

OCAP 客户端采用模块化架构设计，以满足不同 JavaScript 环境和特定用例的需求。它并非提供一个“一刀切”的库，而是提供了多种客户端实现，每种实现都针对特定上下文进行了优化，例如 Node.js 后端或对包大小敏感的 Web 应用程序。这种方法让您可以根据需要选择最高效的客户端，从而在必要时确保更好的性能和更小的占用空间。

所有客户端变体都构建于一个通用基础 `GraphQLClientBase` 之上，该基础提供了与区块链的 GraphQL API 交互的核心功能。

### 继承关系图

下图说明了不同客户端实现之间的关系：

<!-- DIAGRAM_IMAGE_START:architecture:4:3 -->

![Client Architecture](assets/diagram/core-concepts-client-architecture-01.jpg)

<!-- DIAGRAM_IMAGE_END -->


## 客户端实现

以下是每种可用客户端及其预期用例的详细说明。

### `GraphQLClientBase`（核心）

这是所有其他客户端都扩展的基础、轻量级客户端。它提供了与区块链通信的基本功能：

* 发送 GraphQL 查询和变更。
* 建立用于实时事件订阅的 WebSocket 连接。
* 处理用于代付交易的 gas 支付头。
* 它与环境无关，但如果您使用订阅功能，则需要为 WebSocket 和 EventEmitter 提供兼容的实现。

如果您只需要基本的只读功能并希望最小化依赖项，那么这个客户端是理想的选择。

### `GraphQLClient`（完整客户端）

这是标准的、通用的客户端，也是您最可能经常使用的客户端。它扩展了 `GraphQLClientBase`，并添加了一组丰富的高级辅助方法，以简化常见的链上操作。这些辅助方法涵盖了创建资产、转移通证和管理质押等任务，将原始 GraphQL 变更的复杂性抽象出来。

默认情况下，它还在实例化时自动初始化其上下文，使其可以立即使用。

### `NativeGraphqlClient`（用于 Node.js）

该客户端专门为 Node.js 运行时进行了优化。它扩展了完整的 `GraphQLClient`，并将其配置为使用 Node.js 的原生 `events` 模块进行事件处理。这使其成为任何在服务器上运行的后端应用程序、命令行工具或脚本的性能最高、最可靠的选择。

### `GraphqlClientLite`（用于浏览器）

`GraphqlClientLite` 专为前端 Web 应用程序设计，它扩展了 `GraphQLClientBase` 并为最小化包体积进行了优化。它将 Node.js 特定的依赖项替换为浏览器兼容的替代品，如 `wolfy87-eventemitter`。如果您正在构建一个性能和加载时间至关重要的 Web 应用程序，该客户端可以在不增加完整辅助方法套件额外负担的情况下提供核心 OCAP 功能。


## 我应该使用哪个客户端？

为了帮助您做出决定，以下是针对每种场景推荐的客户端摘要：

| 环境      | 使用场景                    | 推荐客户端                 | 导入路径                |
| :------ | :---------------------- | :-------------------- | :------------------ |
| Node.js | 后端服务、脚本、CLI 工具          | `NativeGraphqlClient` | `@ocap/client/node` |
| 浏览器     | 通用 Web 应用（例如 React、Vue） | `GraphQLClient`       | `@ocap/client`      |
| 浏览器     | 对包体积敏感的应用               | `GraphqlClientLite`   | `@ocap/client/lite` |
| 任何环境    | 只读，仅需最少功能               | `GraphQLClientBase`   | `@ocap/client/base` |

### 导入示例

以下是在代码中导入每个客户端的方式：

```javascript Node.js 客户端 icon=logos:nodejs-icon
const NativeGraphqlClient = require('@ocap/client/node');
const client = new NativeGraphqlClient('https://beta.abtnetwork.io/api');
```

```javascript 完整浏览器客户端 icon=logos:javascript
const GraphQLClient = require('@ocap/client');
const client = new GraphQLClient('https://beta.abtnetwork.io/api');
```

```javascript Lite 浏览器客户端 icon=logos:javascript
const GraphqlClientLite = require('@ocap/client/lite');
const client = new GraphqlClientLite('https://beta.abtnetwork.io/api');
```


## 总结

了解不同的客户端实现，可以帮助您根据应用程序的环境和需求做出明智的选择。通过选择合适的客户端，您可以优化性能、包体积和易用性。

现在您已经了解了客户端架构，可以更深入地了解交易是如何构建和处理的。请在[交易生命周期](./core-concepts-transaction-lifecycle.md)指南中了解更多信息。