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独特の記法になっているため見た目は分かりづらいですが、
- Socket.IOオブジェクトを生成してSocket.IOサーバへ接続する
- "broadcast"という名前のメッセージを受け取ったらmsgAreaに追記する
- ボタンが押されたら"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を書いても良いのですが、今回は手作業でビルドすることにします。
