(안드로이드) Socket.io를 활용한 웹 소켓 서버, 클라이언트 구축

본 글은 웹 소켓에 대한 설명을 제외하고 코드 위주입니다. 

 

구현사양 : 

웹 소켓 서버 : Node.Js

웹 소켓 클라이언트 : Android

OS : Mac OS

 

1. 서버 구축 

순서대로 설치 하셔야됩니다.

필요한 Tool (설치경로)

  1. Atom  : https://atom.io

  2. X.code : 앱스토어 에서 설치

  3. brew : 터미널 실행 > /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  를 입력 > PC 패스워드 입력 > install을 기다리면 끝~!

  4. Node.Js : 터미널 실행 > brew install node 를 입력 > install 기다리면 끝~!

  5. 공식 서버  Example 코드 다운로드 :  https://github.com/socketio/socket.io 

 ---------------------------------------------------------------------------------------------

서버 코드 열어보기 

프로젝트 추가

서버 example 폴더 열기!

index.js (웹소켓 서버 코드)

------------------------------------------------------------------------------------------------

 6. express 다운로드 : 터미널 실행 > cd [Example 코드의 디렉토리] > npm install express --save 입력 > install을 기다리면 끝~!

  7. engine.io 다운로드 : 터미널 실행 > cd [Example 코드의 디렉토리] > npm install engine.io --save

  8. socket.io-client  다운로드 : 터미널 실행 > cd [Example 코드의 디렉토리] > npm install socket.io-client --save

  9. socket.io-parser 다운로드 : 터미널 실행 > cd [Example 코드의 디렉토리] > npm install socket.io-parser --save

 10. debug 다운로드 : 터미널 실행 > cd [Example 코드의 디렉토리] > npm install debug --save

 11. has-binary2 다운로드 : 터미널 실행 > cd [Example 코드의 디렉토리] > npm install has-binary2 --save

 12. socket.io-adapter 다운로드 : 터미널 실행 > cd[Example 코드의 디렉토리] > npm install socket.io-adapter --save

 13.서버 실행 : 터미널 실행 > cd [Example 코드의 디렉토리/examples/chat/] > node index.js 입력

이 스텝을 잘 따라 오셨다면 터미널에 다음과 같은 로그와 함께 서버가 실행됩니다.

Server listening at port 3000

3000번 포트를 사용해서 Node.Js 서버가 열렸다는 이야기 입니다.

 

2. 안드로이드 웹 소켓 클라이언트 소스

public class WebSocket extends AppCompatActivity {
    /**
     * Constant
     */
    private static final String TAG = ChatSocket.class.getSimpleName();
    private static final String SERVER_URL = "http://192.168.0.117:3000";

    /**
     * Object
     */
    private Socket socket;

    /**
     * Variable
     */
    private String userName;
    private boolean isConnected = true;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        boolean entry = connect();
    }

    /**
     * 서버와 웹 소켓을 엽니다.
     */
    private boolean connect() {
        try {
            socket = IO.socket(SERVER_URL);
            socket.on(Socket.EVENT_CONNECT, onConnect);
            socket.on(Socket.EVENT_DISCONNECT, onDisconnect);
            socket.on(Socket.EVENT_CONNECT_ERROR, onConnectError);
            socket.on(Socket.EVENT_CONNECT_TIMEOUT, onConnectError);
            socket.connect();


            return true;
        } catch (URISyntaxException e) {
            e.printStackTrace();

            return false;
        }
    }

    /**
     * 메세지를 호출 합니다.
     * */
    private void callMessage(){
        JSONObject data = new JSONObject();
        try {
            data.put("key1", "values");
            data.put("key1", "values");
            socket.emit(SOCKET_EVENT_CALL_MESSAGE,data);
        }catch(JSONException e) {
            e.printStackTrace();
        }
    }

    /**
     * 앱을 종료한 경우 소켓도 종료합니다.
     * */
    @Override
    protected void onDestroy() {
        super.onDestroy();

        socket.disconnect();
        socket.off(Socket.EVENT_CONNECT, onConnect);
        socket.off(Socket.EVENT_DISCONNECT, onDisconnect);
        socket.off(Socket.EVENT_CONNECT_ERROR, onConnectError);
        socket.off(Socket.EVENT_CONNECT_TIMEOUT, onConnectError);

    }

    /**
     * 서버와 소켓 연결 성공 시 리스너
     * */
    private Emitter.Listener onConnect = (args) -> {
        runOnUiThread(() -> {
            Log.i(TAG, "connected");
            callMessage();
        });
    };

    /**
     * 서버와 소켓 연결이 해제시 리스너
     * */
    private Emitter.Listener onDisconnect = (args) -> {
        runOnUiThread(() -> {
            Log.i(TAG, "diconnected");
            isConnected = false;
            Toast.makeText(getApplicationContext(), "종료", Toast.LENGTH_SHORT).show();
        });
    };

    /**
     * 서버연결이 실패 했을 때 리스너
     * */
    private Emitter.Listener onConnectError = (args) -> {
            runOnUiThread(() -> {
                Object s = args;
                Log.e(TAG, "Error connecting : 서버와 연결이 실패됬습니다.");
                Toast.makeText(getApplicationContext(),
                        "연결 실패", Toast.LENGTH_SHORT).show();
            });
    };
}

  

  서버 연결이 성공할 경우 onConnect의 리스너가 실행

  서버 연결이 실패할 경우 onConnectError의 리스너가 실행 됩니다.

 

혹시 순서대로 했는데 실행되지 않거나 이해되지 않는 곳이 있다면 댓글 남겨주시면 답해드리겠습니다.

감사합니다.