flask, wsgiを用いたwebsocket通信について

前提・実現したいこと

flaskでwebsocket通信を行うプログラムを実装したいです。
WSGIServerを使用しています。

WSGI, websocketを初めて実装するので詳しい方からすると, めちゃくちゃなことをやっているかもしれません。
何卒よろしくお願いします。

参考にしたサイト
Flaskとwebsocketを使った簡易的なチャットを開発する

発生している問題・エラーメッセージ

ブラウザ上でwebsocket通信をつなぐことはできるのですが、その後すぐに接続が切れてしまいます。
CloseEvent.code, CloseEvent.reasonを調べたところ, reasonは取得できず, 1005というコードのみが返ってきました。

実行環境

python 3.7
Ubuntu 18.04.2 LTS
ブラウザ: Google Chrome

Flask == 2.0.1
Flask-Sockets == 0.2.1
gevent == 21.1.2
gevent-websocket == 0.10.1
greenlet == 1.1.0
gunicorn == 20.1.0

該当のソースコード

app.py

python
1import json
2import datetime
3import time
4
5
6from gevent.pywsgi import WSGIServer
7from geventwebsocket.handler import WebSocketHandler
8
9from flask import Flask, request, render_template, Response
10
11app = Flask(__name__)
12app.config.from_object(__name__)
13
14
15@app.route('/')
16def index():
17   return render_template('index.html')
18
19
20@app.route('/pipe')
21def pipe():
22    print("connect python")
23    if request.environ.get('wsgi.websocket'):
24        ws = request.environ['wsgi.websocket']
25        while True:
26            time.sleep(1)
27            message = ws.receive()
28            if message is None:
29                break
30            datetime_now = datetime.datetime.now()
31            data = {
32                'time': str(datetime_now),
33                'message': message
34            }
35            ws.send(json.dumps(data))
36            print(message)
37            print(data)
38    return
39
40
41if __name__ == '__main__':
42    app.debug = True
43    host = 'localhost'
44    port = 8082  #諸事情で8082ポートを使用しています
45
46    host_port = (host, port)
47    server = WSGIServer(
48        host_port,
49        app,
50        handler_class=WebSocketHandler
51    )
52
53    server.serve_forever()

index.html

html
1<html lang="ja">
2    <head>
3        <meta charset="UTF-8">
4        <title>Document</title>
5    </head>
6    <body>
7        <h1>websocket chat</h1>
8
9        <input type="text" id="msg" value="> message"/>
10        <button id="sendBtn">send</button>
11        <ul id="rcv"></ul>
12    </body>
13
14    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
15    <script type="text/javascript">
16        var host = "ws://localhost:8082/pipe";
17        var ws = new WebSocket(host);
18
19        ws.onopen = function(){
20            console.log("接続");
21        };
22
23
24        // Log errors
25        ws.onerror = function (error) {
26            console.log('WebSocket Error ' + error);
27        };
28
29        ws.onclose = function (e) {
30            console.log("Close Reason = " + e.reason);
31            console.log("Close Code = " + e.code);
32        };
33
34        ws.onmessage = function(message){
35
36            var message_data = JSON.parse(message.data);
37            var time = message_data['time'];
38            var message = message_data['message'];
39
40            var string_txt = "[" + time + "] - " + message
41            $("#rcv").append("<li>" + string_txt + "</li>")
42        };
43
44        $("#sendBtn").on("click",function(){
45            console.log("button pushed!");
46            message = $("#msg").val();
47            console.log("message: " + message);
48            if (ws.OPEN){
49                console.log("opening");
50            }
51            ws.send(message);
52            console.log("hoge");
53        });
54    </script>
55</html>

試したこと

サーバプログラム内のpipe()でレスポンスを返すようなコードを追加したのですが、解決できませんでした。
というか、pipe()内でのprintをいくつか書いているのですが、コンソール上に何も表示されません。
そもそもルーティングできているのかも怪しい状態です。。。

python
1@app.route('/pipe')
2def pipe():
3    print("connect python")
4    if request.environ.get('wsgi.websocket'):
5        ws = request.environ['wsgi.websocket']
6        while True:
7            time.sleep(1)
8            message = ws.receive()
9            if message is None:
10                break
11            datetime_now = datetime.datetime.now()
12            data = {
13                'time': str(datetime_now),
14                'message': message
15            }
16            ws.send(json.dumps(data))
17            print(message)
18            print(data)
19    return Response(response=json.dumps({'message': 'hello response'}), status=200)
20

nekotama

2021/06/13 11:29

参考までに、google websocketsのサンプルですが https://github.com/GoogleCloudPlatform/python-docs-samples/blob/master/appengine/flexible/websockets/requirements.txt Flask==1.1.4 # it seems like Flask-sockets doesn't play well with 2.0+ Flaskの2.0+ではwebsocketはだめ見たいです