Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

안드로이드 개발 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 사용해서 Node JS 서버와 통신하는 방법

 

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

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

 


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();
}


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

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

 

두 개의 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);
	});
});


반응형
Posted by 녹두장군1
,