# 用戶端架構

OCAP 用戶端採用模組化架構設計，以滿足不同 JavaScript 環境和特定使用情境的需求。它並非提供一個一體適用的函式庫，而是提供多個用戶端實作，每個實作都針對特定情境進行了最佳化，例如 Node.js 後端或對套件大小敏感的網頁應用程式。這種方法讓您可以根據需求選擇最高效的用戶端，從而在必要時確保更佳的效能和更小的體積。

所有用戶端變體都建立在一個共同的基礎 `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` 擴充了 `GraphQLClientBase`，並針對最小化套件大小進行了最佳化。它將 Node.js 特有的依賴項替換為瀏覽器相容的替代方案，例如 `wolfy87-eventemitter`。如果您正在建構一個對效能和載入時間至關重要的網頁應用程式，此用戶端可以在不增加完整輔助方法套件額外負擔的情況下，提供核心的 OCAP 功能。


## 我該使用哪個用戶端？

為幫助您決定，以下是針對各種情境的建議用戶端摘要：

| 環境      | 使用情境                    | 建議的用戶端                | 匯入路徑                |
| :------ | :---------------------- | :-------------------- | :------------------ |
| Node.js | 後端服務、指令碼、CLI 工具         | `NativeGraphqlClient` | `@ocap/client/node` |
| 瀏覽器     | 一般網頁應用程式 (例如 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 輕量瀏覽器用戶端 icon=logos:javascript
const GraphqlClientLite = require('@ocap/client/lite');
const client = new GraphqlClientLite('https://beta.abtnetwork.io/api');
```


## 總結

了解不同的用戶端實作，能讓您根據應用程式的環境和需求做出明智的選擇。透過選擇適當的用戶端，您可以針對效能、套件大小和易用性進行最佳化。

現在您已經了解了用戶端架構，可以更深入地研究交易是如何建構和處理的。請在 [交易生命週期](./core-concepts-transaction-lifecycle.md) 指南中了解更多資訊。