2018. 9. 11. 14:57ㆍ서버 프로그래밍
앞으로는 Python과 Vue.js를 많이 사용하게 될 것 같아서 SPA 예제를 만들어보았다.
예전에는 Node.js와 AngulaJS를 사용해서 SPA를 많이 만들었는데, 기본 개념은 유사해서 크게 어려움은 없을 것 같다.
다음 예제는 본인이 좋아하는 Bootstrap을 연동하도록 만들고 있다.
https://testdriven.io/developing-a-single-page-app-with-flask-and-vuejs
Developing a Single Page App with Flask and Vue.js
Python Flask를 이용하여 REST API를 만드는 것에 대해서 자세히 다룬 유용한 포스팅이 있으니 참고하자.
간혹, REST API에 대한 이해가 부족하여 자기 멋대로 API를 디자인하는 개발자들이 많다. REST API를 만들어서 사용하는 이유 중에 하나는 "인터페이스의 표준화"이다. 그런데, 제 멋대로 API를 설계하면 그것을 가져다가 사용하는 클라이언트 입장에서는 REST API를 사용하는 이점이 줄어들 수 있다.
https://blog.miguelgrinberg.com/post/designing-a-restful-api-using-flask-restful
SPA에서 CRUD 구현이 끝나면, 웹소켓을 이용한 통신 방법이 필요하다.
이또한 step by step 친절하게 다룬 내용을 참고하여 적용해보면 된다.
https://secdevops.ai/weekend-project-part-3-centralizing-state-management-with-vuex-5f4387ebc144
Creating a Real-time Web-based Application using Flask, Vue, and Socket.io
https://github.com/joshporter1/codenames
위의 예제는 vue-socket.io를 사용하는데, 이 방법은 뭔가 복잡하고 번거롭다.
그래서, 아래 블로그의 내용을 참고해서 Vue.js에서 socket.io-client를 사용하도록 변경하니 금방 구현할 수 있었다.
https://medium.com/@jaouad_45834/basic-chat-web-app-using-express-js-vue-js-socket-io-429588e841f0
Basic Chat Web App using Express.js, Vue.js & Socket.io
* 참고
@socket.on 으로 소켓 이벤트를 받지 않는 곳에서 emit을 호출하려고 하니 socket.emit('test', 메시지, broadcast=True) 로 호출해도 클라이언트에 전달이 되지 않는다.
그래서 찾아보니 소켓 객체 생성시 옵션을 주면 된단다.
I just found out (miguelgrinberg/python-socketio#16) that I need to add async_mode='threading' to the construction of the SocketIO object. Then it works! – Niklas R Sep 8 '17 at 2:30
그랬더니 클라이언트가 서버의 메시지를 잘 받아서 처리한다.
Standard Threading Library
While not comparable to eventlet and gevent in terms of performance, the Socket.IO server can also be configured to work with multi-threaded web servers that use standard Python threads. This is an ideal setup to use with development servers such as Werkzeug. Only the long-polling transport is currently available when using standard threads.
Instances of class socketio.Server will automatically use the threading mode if neither eventlet nor gevent are not installed. To request the threading mode explicitly, the async_mode option can be given in the constructor:
sio = socketio.Server(async_mode='threading')A server configured for threading is deployed as a regular web application, using any WSGI complaint multi-threaded server. The example below deploys an Socket.IO application combined with a Flask web application, using Flask’s development web server based on Werkzeug:
sio = socketio.Server(async_mode='threading')
app = Flask(__name__)
app.wsgi_app = socketio.Middleware(sio, app.wsgi_app)
# ... Socket.IO and Flask handler functions ...
if __name__ == '__main__':
app.run(threaded=True)When using the threading mode, it is important to ensure that the WSGI server can handle multiple concurrent requests using threads, since a client can have up to two outstanding requests at any given time. The Werkzeug server is single-threaded by default, so the threaded=True option is required.
Note that servers that use worker processes instead of threads, such as gunicorn, do not support a Socket.IO server configured in threading mode.
@socketio.on(이벤트, 네임스페이스)는 해당 이벤트가 들어왔을 때 어떠한 함수를 실행 시킬 것인지에 대한 것인데, 이 함수는 내부에서는 emit(이벤트, json)을 이용해 사용자에게 데이터를 전송할 수 있다. 이 때 emit에 broadcast=True 옵션을 넣게 되면 sender 만이 아닌 연결되어 있는 모든 사용자에게 데이터를 전송하게 된다.
https://github.com/miguelgrinberg/Flask-SocketIO
웹소켓의 네임스페이스에 대한 예제를 포함하고 있으니 참고할만 하다.