FlaskとWebSocketを使用してリアルタイム通信を行う

今回は、FlaskとWebSocketを使用してターミナルに打った文字列をWeb画面に表示する。 Flaskの基本的な使い方については以前の記事を参照されたい。
[Python] Flask 入門

Index

1. 環境構築

PythonでWebSocketを使用するには、geventというライブラリが使えるので、インストールする。

sudo pip3 install flask
sudo pip3 install gevent
sudo pip3 install gevent-websocket

2. コード

# server.py
from flask import Flask, request, render_template
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/pipe')
def pipe():
    if request.environ.get('wsgi.websocket'):
        ws = request.environ['wsgi.websocket']

        while True:
            ws.send(input())


def main():
    app.debug = True
    server = pywsgi.WSGIServer(("", 8080), app, handler_class=WebSocketHandler)
    server.serve_forever()


if __name__ == "__main__":
    main()
<!-- index.html -->
<html>
    <head>
        <script type="text/javascript">
            var ws = new WebSocket("ws://localhost:8080/pipe");

            ws.onmessage = function(e) {
              document.getElementById("text-field").innerHTML = e.data;
            }
        </script>
    </head>
    <body>
        <h1>WebSocket Example</h1>
        <p id="text-field"></p>
    </body>
</html>

3. 実行画面

f:id:Garfields:20171010221546g:plain

書籍

入門 Python 3

入門 Python 3

Pythonスタートブック

Pythonスタートブック

パーフェクトPython (PERFECT SERIES 5)

パーフェクトPython (PERFECT SERIES 5)

  • 作者: Pythonサポーターズ,露木誠,ルイス・イアン,石本敦夫,小田切篤,保坂翔馬,大谷弘喜
  • 出版社/メーカー: 技術評論社
  • 発売日: 2013/03/05
  • メディア: 大型本
  • 購入: 1人 クリック: 65回
  • この商品を含むブログ (30件) を見る

Pythonプロフェッショナルプログラミング 第2版

Pythonプロフェッショナルプログラミング 第2版