Ghost Socket: Node.js(4) 안드로이드와 Socket.io로 통신하기

이번에는 Socket.io를 이용해서 안드로이드와 소켓통신을 해보기로 하자. 먼저 Node.js로 서버를 가동하자. 여기서 express라는 것을 이용할텐데 이 express는 Node.js에서 동작하는 웹 개발 프레임워크이다. 한마디로 편하게 웹서버를 가동하고 개발할 수있도록 해주는 것이니 이용하기로 하자. 편한길로 가야지. express(이것도 뭔가 복잡한데 다음에 알아 보자.)를 사용하기 위해서 먼저 설치를 해줘야 한다. 그리고 socket.io도 설치하자.

npm install express

npm install socket.io

이제 서버코드를 작성하자.

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
res.sendfile('index.html');//default page
});

http.listen(3000, function(){
console.log('listening on *:3000');
});

io.sockets.on('connection', function (socket){
//원격에서 접속이 되면 기본 응답
socket.emit('message_from_server', 'hello, world');

//메세지가 들어 오면 응답
   socket.on('message_from_client', function (msg){
     console.log('message:', msg);
     /*받은 메세지를 되돌려 주자.
     아니면 받은 데이터를 이용 라즈베리파에서 뭐든 할 수 있다.
     */
     socket.emit('message_from_server', '"' +msg+ '" 라고하셨군요.');
   });

});

간단히 소켓으로 받은 데이터를 되돌려 전송하는 코드이다. 실행해 두자.

node server.js

이제 원격 자바스크리트로 클라이언트를 만들자.

텍스트를 입력하고 전송하면 서버에서 그 값을 되돌려 받아서 화면에 출력하게 된다. 라이브러리를 추가해 줘야 하는데 아래 사이트에서 복사해 넣자.

https://cdnjs.com/libraries/socket.io

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Socket.io example</title>
     <style type="text/css">
         body{
             text-align: center;
         }
         #response{
             color: red;
         }
     </style>
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.dev.js"></script>
<body>

<h1>Socket.io example</h1>

<p>서버로부터 응답: </p>
<div id="response"></div>

        socket.on('message_from_server', function(data){
             console.log(data);
             res.innerHTML = "<p>"+data+"</p>";
         });

        function sendsocket(){
             socket.emit('message_from_client', inputMsg.value);
         }
     </script>

</body>
</html>

웹브라우저에서 접속해서 간단히 보내 보면 … 잘 된다. 끝! 이제 안드로이드앱에서 데이터를 보내 보자. 서버는 특별히 손댈 필요가 없으니 그대로 두자.

마찬가지로 간단히 텍스트를 입력해서 전송하는 앱이다. 서버에서 보내온 응답 메세지를 화면에 출력해 준다. layout 파일은 생략하고 자바코드만 보자.

public class MainActivity extends AppCompatActivity {

        Socket socket;
        Button button;
        EditText editText;
        TextView textView;

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

        try {
            socket = IO.socket("http://192.168.0.4:3000");
        }catch (Exception e) {
            e.printStackTrace();
        }

        socket.on(Socket.EVENT_CONNECT, new Emitter.Listener() {
            @Override
            public void call(Object... args) {
                socket.emit("message_from_client", "Hi~ 나는 안드로이드야.");
            }
        }).on("message_from_server", new Emitter.Listener() {
            @Override
            public void call(final Object... args) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        textView.setText(args[0].toString());
                    }
                });
            }
        });
        socket.connect();
        
        editText = (EditText) findViewById(R.id.editText);
        textView = (TextView) findViewById(R.id.result);
        button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String msg = editText.getText().toString();
                socket.emit("message_from_client", msg);
            }
        });
    }
}

문제 없이 동작한다. 이렇게 해서 Node.js로 소켓통신을 위한 서버를 만들고 자바스크립트와 안드로이드에서 통신을 해보는 예제를 만들어 보았다.

Ghost Socket

top drop menu

Recent Post

일요일, 11월 11

Node.js(4) 안드로이드와 Socket.io로 통신하기