WebSocketとは

双方向通信であり、サーバとクライアント間でコネクションを確立し、コメントなどが送信されるとリアルタイムにそのコメントがコネクションを張っているクライアント全員に送られることでFacebookメッセンジャーやLineのようなチャットシステムを実現できる。このような双方向通信の仕組みをWebSocketという。

ちなみに余談としてポーリング方式があるが、websocketではコメントが送信された途端にサーバにパケットを送る仕組みになっているが、ポーリングでは、何秒間ごとにパケットを送り続け、コメントがされると送り続けているパケットにそのまま乗せてサーバに送る仕組みになる。よって、コメントが反映されるまで何秒間と大幅に遅れる上にパケットを送りつつづけるためサーバの負担が大きい。

Flask上でWebSocketを実現

Flaskのプロジェクトを作成

Visual Studio2015を開き、下記のように選択
【新しいプロジェクト】▶︎【Python】▶︎【Web】▶︎【Flask Web Project】

Websocketの導入

下記のようにプログラムを書き換えてください
参考にしたサイト

hello.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    <h1>Flaskでechoサーバー☆</h1>
    <form id="emit" method="POST" action='#'>
        <input type="text" name="emit_data" id="emit_data" placeholder="Message">
        <input type="submit" value="Echo">
    </form>
    <form id="broadcast" method="POST" action='#'>
        <input type="text" name="broadcast_data" id="broadcast_data" placeholder="Message">
        <input type="submit" value="Broadcast">
    </form>

    <ul id="log"></ul>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            namespace = '/test';
            var socket = io.connect('http://'+ document.domain+ ':' + location.port + namespace);
            $('form#emit').submit(function (event) {
                socket.emit('my event', { data: $('#emit_data').val() });
                return false;
            });
            $('form#broadcast').submit(function (event) {
                socket.emit('my broadcast event', { data: $('#broadcast_data').val() });
                return false;
            });

            socket.on('my response', function (msg) {
                $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
            });
        })
    </script>
</body>
</html>

views.py

"""
Routes and views for the flask application.
"""

from datetime import datetime
from flask import render_template
from FlaskWebProject2 import app
from flask_sockets import Sockets

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

if __name__ == '__main__':
    socketio.run(app, debug=True)

runserver.py

"""
This script runs the FlaskWebProject2 application using a development server.
"""

from os import environ
from FlaskWebProject2 import app
from flask import Flask, render_template, session, request         
from flask_socketio import SocketIO, emit, join_room, leave_room,close_room, rooms, disconnect   

async_mode = None
app.config['SECRET_KEY'] = 'secret!'

socketio = SocketIO(app)
thread = None

@socketio.on('my event', namespace='/test')
def test_message(message):
    session['receive_count'] = session.get('receive_count', 0) + 1
    emit('my response',{'data': message['data'], 'count': session['receive_count']})

@socketio.on('my broadcast event', namespace='/test')
def test_broadcast_message(message):
    session['receive_count'] = session.get('receive_count', 0) + 1
    emit('my response',{'data': message['data'], 'count': session['receive_count']},broadcast=True)

if __name__ == '__main__':

    HOST = environ.get('SERVER_HOST', 'localhost')
    try:
        PORT = int(environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555
    socketio.run(app,HOST,PORT)
    #app.run(HOST, PORT)