KZKY memo

自分用メモ.

Flask-SocketIO 基本

Installation

pip install flask-socketio

まずはこちらをやる

短いから

WebSocket 基本

  • Communication protocol in HTML5
  • Permanent connection
  • Bi-directional communication
  • Either client or server can initiate communication

Flask-Socketsとの違い

Flask-Socketsは

  • nativeの単なるラッパー
  • 単にコミュニケーションチャンネルの実装をしている
  • 何が送られるかはアプリケーション依存

Flask-SocketIOの方が簡単に使えると思われる.

Basics

app = Flask(__name__)
socketio = SocketIO(app)
socketio.run(app)

event name

  • "connect", "disconnect", "message", "json"はSocketIO生成の特別なイベント名
  • これら以外はcustom event name扱い
  • messageは単なるtextを送る
  • jsonpython dictionaryとして送る

namespace

  • namespaceを使うと1つのsocketで多重通信が可能
  • namespaceを使わないとglobal namespaceで通信する

send/emit

  • sendはstring/jsonをclientへ送る
  • emitはcustom event nameでclientへデータを送る
  • broadcastは同じnamespaceで通信しているclientへデータを送る

用語

  • namespace: 上記説明の通り
  • event name: namespace以下で,場合分けしたいときに使う

設計方針のオーバービュー

  • namespace(s)を決める
  • namespace以下のevent name(s)を決める
  • server/client側でcouplingしやすいので注意
    • サーバ側に命名権を与えた方がいいと思う
      • flask, django, sinatra, rubyで開発している場合はそこまで議論にならないと思う
      • 問題になるのはhtml/js/cssがserver codeと完全に分離している場合
      • その時は初めの通信時にserverからnamespae/eventnameをも持ってくるとか?

Flask-SocketIO/Javascript SocketIOのnamespace, custom eventの対応

Flask-SocketIO (python)

@socketio.on('my event', namespace='/test')
def test_message(message):
    emit('my response', {'data': message['data']})

SocketIO (js)

var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
socket.on('my response', function(msg) {
    $('#log').append('<p>Received: ' + msg.data + '</p>');
});

実際のサンプルを動かしてみる

https://github.com/miguelgrinberg/Flask-SocketIOから

git clone https://github.com/miguelgrinberg/Flask-SocketIO.git
cd example
python app.py

Roomのサンプルも付いている.