WebSocket

관제 시스템을 web base로 옮겨보려고 방법을 찾다가 WebSocket을 찾아보게 되었다.

WebSocket은 HTTP 포트(80, 433)으로 Server와 Client가 handshake후 양방향 통신이 가능하다고 한다. 일단 HTTP 포트를 이용하니깐 방화벽이 무용지물이 되겠구나 싶다. 

 

Handshake후 통신하는 데이터들에는 http header가 없어서 패킷의 사이즈도 줄어드는 장점이 있다.

 

WebSocket은 규격이고 이걸 실제로 사용가능하게 한 라이브러리는 여러가지가 있는데, 대표적으로 Socket.IO가 있다.

Socket.IO는 WebSocket을 기반으로 하는 JavaScript 개발자를 위한 대중적인 실시간 메시징 라이브러리이다.

 

Emit

Emit는 한글로 "방출하다"는 의미로써 Server to Client 혹은 Client to Server로 메시지를 보내는 것이다.

On

Server 혹은 Client로 emit되는 메시지를 수신하는 것이다.

 

이외에도 broadcasting, room, namespace 등의 개념들이 있지만 지금 굳이 알아야 할 필요는 없어서 넘어간다.

 

Flask로 WebSocket을 구현하려고 샘플 코드를 찾아봤다. 받아서 테스트 해봤는데, python code에서 emit시 callback으로 등록한 messageReceived가 호출이 되지 않아 확인해 보니 Javascript에서 callback()을 호출해줘야 python에서 messageReceived가 호출된다.

def messageReceived(methods=['GET', 'POST']):
    print('message was received!!!')


@socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
    print('received my event: ' + str(json))
    socketio.emit('my response', json, callback=messageReceived)

  socket.on( 'my response', function( msg, callback ) {
    console.log( msg )
    if( typeof msg.user_name !== 'undefined' ) {
      $( 'h3' ).remove()
      $( 'div.message_holder' ).append( '<div><b style="color: #000">'+msg.user_name+'</b> '+msg.message+'</div>' )
    }

    callback();  // call a callback of main.py
  })

 

Callback 수정한 코드: https://gitlab.com/jasmine125/websocket-chat