안드로이드 개발 Socket IO 사용해서 Node JS 서버와 통신하는 방법

안드로이드 개발 Socket IO 사용해서 Node JS 서버와 통신하는 방법

 

환경: Android Studio

 

요즘은 앱에 사용자간의 소통을 위한 채팅기능은 필수입니다. NodeJS 서버를 사용하고 있다면 좀더 빠르고 쉽게 개발할 수 있는 Socket.io 모듈을 사용해 보세요. 안드로이드와의 채팅 기능을 어렵지 않게 구현할 수 있습니다. 오늘은 간단하게 메시지를 주고 받는 정도만 이야기 하도록 하겠습니다.

 

◎ 안드로이드 App 소스

 

▼ 먼저 안드로이드 App 에서 Socket.io 구현을 위한 준비를 하도록 하겠습니다. NodeJS 서버와 연결을 위해 2가지를 살펴야 합니다. 첫 번째는 AndroidManifest.xml 파일에 INTERNET 퍼미션을 추가해야 합니다. 두 번째는 http://localhost 나 http://127.0.0.1 이 아닌 실질적으로 할당된 가상 아이피를 입력해야 합니다. 윈도우라면 ipconfig 로 아이피 정보를 알아내 접속 주소로 입력하세요.

 

▼ 다음은 socket.io 사용을 위한 라이브러리를 gradle 의 dependencies 에 추가해야 합니다. 그림과 같이 추가합니다. 

 

▼ Socket IO 연결 소스 입니다. IO.socket() 함수의 파라미터로 접속 주소를 입력합니다. 그리고 Socket 객체의 connect() 함수를 실행하면 연결이 됩니다. Socket 객체의 on() 함수에는 Callback 객체를 등록해야 합니다. Socket.EVENT_CONNECT 는 연결 성공하면 발생하는 이벤트입니다. 두 번째 mSocket.on() 에는 ‘serverMessage’ 이벤트로 오는 메시지를 받기 위한 Callback 객체를 등록했습니다. 

private Socket mSocket;

try {
    mSocket = IO.socket("http://192.168.0.16:3000");
    mSocket.connect();
    mSocket.on(Socket.EVENT_CONNECT, onConnect);
    mSocket.on("serverMessage", onMessageReceived);
} catch(URISyntaxException e) {
    e.printStackTrace();
}

▼ 등록 가능한 이벤트의 종류는 다음과 같습니다. 

 

▼ 두 개의 Callback 객체는 다음과 같습니다. 연결과 동시에 발생하는 onConnect 에는 emit() 함수를 이용해서 서버로 hi 라는 메시지를 전송합니다. 두 번째 onMessageReceived 는 서버에서 보내는 메시지를 받습니다. 서버에서는 데이터를 JSON 으로 보낼 것입니다.

// Socket서버에 connect 되면 발생하는 이벤트
private Emitter.Listener onConnect = new Emitter.Listener() {
    @Override
    public void call(Object... args) {
        mSocket.emit("clientMessage", "hi");
    }
};

// 서버로부터 전달받은 'chat-message' Event 처리.
private Emitter.Listener onMessageReceived = new Emitter.Listener() {
    @Override
    public void call(Object... args) {
        // 전달받은 데이터는 아래와 같이 추출할 수 있습니다.
        try {
            JSONObject receivedData = (JSONObject) args[0];
            Log.d(TAG, receivedData.getString("msg"));
            Log.d(TAG, receivedData.getString("data"));
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }
};

 

▼ Activity 의 전체 소스는 다음과 같습니다. 

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import org.json.JSONException;
import org.json.JSONObject;

import java.net.URISyntaxException;

import io.socket.client.IO;
import io.socket.client.Socket;
import io.socket.emitter.Emitter;

public class MainActivity extends AppCompatActivity {
    private String TAG = "MainActivity";
    private Socket mSocket;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        try {
            mSocket = IO.socket("http://192.168.0.16:3000");
            mSocket.connect();
            mSocket.on(Socket.EVENT_CONNECT, onConnect);
            mSocket.on("serverMessage", onMessageReceived);
        } catch(URISyntaxException e) {
            e.printStackTrace();
        }

    }

    // Socket서버에 connect 되면 발생하는 이벤트
    private Emitter.Listener onConnect = new Emitter.Listener() {
        @Override
        public void call(Object... args) {
            mSocket.emit("clientMessage", "hi");
        }
    };

    // 서버로부터 전달받은 'chat-message' Event 처리.
    private Emitter.Listener onMessageReceived = new Emitter.Listener() {
        @Override
        public void call(Object... args) {
            // 전달받은 데이터는 아래와 같이 추출할 수 있습니다.
            try {
                JSONObject receivedData = (JSONObject) args[0];
                Log.d(TAG, receivedData.getString("msg"));
                Log.d(TAG, receivedData.getString("data"));
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    };
}

 

◎ NodeJS 서버 소스

 

▼ 다음은 서버 역할을 위한 NodeJS 구현을 위한 소스 입니다. 먼저 http 모듈을 이용해서 서버를 구동해야 합니다. 포트는 3000 번으로 했습니다. 

var server = http.createServer(function(req, res){
	
}).listen(3000, function(){
	console.log('Server running at http://192.168.0.16:3000');
});

 

▼ Socket IO 를 server 에 등록하고 소켓 서버를 생성하는 소스입니다. Client 접속 정보는 connection 이벤트를 통해서 알 수 있습니다. 그리고 클라이언트에서 보낸 메시지는 ‘clientMessage’ 에서 받습니다. 안드로이드와 emit() 으로 메시지를 보낼 때 첫 번째 파라미터 값과 동일하게 맞춰야 합니다. 

// 소켓 서버를 생성한다. 
var io = socketio.listen(server);
io.sockets.on('connection', function (socket){
	console.log('Socket ID : ' + socket.id + ', Connect');
	socket.on('clientMessage', function(data){
		console.log('Client Message : ' + data);
		
		var message = {
			msg : 'server',
			data : 'data'
		};
		socket.emit('serverMessage', message);
	});
});

 

▼ NodeJS 전체 소스는 다음과 같습니다. 

var http = require('http');
var socketio = require('socket.io');

var server = http.createServer(function(req, res){
	
}).listen(3000, function(){
	console.log('Server running at http://192.168.0.16:3000');
});

// 소켓 서버를 생성한다. 
var io = socketio.listen(server);
io.sockets.on('connection', function (socket){
	console.log('Socket ID : ' + socket.id + ', Connect');
	socket.on('clientMessage', function(data){
		console.log('Client Message : ' + data);
		
		var message = {
			msg : 'server',
			data : 'data'
		};
		socket.emit('serverMessage', message);
	});
});