본문 바로가기

Programming

[Python] Flask & Socket IO 웹 소켓을 이용한 채팅

Edit

[Python] Flask & Socket IO 웹 소켓을 이용한 채팅

Socket IO Flask socketio

enter image description here

예전에 가가라이브인가? 웹에서 채팅을 할 수 있게 만들어주는 모듈이 있었는데, 이와 같은 웹 채팅을 한번 만들어보고 싶었다. 근데 가가라이브는 웹 기술이라기 보다 Flash 기반이더라…
그래서 다른 정보를 찾다보니 WebSocket 이라는 Socket.io가 있었고, 최근 Flask를 이용해 만들고 있는 웹이 있어, 간단하게 Flask에서 WebSocket 기반 채팅 프로그램을 만들어보기로 했다.

Flask-Socketio는 링크에서 문서를 확인할 수 있다.

1. 설치

기본적인 웹 프레임워크인 FlaskGevent, flask_socketIO를 pip을 이용해 설치해야 한다.

```
pip install flask
pip install gevent(gevent는 **libevent** 패키지가 먼저 설치되어야 한다.)
pip install Flask-SocketIO  
```

2. Flask Back-End

처음 사용자가 홈페이지에 접속하면 before_request 함수를 거쳐, 세션이 존재하면 pass 존재하지 않으면 sessionusername을 할당한다.(테스트를 위한 것이기 때문에 간단하게 user1, user2, user3 …으로 하였다.)
@socketio.on(이벤트, 네임스페이스)는 해당 이벤트가 들어왔을 때 어떠한 함수를 실행 시킬 것인지에 대한 것인데, 이 함수는 내부에서는 emit(이벤트, json)을 이용해 사용자에게 데이터를 전송할 수 있다. 이 때 emit에 broadcast=True 옵션을 넣게 되면 sender 만이 아닌 연결되어 있는 모든 사용자에게 데이터를 전송하게 된다.
음… 아직 namespace에 대해 명확한 정의를 내리지는 못하겠지만, 간단하게 어떠한 socket에 대해 연결을 하고 데이터를 주고 받을 것인지를 명시한다고 생각한다. 하나의 방? mynamespace 라는 채팅방을 만들고 이 namespace에 접속한 사람들 끼리만 데이터를 주고받는 것과 같이.

3. WebSocket Front-End

처음 socket.io를 사용하기 위해 head 부분에 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>선언을 하여야 한다.
그리고 var socketio = io.connect(...) 함수를 이용해 해당 namespace에 connect 한다.
이 후 Back-End의 request 함수에서 emit('response', ...) 함수를 통해 데이터를 전송하게 되면 socket.on('response', function())을 이용해 데이터를 처리하면 된다.
클라이언트에서 데이터를 전송할 땐 서버에서와 마찬가지로 emit 함수와 이벤트를 이용해 데이터를 전송하면 된다.

4. 결과

websocket result