Home > VPS

VPS Archive

さくらVPSでnode.jsを使ってAndroidとWebSocket通信を行う

2011-11-02 (水)
node.js | VPS

今node.jsでWebSocket通信を行うというのがブームになっているようなので、
さくらVPSを使ってnode環境を構築してWebSocket通信を行なってみることにしました。

また、個人的にはAndroidがブームなので、ネイティブなAndroidアプリからWebSocket通信を
行うということもやってみたいと思います。

まずはさくらVPS側のnode環境構築です。

node.jsのインストール

本当はnaveというnodeのバージョン管理ツールがあるので、それをインストールしてからnode環境を構築した方がよかったのですが、
今回は時間がなかったので直接最新版をインストールする説明をします。

まず、下準備でopensslとopenssl-develをインストール

sudo yum install openssl openssl-devel

node.jsをインストール

cd ~/
git clone git://github.com/joyent/node.git
cd node
./configure 
make
sudo make install

node.jsのパッケージマネージャーのnpmをインストール

sudo chown -R $USER /usr/local
curl http://npmjs.org/install.sh | sh
sudo chown -R root /usr/local

WebSocket通信を行うためのライブラリをインストール

npm install websocket-server

準備は完了したので、サーバ側の実装
server.js

var sys = require('sys');
var ws = require('websocket-server');

var sockets = [];

var server = ws.createServer();

server.addListener('listening', function(nonnection) {
        sys.puts('listening..');
});
server.addListener('connection', function(connection){
        sockets.push(connection);
        sys.puts('connect');

        connection.addListener('message', function(message){
                sys.puts(message);
                for (var k in sockets) {
                        if (connection != sockets[k]){
                                sockets[k].send(message);
                        }
                }
        });
});

// 接続が切断された際のリスナー
server.addListener('close', function(connection){
        sys.puts('close');
});
// listenするポート番号を指定
server.listen(8001);

nodeサーバの起動は以下を実行。「listen..」と出てきたら完了です。

node server.js

続いてAndroid側の実装。WebSocket通信部分はweberknechtというライブラリを使用しています。

WebSocketManager.java

package com.toshipon.websocket.test;

import java.net.URI;
import java.net.URISyntaxException;

import android.util.Log;
import de.roderick.weberknecht.WebSocket;
import de.roderick.weberknecht.WebSocketConnection;
import de.roderick.weberknecht.WebSocketEventHandler;
import de.roderick.weberknecht.WebSocketException;

public class WebSocketManager {

	private static WebSocket websocket;

	public static void connect(String url, WebSocketEventHandler handler) {

		try {
			URI uri = new URI(url);
			websocket = new WebSocketConnection(uri);

			Log.d("DEBUG", "websocket connect start");
			websocket.setEventHandler(handler);
			websocket.connect();

		} catch (WebSocketException wse) {
			wse.printStackTrace();
		} catch (URISyntaxException use) {
			use.printStackTrace();
		}
	}

	public static void send(String message) {

		try {
			Log.d("DEBUG", "websocket connect send");
			websocket.send(message);
		} catch (WebSocketException wse) {
			wse.printStackTrace();
		}
	}

	public static void close() {
		try {
			Log.d("DEBUG", "websocket connect close");
			websocket.close();
		} catch (WebSocketException wse) {
			wse.printStackTrace();
		}
 	}
}

SendMessageActivity.java

package com.toshipon.websocket.test;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import de.roderick.weberknecht.WebSocketEventHandler;
import de.roderick.weberknecht.WebSocketMessage;

public class SendMessageActivity extends Activity {

	private static final String WS_URI = "ws://XXX.XX.XX.XXX:XXXX/";
	private static final String NULLPO_KEY = "nullpo";
	private static final String GATT_KEY = "gatt";

	private static final String NULLPO_TEXT = "ぬるぽ ( ´∀｀)";
	private static final String GATT_TEXT = "ｶﾞｯ (ヽ'ω`)";

	private Handler handler = new Handler();
	private Activity activity;

	@Override
	public void onCreate(Bundle savedInstanceState) {
	    super.onCreate(savedInstanceState);
	    Log.d("DEBUG", "opened message window");
	    setContentView(R.layout.message);
	    activity = this;

	    // ぬるぽボタン押下時の挙動
	    Button nullpoBtn = (Button) findViewById(R.id.btn_null_btn);
	    nullpoBtn.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				Log.d("DEBUG", "nullpo button clecked");
				WebSocketManager.send(NULLPO_KEY);
				setMessage(NULLPO_TEXT, Color.BLUE);
			}
		});

	    // ガッボタン押下時の挙動
	    Button gattBtn = (Button) findViewById(R.id.btn_ga_btn);
	    gattBtn.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				Log.d("DEBUG", "gatt button clecked");
				WebSocketManager.send(GATT_KEY);
				setMessage(GATT_TEXT, Color.GREEN);
			}
		});

	    // WebSocket通信開始
	    WebSocketManager.connect(WS_URI, new WebSocketEventHandler() {

 			@Override
 			public void onOpen() {
 				Log.d("DEBUG", "websocket connect open");
 			}

 			@Override
 			public void onMessage(WebSocketMessage message) {
 				Log.d("DEBUG", "websocket message");

 				if (NULLPO_KEY.equals(message.getText())) {
					setMessage(NULLPO_TEXT, Color.RED);
 				} else if (GATT_KEY.equals(message.getText())) {
 					setMessage(GATT_TEXT, Color.YELLOW);
 				}
 			}

 			@Override
 			public void onClose() {
 				Log.d("DEBUG", "websocket connect close");
 			}
 		});
	}

	private void setMessage(final String message, final int color) {
		Log.d("DEBUG", "send message");

		// WebSocketHandlerのonMessageは別スレッドなのでhandlerを用いてviewの書き換えを行う
		handler.post(new Runnable(){
	        @Override
	        public void run() {
	            TextView messageArea = (TextView) activity.findViewById(R.id.message_area);
	    		messageArea.setText(message);
	    		messageArea.setTextColor(color);
	        }
	    });

	}

	@Override
	protected Object clone() throws CloneNotSupportedException {
		WebSocketManager.close();
		return super.clone();
	}
}

ソースはgithubに置いてあります。
https://github.com/toshipon/websocket_test_node
https://github.com/toshipon/websocket_test_android

ちなみにこのサンプルアプリは、他の人と「ぬるぽ」「ｶﾞｯ」を双方向でやりあえるアプリです(笑)
二人ぐらいでやりあうのがいいと思います。