Skip to content

Latest commit

 

History

History
102 lines (83 loc) · 3.83 KB

README.md

File metadata and controls

102 lines (83 loc) · 3.83 KB
Raw

次のインタフェース及び実装を提供します。

class description
CBBDataBus iOSアプリ（Objective-c/swift）で利用できるDataBus基本クラス
CBBWebViewDataBus ネイティブコード と WebView(JavaScript) 間で利用できるDataBus
CBBMemoryQueue 同一プロセス内での通信機構
CBBMemoryQueueDataBus CBBMemoryQueue を用いたDataBus
CBBMultiplexDataBus DataBusを多重化

Example

本リポジトリの Example ディレクトリが, WKWebView(HTML/JavaScript) と ネイティブコード間の DataBus (CBBWKWebViewDataBus) で通信をする簡単なサンプル・プロジェクトになっています。

screen-shot

Exampleをビルドして動作させる場合, 事前に pod install を実行してください。

cd Example
pod install
open Example.xcworkspace

Setup

Podfile

abstract_target 'defaults' do
    pod 'CBBDataBus', '~2.1.3'
end

Usage

WebViewDataBusの基礎的な使用方法を示します。

step 1: WKWebView + DataBus を準備 (ネイティブコード)

  • WKWebView で Webコンテンツのloadを行う前 に CBBWebViewDataBus インスタンスを作成する必要があります
  • CBBWebViewDataBus は, Webコンテンツ側でDataBusを使用するためのJavaScriptコードをインジェクトします
    WKWebView webView = [[WKWebView alloc] init];
    CBBWKWebViewDataBus* dataBus = [[CBBWKWebViewDataBus alloc] initWithWKWebView:webView];
    [webView loadRequest:request];

注意点: 1つの WKWebView に対して作ることができる CBBWKWebViewDataBus のインスタンスは1つだけです。 複数のDataBusを利用したい場合は, CBBMultiplexDataBus を用いて多重化してください。

step 2: JavaScript側からsendされたデータをハンドリング (ネイティブコード)

    [dataBus addHandler:^(NSArray * _Nonnull data) {
        // 受信したdataを処理する
    } forName:@"data-bus-name"];

追加したハンドラは CBBDataBus#removeHandler または CBBDataBus#removeAllHandlers で削除できます。

step 3: JavaScript側へデータをsend (ネイティブコード)

CBBDataBus#sendData で NSArray 形式のデータを JavaScript側へ送信できます。

    [_dataBus sendData:@[@"This", @"is", @"test", @(1234)]];

step 4: DataBusを準備 (JavaScript)

次のコードでJavaScript側でDataBusのインスタンスを生成できます。

var dataBus = new CBB.WebViewDataBus();

step 5: ネイティブコード側からsendされたデータをハンドリング (JavaScript)

DataBus#addHandler で function を追加することで, ネイティブコード側がsendしたデータをハンドリングできます。

    dataBus.addHandler(function() {
        var data = arguments.join(',');
        console.log("received data from native: " + data);
    });

step 6: ネイティブコード側へデータをsend (JavaScript)

DataBus#send でデータをネイティブコード側へ送信できます。

    dataBus.send(1, "arg2", {"arg3": 3});

step 7: 破棄

（JavaScript）

DataBus#destroy で破棄することができます。

    dataBus.destroy();
（ネイティブコード）

DataBus#destroy で破棄することができます。

    dataBus.destroy();

License