@ocap/client 1.25.6 → 1.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -79
- package/dist/base.js +2 -2
- package/dist/base.js.map +1 -1
- package/dist/bundle.js +1 -1
- package/dist/extension.js +4 -4
- package/dist/extension.js.map +1 -1
- package/dist/report.html +2 -2
- package/docs/api-reference-client-methods.ja.md +38 -38
- package/docs/api-reference-client-methods.zh-TW.md +47 -47
- package/docs/api-reference-client-methods.zh.md +34 -34
- package/docs/api-reference-data-types.ja.md +20 -20
- package/docs/api-reference-data-types.zh-TW.md +17 -17
- package/docs/api-reference-data-types.zh.md +24 -24
- package/docs/api-reference-low-level-api.ja.md +49 -49
- package/docs/api-reference-low-level-api.zh-TW.md +48 -48
- package/docs/api-reference-low-level-api.zh.md +43 -43
- package/docs/api-reference-query-mutation-methods.ja.md +85 -85
- package/docs/api-reference-query-mutation-methods.zh-TW.md +140 -140
- package/docs/api-reference-query-mutation-methods.zh.md +141 -141
- package/docs/api-reference-transaction-helpers.ja.md +120 -120
- package/docs/api-reference-transaction-helpers.zh-TW.md +119 -119
- package/docs/api-reference-transaction-helpers.zh.md +153 -153
- package/docs/api-reference.ja.md +6 -6
- package/docs/api-reference.zh-TW.md +5 -5
- package/docs/api-reference.zh.md +8 -8
- package/docs/core-concepts-client-architecture.ja.md +26 -26
- package/docs/core-concepts-client-architecture.zh-TW.md +34 -34
- package/docs/core-concepts-client-architecture.zh.md +26 -26
- package/docs/core-concepts-event-subscriptions.ja.md +29 -29
- package/docs/core-concepts-event-subscriptions.zh-TW.md +23 -23
- package/docs/core-concepts-event-subscriptions.zh.md +29 -29
- package/docs/core-concepts-gas-payment.ja.md +27 -27
- package/docs/core-concepts-gas-payment.zh-TW.md +28 -28
- package/docs/core-concepts-gas-payment.zh.md +32 -32
- package/docs/core-concepts-transaction-lifecycle.ja.md +40 -40
- package/docs/core-concepts-transaction-lifecycle.zh-TW.md +43 -43
- package/docs/core-concepts-transaction-lifecycle.zh.md +49 -49
- package/docs/core-concepts.ja.md +7 -7
- package/docs/core-concepts.zh-TW.md +6 -6
- package/docs/core-concepts.zh.md +7 -7
- package/docs/getting-started-basic-usage.ja.md +24 -24
- package/docs/getting-started-basic-usage.zh-TW.md +28 -28
- package/docs/getting-started-basic-usage.zh.md +24 -24
- package/docs/getting-started-installation.ja.md +13 -13
- package/docs/getting-started-installation.zh-TW.md +9 -9
- package/docs/getting-started-installation.zh.md +15 -15
- package/docs/getting-started.ja.md +5 -5
- package/docs/getting-started.zh-TW.md +6 -6
- package/docs/getting-started.zh.md +6 -7
- package/docs/how-to-guides-delegate-permissions.ja.md +21 -21
- package/docs/how-to-guides-delegate-permissions.zh-TW.md +20 -21
- package/docs/how-to-guides-delegate-permissions.zh.md +18 -18
- package/docs/how-to-guides-manage-accounts.ja.md +21 -21
- package/docs/how-to-guides-manage-accounts.zh-TW.md +23 -23
- package/docs/how-to-guides-manage-accounts.zh.md +17 -17
- package/docs/how-to-guides-manage-assets.ja.md +137 -60
- package/docs/how-to-guides-manage-assets.md +77 -0
- package/docs/how-to-guides-manage-assets.zh-TW.md +116 -39
- package/docs/how-to-guides-manage-assets.zh.md +142 -65
- package/docs/how-to-guides-manage-tokens.ja.md +47 -47
- package/docs/how-to-guides-manage-tokens.zh-TW.md +49 -49
- package/docs/how-to-guides-manage-tokens.zh.md +34 -34
- package/docs/how-to-guides-stake-tokens-and-assets.ja.md +56 -56
- package/docs/how-to-guides-stake-tokens-and-assets.zh-TW.md +55 -55
- package/docs/how-to-guides-stake-tokens-and-assets.zh.md +51 -51
- package/docs/how-to-guides-transfer-tokens-and-nfts.ja.md +45 -45
- package/docs/how-to-guides-transfer-tokens-and-nfts.zh-TW.md +46 -46
- package/docs/how-to-guides-transfer-tokens-and-nfts.zh.md +37 -37
- package/docs/how-to-guides.ja.md +8 -8
- package/docs/how-to-guides.zh-TW.md +4 -4
- package/docs/how-to-guides.zh.md +6 -6
- package/docs/overview.ja.md +15 -15
- package/docs/overview.zh-TW.md +14 -14
- package/docs/overview.zh.md +12 -12
- package/lib/base.js +2 -2
- package/lib/base.js.map +1 -1
- package/lib/extension.js +4 -4
- package/lib/extension.js.map +1 -1
- package/package.json +16 -16
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
# イベントサブスクリプション
|
|
2
2
|
|
|
3
|
-
OCAP Client
|
|
3
|
+
OCAP Clientは、アプリケーションがオンチェーンアクティビティをリアルタイムでリッスンできるようにする、強力なリアルタイムイベントサブスクリプションシステムを提供します。この機能はWebSocket上に構築されており、ブロックチェーンノードへの永続的な接続を提供し、更新をチェックするための継続的なポーリングの必要性をなくします。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
特定のイベントトピックをサブスクライブすることで、新しいトランザクションが作成されたとき、アセットが転送されたとき、またはトークンが交換されたときなど、さまざまなオンチェーンイベントの即時通知を受け取ることができます。これは、ブロックチェーンの状態変化にリアルタイムで反応する、レスポンシブでインタラクティブなアプリケーションを構築するために不可欠です。これらのイベントが何によってトリガーされるかをより深く理解するには、[トランザクションライフサイクル](./core-concepts-transaction-lifecycle.md)を確認することをお勧めします。
|
|
6
6
|
|
|
7
7
|
## 仕組み
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
内部では、イベントを最初にサブスクライブすると、OCAP Clientは自動的にブロックチェーンノードの指定されたエンドポイントへのWebSocket接続を確立します。この接続は維持され、イベントが発生するとすぐにノードがクライアントにイベントデータを直接プッシュできるようになります。
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
クライアントはWebSocket接続のライフサイクルを管理します。初回接続を処理し、接続をアクティブに保つためにハートビートメッセージを送信し、接続が切断された場合に再接続を試みます。これにより、最小限の設定で安定した信頼性の高いイベントストリームが保証されます。
|
|
12
12
|
|
|
13
13
|
## イベントのサブスクライブ
|
|
14
14
|
|
|
15
|
-
イベントのリッスンを開始するには、`subscribe
|
|
15
|
+
イベントのリッスンを開始するには、`subscribe` メソッドを使用します。イベントトピック(イベントを識別する文字列)と、そのイベントが受信されるたびに実行されるコールバック関数を提供します。
|
|
16
16
|
|
|
17
17
|
```javascript OCAP Client icon=logos:javascript
|
|
18
18
|
const client = new GraphQLClient('https://beta.abtnetwork.io/api/v2/gql');
|
|
19
19
|
|
|
20
20
|
const handleNewTransaction = (eventData) => {
|
|
21
|
-
console.log('
|
|
21
|
+
console.log('新しいトランザクションがオンチェーンで作成されました:', eventData);
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
// 'tx.create'
|
|
24
|
+
// 'tx.create' トピックをサブスクライブ
|
|
25
25
|
client.subscribe('tx.create', handleNewTransaction);
|
|
26
26
|
```
|
|
27
27
|
|
|
@@ -30,24 +30,24 @@ client.subscribe('tx.create', handleNewTransaction);
|
|
|
30
30
|
**`subscribe(topic, callback)`**
|
|
31
31
|
|
|
32
32
|
<x-field-group>
|
|
33
|
-
<x-field data-name="topic" data-type="string" data-required="true" data-desc="
|
|
33
|
+
<x-field data-name="topic" data-type="string" data-required="true" data-desc="サブスクライブするイベントトピックの名前。例: 'tx.create'。"></x-field>
|
|
34
34
|
<x-field data-name="callback" data-type="Function" data-required="true" data-desc="イベントが受信されたときに実行される関数。イベントデータは最初の引数として渡されます。"></x-field>
|
|
35
35
|
</x-field-group>
|
|
36
36
|
|
|
37
37
|
### 一般的なイベントトピック
|
|
38
38
|
|
|
39
|
-
イベントトピックは通常、`tx.<transaction_type
|
|
39
|
+
イベントトピックは通常、`tx.<transaction_type>` のパターンに従います。以下にいくつかの一般的な例を示します。
|
|
40
40
|
|
|
41
|
-
|
|
|
41
|
+
| トピック | 説明 |
|
|
42
42
|
|---|---|
|
|
43
43
|
| `tx.create` | 新しいトランザクションが正常に処理され、ブロックに追加されたときに発行されます。 |
|
|
44
|
-
| `tx.transfer_v2` | `transferV2
|
|
45
|
-
| `tx.exchange_v2` | `exchangeV2
|
|
46
|
-
| `tx.create_asset` |
|
|
44
|
+
| `tx.transfer_v2` | 特に `transferV2` トランザクションが発生したときに発行されます。 |
|
|
45
|
+
| `tx.exchange_v2` | `exchangeV2` (アトミックスワップ) トランザクションが完了したときに発行されます。 |
|
|
46
|
+
| `tx.create_asset` | 新しいアセット (NFT) が作成されたときに発行されます。 |
|
|
47
47
|
|
|
48
48
|
## イベントのサブスクライブ解除
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
特にコンポーネントがマウントおよびアンマウントされるシングルページアプリケーションでは、不要になったサブスクリプションをクリーンアップすることをお勧めします。これにより、メモリリークや不要な処理を防ぐことができます。`unsubscribe` メソッドを使用してサブスクリプションを削除できます。
|
|
51
51
|
|
|
52
52
|
```javascript OCAP Client icon=logos:javascript
|
|
53
53
|
// 特定のリスナーを削除するには、同じコールバック関数の参照を渡します
|
|
@@ -63,12 +63,12 @@ client.unsubscribe('tx.create');
|
|
|
63
63
|
|
|
64
64
|
<x-field-group>
|
|
65
65
|
<x-field data-name="topic" data-type="string" data-required="true" data-desc="サブスクライブを解除するイベントトピックの名前。"></x-field>
|
|
66
|
-
<x-field data-name="callback" data-type="Function" data-required="false" data-desc="
|
|
66
|
+
<x-field data-name="callback" data-type="Function" data-required="false" data-desc="オプション。削除する特定のコールバック関数。省略した場合、指定されたトピックのすべてのリスナーが削除されます。"></x-field>
|
|
67
67
|
</x-field-group>
|
|
68
68
|
|
|
69
69
|
## 完全な例
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
イベントのサブスクライブ、トリガー、そしてサブスクライブ解除を実演する完全な例を以下に示します。
|
|
72
72
|
|
|
73
73
|
```javascript Event Subscription Lifecycle icon=logos:javascript
|
|
74
74
|
import GraphQLClient from '@ocap/client';
|
|
@@ -82,35 +82,35 @@ const main = async () => {
|
|
|
82
82
|
client.subscribe('tx.create', () => (events.txCreate += 1));
|
|
83
83
|
client.subscribe('tx.transfer_v2', () => (events.txTransfer += 1));
|
|
84
84
|
|
|
85
|
-
console.log('
|
|
85
|
+
console.log('tx.create および tx.transfer_v2 イベントをサブスクライブしました...');
|
|
86
86
|
|
|
87
87
|
// 短時間待機するためのヘルパー
|
|
88
88
|
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
|
89
|
-
await sleep(100); //
|
|
89
|
+
await sleep(100); // サブスクリプションが登録されるまで少し待機
|
|
90
90
|
|
|
91
91
|
// 2. イベントをトリガーするアクションを実行
|
|
92
|
-
//
|
|
92
|
+
// 注: これには資金のあるウォレットが必要です。テストトークンは https://faucet.abtnetwork.io/ から入手できます。
|
|
93
93
|
const sender = fromRandom(); // 実際のアプリでは、資金のあるウォレットをロードします
|
|
94
|
-
//
|
|
95
|
-
console.log('
|
|
94
|
+
// この例では、アクションが成功することを前提とします。
|
|
95
|
+
console.log('転送トランザクションはイベントハンドラをトリガーします。');
|
|
96
96
|
|
|
97
|
-
//
|
|
97
|
+
// 実際のシナリオでは、転送が成功した後:
|
|
98
98
|
// await client.transfer({ to: 'z1...', token: 1, wallet: sender });
|
|
99
99
|
|
|
100
|
-
//
|
|
100
|
+
// 成功したトランザクションの後にイベントカウンターが増加するのをシミュレートしてみましょう
|
|
101
101
|
events.txCreate = 1;
|
|
102
102
|
events.txTransfer = 1;
|
|
103
103
|
|
|
104
|
-
await sleep(100); //
|
|
104
|
+
await sleep(100); // イベントが処理されるのを待機
|
|
105
105
|
|
|
106
106
|
// 3. イベントハンドラが呼び出されたことを確認
|
|
107
|
-
console.log(`tx.create
|
|
108
|
-
console.log(`tx.transfer_v2
|
|
107
|
+
console.log(`tx.create は ${events.txCreate} 回呼び出されました。`);
|
|
108
|
+
console.log(`tx.transfer_v2 は ${events.txTransfer} 回呼び出されました。`);
|
|
109
109
|
|
|
110
110
|
// 4. クリーンアップのためにサブスクライブを解除
|
|
111
111
|
client.unsubscribe('tx.create');
|
|
112
112
|
client.unsubscribe('tx.transfer_v2');
|
|
113
|
-
console.log('
|
|
113
|
+
console.log('イベントのサブスクライブを解除しました。');
|
|
114
114
|
};
|
|
115
115
|
|
|
116
116
|
main().catch(console.error);
|
|
@@ -118,6 +118,6 @@ main().catch(console.error);
|
|
|
118
118
|
|
|
119
119
|
## まとめ
|
|
120
120
|
|
|
121
|
-
イベントサブスクリプションは、OCAP Clientを使用して動的な
|
|
121
|
+
イベントサブスクリプションは、OCAP Clientを使用して動的なdAppを構築するためのコア機能です。信頼性の高いWebSocket接続を使用してオンチェーンイベントにリアルタイムで反応するための、シンプルかつ強力なAPIを提供します。`subscribe` および `unsubscribe` メソッドを使用することで、アプリケーション内のリアルタイムデータフローを効率的に管理できます。
|
|
122
122
|
|
|
123
|
-
|
|
123
|
+
トランザクションがどのように構築・送信され、それがこれらのイベントを生成するかの詳細については、[トランザクションライフサイクル](./core-concepts-transaction-lifecycle.md)のドキュメントを参照してください。イベントリスナーと組み合わせると便利な、ユーザーのトランザクション手数料をスポンサーする方法については、[ガス支払い](./core-concepts-gas-payment.md)をお読みください。
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# 事件訂閱
|
|
2
2
|
|
|
3
|
-
OCAP Client
|
|
3
|
+
OCAP Client 提供一個功能強大、即時的事件訂閱系統,讓您的應用程式能夠即時監聽鏈上活動。此功能基於 WebSockets 建立,提供與區塊鏈節點的持久連線,無需透過持續輪詢來檢查更新。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
透過訂閱特定的事件主題,您可以接收到各種鏈上事件的即時通知,例如新交易建立、資產轉移或代幣交換。這對於建構能即時回應區塊鏈狀態變化的互動式應用程式至關重要。若想深入了解觸發這些事件的原因,您可以參閱 [交易生命週期](./core-concepts-transaction-lifecycle.md)。
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## 運作方式
|
|
8
8
|
|
|
9
|
-
在底層,當您首次訂閱事件時,OCAP Client 會自動與區塊鏈節點的指定端點建立 WebSocket
|
|
9
|
+
在底層,當您首次訂閱事件時,OCAP Client 會自動與區塊鏈節點的指定端點建立 WebSocket 連線。此連線會保持活動狀態,讓節點能在事件發生時立即將事件資料推送至您的客戶端。
|
|
10
10
|
|
|
11
|
-
客戶端會為您管理 WebSocket
|
|
11
|
+
客戶端會為您管理 WebSocket 連線的生命週期。它會處理初始連線、發送心跳訊息以維持連線,並在連線中斷時嘗試重新連線。這確保了穩定可靠的事件流,而您只需進行最少的設定。
|
|
12
12
|
|
|
13
13
|
## 訂閱事件
|
|
14
14
|
|
|
15
|
-
若要開始監聽事件,請使用 `subscribe`
|
|
15
|
+
若要開始監聽事件,請使用 `subscribe` 方法。您需要提供一個事件主題(用於識別事件的字串)和一個回呼函式,該函式將在每次收到事件時執行。
|
|
16
16
|
|
|
17
17
|
```javascript OCAP Client icon=logos:javascript
|
|
18
18
|
const client = new GraphQLClient('https://beta.abtnetwork.io/api/v2/gql');
|
|
@@ -21,33 +21,33 @@ const handleNewTransaction = (eventData) => {
|
|
|
21
21
|
console.log('A new transaction was created on-chain:', eventData);
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
//
|
|
24
|
+
// 訂閱 'tx.create' 主題
|
|
25
25
|
client.subscribe('tx.create', handleNewTransaction);
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
###
|
|
28
|
+
### 方法簽章
|
|
29
29
|
|
|
30
30
|
**`subscribe(topic, callback)`**
|
|
31
31
|
|
|
32
32
|
<x-field-group>
|
|
33
33
|
<x-field data-name="topic" data-type="string" data-required="true" data-desc="要訂閱的事件主題名稱。例如:'tx.create'。"></x-field>
|
|
34
|
-
<x-field data-name="callback" data-type="Function" data-required="true" data-desc="
|
|
34
|
+
<x-field data-name="callback" data-type="Function" data-required="true" data-desc="接收到事件時要執行的函式。事件資料會作為第一個參數傳入。"></x-field>
|
|
35
35
|
</x-field-group>
|
|
36
36
|
|
|
37
37
|
### 常見事件主題
|
|
38
38
|
|
|
39
|
-
事件主題通常遵循 `tx.<transaction_type>`
|
|
39
|
+
事件主題通常遵循 `tx.<transaction_type>` 的模式。以下是一些常見範例:
|
|
40
40
|
|
|
41
41
|
| Topic | Description |
|
|
42
42
|
|---|---|
|
|
43
|
-
| `tx.create` |
|
|
44
|
-
| `tx.transfer_v2` | 當 `transferV2`
|
|
43
|
+
| `tx.create` | 任何新交易成功處理並加入區塊時觸發。 |
|
|
44
|
+
| `tx.transfer_v2` | 當 `transferV2` 交易發生時特別觸發。 |
|
|
45
45
|
| `tx.exchange_v2` | 當 `exchangeV2`(原子交換)交易完成時觸發。 |
|
|
46
46
|
| `tx.create_asset` | 當新資產(NFT)被建立時觸發。 |
|
|
47
47
|
|
|
48
48
|
## 取消訂閱事件
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
當不再需要訂閱時,最好進行清理,特別是在元件會掛載和卸載的單頁應用程式中。這可以防止記憶體洩漏和不必要的處理。您可以使用 `unsubscribe` 方法來移除訂閱。
|
|
51
51
|
|
|
52
52
|
```javascript OCAP Client icon=logos:javascript
|
|
53
53
|
// 若要移除特定的監聽器,請傳入相同的回呼函式參考
|
|
@@ -57,18 +57,18 @@ client.unsubscribe('tx.create', handleNewTransaction);
|
|
|
57
57
|
client.unsubscribe('tx.create');
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
-
###
|
|
60
|
+
### 方法簽章
|
|
61
61
|
|
|
62
62
|
**`unsubscribe(topic, [callback])`**
|
|
63
63
|
|
|
64
64
|
<x-field-group>
|
|
65
65
|
<x-field data-name="topic" data-type="string" data-required="true" data-desc="要取消訂閱的事件主題名稱。"></x-field>
|
|
66
|
-
<x-field data-name="callback" data-type="Function" data-required="false" data-desc="
|
|
66
|
+
<x-field data-name="callback" data-type="Function" data-required="false" data-desc="選用。要移除的特定回呼函式。如果省略,將移除該主題的所有監聽器。"></x-field>
|
|
67
67
|
</x-field-group>
|
|
68
68
|
|
|
69
69
|
## 完整範例
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
以下是一個完整範例,示範了訂閱事件、觸發事件,然後取消訂閱的過程。
|
|
72
72
|
|
|
73
73
|
```javascript Event Subscription Lifecycle icon=logos:javascript
|
|
74
74
|
import GraphQLClient from '@ocap/client';
|
|
@@ -86,24 +86,24 @@ const main = async () => {
|
|
|
86
86
|
|
|
87
87
|
// 輔助函式,用於等待一小段時間
|
|
88
88
|
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
|
89
|
-
await sleep(100); //
|
|
89
|
+
await sleep(100); // 稍待片刻,以便訂閱註冊成功
|
|
90
90
|
|
|
91
91
|
// 2. 執行一個會觸發事件的動作
|
|
92
|
-
// 注意:這需要一個有資金的錢包。您可以從 https://faucet.abtnetwork.io/
|
|
92
|
+
// 注意:這需要一個有資金的錢包。您可以從 https://faucet.abtnetwork.io/ 獲取測試代幣。
|
|
93
93
|
const sender = fromRandom(); // 在實際應用中,請載入一個有資金的錢包
|
|
94
94
|
// 在此範例中,我們假設該動作會成功。
|
|
95
95
|
console.log('A transfer transaction would trigger the event handlers.');
|
|
96
96
|
|
|
97
|
-
//
|
|
97
|
+
// 在實際情境中,成功轉帳後:
|
|
98
98
|
// await client.transfer({ to: 'z1...', token: 1, wallet: sender });
|
|
99
99
|
|
|
100
|
-
//
|
|
100
|
+
// 讓我們模擬在成功交易後事件計數器增加的情況
|
|
101
101
|
events.txCreate = 1;
|
|
102
102
|
events.txTransfer = 1;
|
|
103
103
|
|
|
104
104
|
await sleep(100); // 等待事件處理完成
|
|
105
105
|
|
|
106
|
-
// 3.
|
|
106
|
+
// 3. 驗證事件處理函式是否被呼叫
|
|
107
107
|
console.log(`tx.create was called ${events.txCreate} time(s).`);
|
|
108
108
|
console.log(`tx.transfer_v2 was called ${events.txTransfer} time(s).`);
|
|
109
109
|
|
|
@@ -118,6 +118,6 @@ main().catch(console.error);
|
|
|
118
118
|
|
|
119
119
|
## 總結
|
|
120
120
|
|
|
121
|
-
事件訂閱是使用 OCAP Client
|
|
121
|
+
事件訂閱是使用 OCAP Client 建構動態 dApp 的核心功能。它們提供了一個簡單而強大的 API,可透過可靠的 WebSocket 連線即時回應鏈上事件。透過使用 `subscribe` 和 `unsubscribe` 方法,您可以有效率地管理應用程式中的即時資料流。
|
|
122
122
|
|
|
123
|
-
|
|
123
|
+
有關如何建構和發送交易(進而產生這些事件)的更多詳細資訊,請參閱 [交易生命週期](./core-concepts-transaction-lifecycle.md) 文件。若要探索如何為您的使用者贊助交易費用(這在與事件監聽器結合使用時非常有用),請閱讀有關 [Gas 費用支付](./core-concepts-gas-payment.md) 的內容。
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# 事件订阅
|
|
2
2
|
|
|
3
|
-
OCAP Client
|
|
3
|
+
OCAP Client 提供了一个强大的实时事件订阅系统,允许您的应用程序实时监听链上活动。该功能基于 WebSocket 构建,提供与区块链节点的持久连接,无需通过持续轮询来检查更新。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
通过订阅特定的事件主题,您可以收到各种链上事件的即时通知,例如新交易创建、资产转移或代币交换。这对于构建能够实时响应区块链状态变化的响应式和交互式应用程序至关重要。要更深入地了解触发这些事件的原因,您可能需要查看[交易生命周期](./core-concepts-transaction-lifecycle.md)。
|
|
6
6
|
|
|
7
7
|
## 工作原理
|
|
8
8
|
|
|
9
|
-
在底层,当您首次订阅事件时,OCAP Client 会自动与区块链节点的指定端点建立 WebSocket
|
|
9
|
+
在底层,当您首次订阅事件时,OCAP Client 会自动与区块链节点的指定端点建立 WebSocket 连接。该连接会保持活动状态,允许节点在事件发生时立即将事件数据推送到您的客户端。
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
客户端会为您管理 WebSocket 连接的生命周期。它会处理初始连接、发送心跳消息以保持连接活跃,并在连接断开时尝试重新连接。这确保了事件流的稳定可靠,而您只需进行最少的配置。
|
|
12
12
|
|
|
13
13
|
## 订阅事件
|
|
14
14
|
|
|
15
|
-
要开始监听事件,您可以使用 `subscribe`
|
|
15
|
+
要开始监听事件,您可以使用 `subscribe` 方法。您需要提供一个事件主题(用于标识事件的字符串)和一个回调函数,该函数会在收到事件时执行。
|
|
16
16
|
|
|
17
17
|
```javascript OCAP Client icon=logos:javascript
|
|
18
18
|
const client = new GraphQLClient('https://beta.abtnetwork.io/api/v2/gql');
|
|
@@ -30,8 +30,8 @@ client.subscribe('tx.create', handleNewTransaction);
|
|
|
30
30
|
**`subscribe(topic, callback)`**
|
|
31
31
|
|
|
32
32
|
<x-field-group>
|
|
33
|
-
<x-field data-name="topic" data-type="string" data-required="true" data-desc="
|
|
34
|
-
<x-field data-name="callback" data-type="Function" data-required="true" data-desc="
|
|
33
|
+
<x-field data-name="topic" data-type="string" data-required="true" data-desc="要订阅的事件主题名称。例如 'tx.create'。"></x-field>
|
|
34
|
+
<x-field data-name="callback" data-type="Function" data-required="true" data-desc="收到事件时要执行的函数。事件数据作为第一个参数传入。"></x-field>
|
|
35
35
|
</x-field-group>
|
|
36
36
|
|
|
37
37
|
### 常见事件主题
|
|
@@ -40,17 +40,17 @@ client.subscribe('tx.create', handleNewTransaction);
|
|
|
40
40
|
|
|
41
41
|
| Topic | Description |
|
|
42
42
|
|---|---|
|
|
43
|
-
| `tx.create` |
|
|
43
|
+
| `tx.create` | 任何新交易成功处理并添加到区块时触发。 |
|
|
44
44
|
| `tx.transfer_v2` | 当 `transferV2` 交易发生时专门触发。 |
|
|
45
45
|
| `tx.exchange_v2` | 当 `exchangeV2`(原子交换)交易完成时触发。 |
|
|
46
|
-
| `tx.create_asset` | 当新资产(NFT
|
|
46
|
+
| `tx.create_asset` | 当新资产(NFT)创建时触发。 |
|
|
47
47
|
|
|
48
48
|
## 取消订阅事件
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
在不再需要订阅时进行清理是一种良好实践,尤其是在组件会挂载和卸载的单页应用程序中。这样可以防止内存泄漏和不必要的处理。您可以使用 `unsubscribe` 方法移除订阅。
|
|
51
51
|
|
|
52
52
|
```javascript OCAP Client icon=logos:javascript
|
|
53
|
-
//
|
|
53
|
+
// 要移除特定的监听器,请传入相同的回调函数引用
|
|
54
54
|
client.unsubscribe('tx.create', handleNewTransaction);
|
|
55
55
|
|
|
56
56
|
// 要移除特定主题的所有监听器
|
|
@@ -62,13 +62,13 @@ client.unsubscribe('tx.create');
|
|
|
62
62
|
**`unsubscribe(topic, [callback])`**
|
|
63
63
|
|
|
64
64
|
<x-field-group>
|
|
65
|
-
<x-field data-name="topic" data-type="string" data-required="true" data-desc="
|
|
66
|
-
<x-field data-name="callback" data-type="Function" data-required="false" data-desc="
|
|
65
|
+
<x-field data-name="topic" data-type="string" data-required="true" data-desc="要取消订阅的事件主题名称。"></x-field>
|
|
66
|
+
<x-field data-name="callback" data-type="Function" data-required="false" data-desc="可选。要移除的特定回调函数。如果省略,该主题的所有监听器都将被移除。"></x-field>
|
|
67
67
|
</x-field-group>
|
|
68
68
|
|
|
69
69
|
## 完整示例
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
以下是一个完整的示例,演示了订阅事件、触发事件,然后取消订阅的整个过程。
|
|
72
72
|
|
|
73
73
|
```javascript Event Subscription Lifecycle icon=logos:javascript
|
|
74
74
|
import GraphQLClient from '@ocap/client';
|
|
@@ -82,35 +82,35 @@ const main = async () => {
|
|
|
82
82
|
client.subscribe('tx.create', () => (events.txCreate += 1));
|
|
83
83
|
client.subscribe('tx.transfer_v2', () => (events.txTransfer += 1));
|
|
84
84
|
|
|
85
|
-
console.log('
|
|
85
|
+
console.log('Subscribed to tx.create and tx.transfer_v2 events...');
|
|
86
86
|
|
|
87
87
|
// 等待一小段时间的辅助函数
|
|
88
88
|
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
|
89
|
-
await sleep(100); //
|
|
89
|
+
await sleep(100); // 稍等片刻,以便订阅注册成功
|
|
90
90
|
|
|
91
|
-
// 2.
|
|
92
|
-
// 注意:这需要一个有资金的钱包。您可以从 https://faucet.abtnetwork.io/
|
|
93
|
-
const sender = fromRandom(); //
|
|
94
|
-
//
|
|
95
|
-
console.log('
|
|
91
|
+
// 2. 执行一个触发事件的操作
|
|
92
|
+
// 注意:这需要一个有资金的钱包。您可以从 https://faucet.abtnetwork.io/ 获取测试代币
|
|
93
|
+
const sender = fromRandom(); // 在实际应用中,加载一个有资金的钱包
|
|
94
|
+
// 在本示例中,我们假设操作会成功。
|
|
95
|
+
console.log('A transfer transaction would trigger the event handlers.');
|
|
96
96
|
|
|
97
|
-
//
|
|
97
|
+
// 在实际场景中,成功转账后:
|
|
98
98
|
// await client.transfer({ to: 'z1...', token: 1, wallet: sender });
|
|
99
99
|
|
|
100
|
-
//
|
|
100
|
+
// 让我们模拟成功交易后事件计数器递增的情况
|
|
101
101
|
events.txCreate = 1;
|
|
102
102
|
events.txTransfer = 1;
|
|
103
103
|
|
|
104
104
|
await sleep(100); // 等待事件处理
|
|
105
105
|
|
|
106
|
-
// 3.
|
|
107
|
-
console.log(`tx.create
|
|
108
|
-
console.log(`tx.transfer_v2
|
|
106
|
+
// 3. 验证事件处理函数是否被调用
|
|
107
|
+
console.log(`tx.create was called ${events.txCreate} time(s).`);
|
|
108
|
+
console.log(`tx.transfer_v2 was called ${events.txTransfer} time(s).`);
|
|
109
109
|
|
|
110
110
|
// 4. 取消订阅以进行清理
|
|
111
111
|
client.unsubscribe('tx.create');
|
|
112
112
|
client.unsubscribe('tx.transfer_v2');
|
|
113
|
-
console.log('
|
|
113
|
+
console.log('Unsubscribed from events.');
|
|
114
114
|
};
|
|
115
115
|
|
|
116
116
|
main().catch(console.error);
|
|
@@ -118,6 +118,6 @@ main().catch(console.error);
|
|
|
118
118
|
|
|
119
119
|
## 总结
|
|
120
120
|
|
|
121
|
-
事件订阅是使用 OCAP Client 构建动态 dApp 的核心功能。它们提供了一个简单而强大的 API,通过可靠的 WebSocket 连接实时响应链上事件。通过使用 `subscribe` 和 `unsubscribe`
|
|
121
|
+
事件订阅是使用 OCAP Client 构建动态 dApp 的核心功能。它们提供了一个简单而强大的 API,通过可靠的 WebSocket 连接实时响应链上事件。通过使用 `subscribe` 和 `unsubscribe` 方法,您可以高效地管理应用程序中的实时数据流。
|
|
122
122
|
|
|
123
|
-
|
|
123
|
+
有关如何构造和发送交易(这些交易会生成这些事件)的更多详细信息,请参阅[交易生命周期](./core-concepts-transaction-lifecycle.md)文档。要了解如何为您的用户代付交易费用(这在与事件监听器结合使用时非常有用),请阅读[燃料费支付](./core-concepts-gas-payment.md)。
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ガス代行支払い
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
ほとんどのブロックチェーンシステムでは、すべてのトランザクションにおいて、開始者が「ガス」として一般的に知られる手数料を支払う必要があります。これは、これらの手数料を支払うためのネイティブ通貨を持っていない可能性のある新規ユーザーにとって、大きな障壁となり得ます。OCAP Clientは、アプリケーション開発者がこれらの手数料を負担できるようにするガス代行支払い機能を導入し、ユーザーにシームレスな「ガスレス」体験を提供します。
|
|
4
4
|
|
|
5
5
|
この強力な機能により、dAppsはガスの複雑さを抽象化し、ユーザーのオンボーディングとアプリケーション全体のユーザビリティを向上させることができます。
|
|
6
6
|
|
|
7
7
|
## 仕組み
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
ガス代行支払いの仕組みは、標準的なHTTPヘッダーを通じて実装されます。クライアントインスタンスにガス支払い者ウォレットを設定すると、クライアントはブロックチェーンノードに送信するすべての`sendTx`ミューテーションに、自動的に2つの特別なヘッダーを添付します:
|
|
10
10
|
|
|
11
11
|
- `x-gas-payer-pk`: ガス料金を支払うウォレットの公開鍵。
|
|
12
|
-
- `x-gas-payer-sig`: ガス支払い者の秘密鍵で署名されたJSON Web Token (JWT)
|
|
12
|
+
- `x-gas-payer-sig`: ガス支払い者の秘密鍵で署名されたJSON Web Token (JWT)。このトークンにはトランザクションのハッシュが含まれており、その特定のトランザクションの手数料を支払うというスポンサーからの検証可能な承認として機能します。
|
|
13
13
|
|
|
14
14
|
ブロックチェーンノードがトランザクションを受信すると、2つの重要な検証を実行します:
|
|
15
15
|
|
|
16
|
-
1.
|
|
16
|
+
1. トランザクション自体に対するユーザーの署名を検証します。
|
|
17
17
|
2. ヘッダー内のガス支払い者の署名をトランザクションハッシュと照合して検証します。
|
|
18
18
|
|
|
19
19
|
両方の署名が有効な場合、トランザクションはユーザーの権限で実行されますが、対応するガス料金はガス支払い者のアカウント残高から差し引かれます。
|
|
20
20
|
|
|
21
21
|
### ワークフロー図
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
以下の図は、トランザクションの開始から実行までのガス代行支払いの全フローを示しています:
|
|
24
24
|
|
|
25
|
-
```d2
|
|
25
|
+
```d2 ガス代行支払いのワークフロー icon=mdi:gas-station
|
|
26
26
|
direction: down
|
|
27
27
|
|
|
28
28
|
User-App: {
|
|
@@ -31,7 +31,7 @@ User-App: {
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
Gas-Payer-Wallet: {
|
|
34
|
-
label: "
|
|
34
|
+
label: "ガス支払い者ウォレット\n(アプリバックエンドのウォレット)"
|
|
35
35
|
shape: cylinder
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -46,8 +46,8 @@ Blockchain-Node: {
|
|
|
46
46
|
|
|
47
47
|
User-App -> OCAP-Client: "1. ユーザーがトランザクションを開始"
|
|
48
48
|
OCAP-Client -> OCAP-Client: "2. ユーザーのウォレットで\nTxを準備・署名"
|
|
49
|
-
Gas-Payer-Wallet -> OCAP-Client: "3.
|
|
50
|
-
OCAP-Client -> Blockchain-Node: "4. Tx +
|
|
49
|
+
Gas-Payer-Wallet -> OCAP-Client: "3. ガス代行支払いのためTxハッシュに署名"
|
|
50
|
+
OCAP-Client -> Blockchain-Node: "4. Tx + ガス支払い者ヘッダーを送信"
|
|
51
51
|
Blockchain-Node -> Blockchain-Node: "5. 両方の署名を検証"
|
|
52
52
|
Blockchain-Node: "6. トランザクションを実行"
|
|
53
53
|
Blockchain-Node -> Gas-Payer-Wallet: "7. ガス料金を差し引く"
|
|
@@ -55,37 +55,37 @@ Blockchain-Node -> Gas-Payer-Wallet: "7. ガス料金を差し引く"
|
|
|
55
55
|
|
|
56
56
|
## 使用例
|
|
57
57
|
|
|
58
|
-
ガスレストランザクションを有効にするには、スポンサーアカウント用のウォレットインスタンスを作成し、`setGasPayer
|
|
58
|
+
ガスレストランザクションを有効にするには、スポンサーアカウント用のウォレットインスタンスを作成し、`setGasPayer`メソッドを使用してクライアントに設定するだけです。
|
|
59
59
|
|
|
60
|
-
```javascript
|
|
60
|
+
```javascript ガス支払い者の設定と使用法 icon=logos:javascript
|
|
61
61
|
import Client from '@ocap/client';
|
|
62
62
|
import Wallet, { fromRandom } from '@ocap/wallet';
|
|
63
63
|
|
|
64
|
-
// 1. Beta
|
|
64
|
+
// 1. Betaチェーンに接続するためにクライアントを初期化
|
|
65
65
|
const client = new Client('https://beta.abtnetwork.io/api');
|
|
66
66
|
|
|
67
|
-
// 2.
|
|
68
|
-
//
|
|
69
|
-
//
|
|
67
|
+
// 2. ガス支払い者(アプリケーションのウォレット)用のウォレットを作成
|
|
68
|
+
// このウォレットには、トランザクション手数料を賄うのに十分なネイティブトークン(TBA)が必要です。
|
|
69
|
+
// テストトークンはフォーセットから入手できます: https://faucet.abtnetwork.io/
|
|
70
70
|
const gasPayerWallet = Wallet.fromJSON({
|
|
71
71
|
sk: '...your_sponsor_secret_key...',
|
|
72
72
|
pk: '...your_sponsor_public_key...',
|
|
73
73
|
address: '...your_sponsor_address...',
|
|
74
74
|
});
|
|
75
75
|
|
|
76
|
-
// 3.
|
|
76
|
+
// 3. クライアントインスタンスにガス支払い者を設定
|
|
77
77
|
client.setGasPayer(gasPayerWallet);
|
|
78
78
|
|
|
79
|
-
// 4.
|
|
79
|
+
// 4. エンドユーザー用のウォレットを作成。
|
|
80
80
|
const userWallet = fromRandom();
|
|
81
81
|
|
|
82
|
-
// 5.
|
|
82
|
+
// 5. ユーザーのウォレットを使用してトランザクションを送信。
|
|
83
83
|
// トランザクションはユーザーによって署名されますが、ガス料金はgasPayerWalletによって支払われます。
|
|
84
84
|
async function performGaslessTransaction() {
|
|
85
85
|
try {
|
|
86
|
-
//
|
|
87
|
-
//
|
|
88
|
-
//
|
|
86
|
+
// 注:新規アカウントは最初の受信トランザクションでオンチェーンに作成されますが、
|
|
87
|
+
// トランザクションを*送信*する前にオンチェーンに存在している必要があります。
|
|
88
|
+
// フォーセットから少額のトークンを送信することで初期化できます。
|
|
89
89
|
|
|
90
90
|
const receiverAddress = 'z1...'; // 有効な受信者アドレス
|
|
91
91
|
const hash = await client.transfer({
|
|
@@ -94,18 +94,18 @@ async function performGaslessTransaction() {
|
|
|
94
94
|
wallet: userWallet,
|
|
95
95
|
});
|
|
96
96
|
|
|
97
|
-
console.log('
|
|
98
|
-
console.log(
|
|
97
|
+
console.log('Gasless transaction successful. Hash:', hash);
|
|
98
|
+
console.log(`Review on explorer: https://beta.abtnetwork.io/explorer/txs/${hash}`);
|
|
99
99
|
} catch (error) {
|
|
100
|
-
console.error('
|
|
100
|
+
console.error('Transaction failed:', error);
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
performGaslessTransaction();
|
|
105
105
|
```
|
|
106
106
|
|
|
107
|
-
この例では、`gasPayerWallet`がコストを負担するため、`userWallet
|
|
107
|
+
この例では、`gasPayerWallet`がコストを負担するため、`userWallet`はネイティブトークンの残高がゼロであってもトランザクションを正常に送信できます。これにより、特にアプリケーションに新たに参加するユーザーにとって、摩擦のない体験が実現します。
|
|
108
108
|
|
|
109
109
|
---
|
|
110
110
|
|
|
111
|
-
トランザクションの作成から確定までの全行程を理解するには、[
|
|
111
|
+
トランザクションの作成から確定までの全行程を理解するには、[トランザクションのライフサイクル](./core-concepts-transaction-lifecycle.md)のドキュメントを参照してください。
|