CodeZine(コードジン)

特集ページ一覧

スマホのネイティブアプリでSocket.IOを利用する

近未来の技術トレンドを先取り! 「Tech-Sketch」出張所 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/04/17 14:00

目次

UIの構築

 今回はStoryBoardを用いて、以下のようなシンプルなUIを定義しました。このViewを"ViewController"クラスへとバインドしておきます。

Socket.IOのクライアントロジックをObjective-Cで記述

 では、クライアント側のロジックを実装しましょう。

 なお、今回のコードは、XCode 4.5.2でiOS 5.0以上向けに書かれています。それ以前のバージョンのXCodeやiOSでは動作しない場合がありますのでご注意ください。

@implementation ViewController {
    __strong AZSocketIO *_socketIO; // AZSocketIOクラスをインスタンス変数として保持
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    self.send.enabled = NO; // Socket.IOサーバへの接続が成功するまで、ボタンを押せなくする

  // AZSocketIOクラスを生成(接続先ホスト名やプロトコルは定数ファイルに定義)
    _socketIO = [[AZSocketIO alloc] initWithHost:HOST andPort:PORT secure:NO]; 
    if ([PROTOCOL length] != 0) {
        _socketIO.transport = [NSMutableSet setWithObject:PROTOCOL];
    }
    _socketIO.reconnect = NO;

    // イベントを受信した場合のコールバック定義(JavaScriptでの下記処理に相当)
    /* 
      socket.on("broadcast", function(data){
        msgArea.append("<div>" + data + "</div>");
      });
    */
    __weak ViewController *blockself = self;
    [_socketIO setEventRecievedBlock:^(NSString *eventName, id data) {
        if ([eventName isEqualToString:@"broadcast"]) { "broadcast"という名前のメッセージを受け取ったら
            NSString *received = [data objectAtIndex:0];
            blockself.msgArea.text = [blockself.msgArea.text stringByAppendingFormat:@"%@\n", received]; // msgAreaへ受信したメッセージを追加
        }
    }];

    // Socket.IOサーバへの接続処理(UI表示とは非同期で実行される)
    [_socketIO connectWithSuccess:^(void){
        NSLog(@"connect success %@:%@ with %@", HOST, PORT, PROTOCOL);
        // UIスレッドでUI部品を操作する
        dispatch_async(dispatch_get_main_queue(), ^(void){
            self.send.enabled = YES; // 接続に成功した場合、ボタンを押せるようにする
        });
    } andFailure:^(NSError *error) {
        NSLog(@"connect failuer %@:%@ with %@ error:%@", HOST, PORT, PROTOCOL, [error description]);
        dispatch_async(dispatch_get_main_queue(), ^(void){
            // エラー処理など
        });
    }];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [_socketIO disconnect];
    [super viewWillDisappear:animated];
}

#pragma mark IBAction

// sendボタンが押された際のコールバック(JavaScriptでの下記処理に相当)
/* 
  send.on("click", function(){
    socket.emit("message", msg.val());
    msg.val("");
  });
*/
- (IBAction)onClickSend:(id)sender {
    NSString *message = self.msg.text;
    if (message != nil && [message length] != 0) {
        NSError *error = nil;
        [_socketIO emit:@"message" args:message error:&error]; // "message"という名前のメッセージをemit
        if (error) {
            // エラー処理など
        }
        self.msg.text = nil;
    }
}
@end

 Objective-C独特の記法になっているため見た目は分かりづらいですが、

  1. Socket.IOオブジェクトを生成してSocket.IOサーバへ接続する
  2. "broadcast"という名前のメッセージを受け取ったらmsgAreaに追記する
  3. ボタンが押されたら"message"という名前のメッセージをemitする

と、実はSocket.IOのJavaScriptクライアントライブラリと同じ概念を実装しているだけです。

Android:socket.io-java-client

 では次に、AndroidネイティブのSocket.IOクライアントを実装します。

 Socket.IOの公式Wikiの「In other languages Java」にはサーバ側とクライアント側のJavaライブラリが混在して紹介されていますが、Androidクライアント用としてはGottox/socket.io-java-clientが利用できます。今回はこのライブラリを用いることにしましょう。

 ただ残念なことに、Gottox/socket.io-java-clientにはpom.xmlが含まれていないため、Mavenで簡単にインストールすることはできません。自分でpom.xmlを書いても良いのですが、今回は手作業でビルドすることにします。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:近未来の技術トレンドを先取り! 「Tech-Sketch」出張所

もっと読む

著者プロフィール

  • 松井 暢之(TIS株式会社)(マツイ ノブユキ)

    TIS株式会社 コーポレート本部 戦略技術センターに所属。 アーキテクチャ設計やデータモデル策定、フレームワーク構築などバックエンド側のアーキテクトとしてプロジェクトに従事していたが、現部門への異動を契機に戦略技術の検証や新規サービスの事業企画に軸足を移す。 近頃はなぜか、インフラ・運用のパター...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5