TypetalkKitとStarscreamでTypetalkのWebSocket APIを試してみる

TypetalkのWebSocket APIが先日公開されましたので、TypetalkKitとSwiftのWebSocketライブラリStarscreamを使ってiOSシミュレータ上で試してみました。

サンプルアプリはこんな感じ。ブラウザ上から入力したメッセージが、iOSのサンプルアプリ上にすぐに反映されているのがわかります。

来月、東京でTypetalk Hack Tokyoがあるらしいので、導入の手順からまじめに書いてみました。

アプリケーション登録

TypetalkのAPIを利用するためには、オフィシャルの開発ページよりアプリケーションを登録する必要があります。

開発ページに行き、「Register new Application」をクリック。

一番上のアプリケーション名はお好きに決めて下さい。次の「Grant Type」は「Authorization Code」にしてください。 「Homepage URL」は自分のサイトのURLなどを指定しましょう。「Redirect URI」はスキームの部分をユニークにする必要がありますが、試すだけなら「typetalkkit://auth/success」で構いません。 「Authorization Code」の部分以外は後で変更できるので、とりあえず埋めて「Register」をクリックします。

そうすると次のような表示に変わります。「Client ID」、「Client Secret」、「Redirect URL」は後で使うことになります。

コードの取得とフレームワークのビルド

フレームワークビルドツールのCarthageが必要です。あらかじめ、CarthageのReleasesページからパッケージをインストールしておいてください。

WebSocketサンプルコードを取得するためには、ターミナル上で次のように入力します。

$ git clone https://github.com/safx/Typetalk-WebSocket-Sample.git
$ cd Typetalk-WebSocket-Sample
$ carthage update
$ open TypetalkKit+WebSocketSample.xcodeproj         # Xcodeが起動する

アプリケーションの設定の変更

Xcodeを起動したら、AppDelegate.swiftを開いて、先ほどのアプリケーション登録で設定や取得した値を埋めておきます。

    Client.sharedClient.setDeveloperSettings(
        clientId:     "Your ClientID",
        clientSecret: "Your SecretID",
        redirectURI:  "Your custome scheme",
        scopes: [Scope.my, Scope.topic_read])

カスタムURLスキームの設定 (必要なら)

「Redirect URI」のスキーム部分を「typetalkkit」以外にした場合には変更する必要があります。

アプリケーションのInfoタブに飛び、カスタムURLスキームの設定を変更します。URLスキームをRedirectURIのスキーム部分に変更します。

ビルド

あとはXcodeでビルドするだけです。

コード解説

viewDidLoadのタイミングでconnectWebSocket()を呼んでStarscreamでのWebSocket接続を確立しています。

func connectWebSocket() {
    if Client.sharedClient.isSignedIn {
        let url = NSURL(scheme: "https", host: "typetalk.in", path: "/api/v1/streaming")!
        var socket = WebSocket(url: url)
        let token = Client.sharedClient.accessToken!
        socket.headers["Authorization"] = "Bearer \(token)"
        socket.delegate = self
        socket.connect()
        self.socket = socket
    } else {
        Client.sharedClient.authorize { (error) -> Void in
            if (error == nil) {
                self.connectWebSocket()
            }
        }
    }
}

StarscreamはdelegateベースのAPIを持っており、テキストデータが来たときはwebsocketDidReceiveMessageが呼ばれます。

func websocketDidReceiveMessage(text: String) {
    let data = text.dataUsingEncoding(NSUnicodeStringEncoding)!
    let json = NSJSONSerialization.JSONObjectWithData(data, options: nil, error: nil) as [String:AnyObject]
    let t = json["type"] as? String
    let d = json["data"] as? [String:AnyObject]
    if t != nil && d != nil {
        if t == "postMessage" {
            let res = PostMessageResponse(data: d!)
            self.insertNewObject(res)
        }
    }
}

ストリーミングAPIから得られるJSONは、トップレベルに typeとdataがあり、前者が実行されたAPI名、後者がそのときのデータみたいなので、typeがpostMessageならオブジェクトを配列に追加してようにしています。

TypetalkKitはOAuth認証とJSONオブジェクトのデシリアライズに利用しています。

関連リンク

• Safx: Swift+AlamofireでTypetalkのAPIを書いたので公開します
• safx/Typetalk-WebSocket-Sample · GitHub
• safx/TypetalkKit · GitHub
• ストリーミング | Typetalk API | Nulab Developers
• daltoniam/Starscream · GitHub
• Typetalk Hack Tokyo on Zusaar