質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

1回答

2837閲覧

SocketIOでページを離れてないのにDisconnectになってしまう

Dr.Pepper

総合スコア1

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2021/07/22 08:28

ユーザーがページから離れるとClient disconnectとサーバー(Python)側で出力させたい

ユーザーがアクセスするサイト側でSocket.IOを
サーバー側でPythonのFlask-SocketIOを使用して
ユーザーがページにアクセスするとサーバー(Python)側でConnectと出力し、
ユーザーがページから離れるとClient disconnectとサーバー(Python)側で出力させたい

ですが、タイトルの通り、ユーザーがページを離れていないにも関わらずサーバー側でClient disconnectとなってしまいます。
(connectは正常な動作をします。)

該当のソースコード

Python

1from flask_socketio import SocketIO, emit, join_room, leave_room, \ 2 close_room, rooms, disconnect 3 4@socketio.event 5def my_event(message): 6 session['receive_count'] = session.get('receive_count', 0) + 1 7 emit('my_response', 8 {'data': message['data'], 'count': session['receive_count']}) 9 10 11@socketio.event 12def my_broadcast_event(message): 13 session['receive_count'] = session.get('receive_count', 0) + 1 14 emit('my_response', 15 {'data': message['data'], 'count': session['receive_count']}, 16 broadcast=True) 17 18@socketio.event 19def join(message): 20 join_room(message['room']) 21 session['receive_count'] = session.get('receive_count', 0) + 1 22 emit('my_response', 23 {'data': 'In rooms: ' + ', '.join(rooms()), 24 'count': session['receive_count']}) 25 26 27@socketio.event 28def leave(message): 29 leave_room(message['room']) 30 session['receive_count'] = session.get('receive_count', 0) + 1 31 emit('my_response', 32 {'data': 'In rooms: ' + ', '.join(rooms()), 33 'count': session['receive_count']}) 34 35 36@socketio.on('close_room') 37def on_close_room(message): 38 session['receive_count'] = session.get('receive_count', 0) + 1 39 emit('my_response', {'data': 'Room ' + message['room'] + ' is closing.', 40 'count': session['receive_count']}, 41 to=message['room']) 42 close_room(message['room']) 43 44 45@socketio.event 46def my_room_event(message): 47 session['receive_count'] = session.get('receive_count', 0) + 1 48 emit('my_response', 49 {'data': message['data'], 'count': session['receive_count']}, 50 to=message['room']) 51 52 53@socketio.event 54def disconnect_request(): 55 @copy_current_request_context 56 def can_disconnect(): 57 disconnect() 58 59 session['receive_count'] = session.get('receive_count', 0) + 1 60 emit('my_response', 61 {'data': 'Disconnected!', 'count': session['receive_count']}, 62 callback=can_disconnect) 63 64 65@socketio.event 66def my_ping(): 67 emit('my_pong') 68 69 70@socketio.event 71def connect(): 72 global thread 73 with thread_lock: 74 if thread is None: 75 thread = socketio.start_background_task(background_thread) 76 emit('my_response', {'data': 'Connected', 'count': 0}) 77 78 79@socketio.on('connect') 80def before_request(): 81 print("connected") 82 83try: 84 @socketio.on('disconnect') 85 def test_disconnect(): 86 ip_list.clear() 87 print('Client disconnected') 88except socket.error.BrokenPipeError as e: 89 pass

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>Test Server</title> 7 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> 8 <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet"> 9</head> 10<body> 11 12<div id="log"></div> 13 14</body>

JavaScript

1<!--suppress JSUnresolvedLibraryURL --> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 3<!--suppress JSUnresolvedLibraryURL --> 4<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> 5<!--suppress JSUnresolvedLibraryURL --> 6<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="伏せます" crossorigin="anonymous"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="伏せます" crossorigin="anonymous"></script> 9 10 11$(document).ready(function(){ 12 var socket = io(); 13 socket.on('connect', function(event) { 14 socket.emit('my_event', {data: 'I\'m connected!'}); 15 }); 16 socket.on('disconnect',function(event){ 17 socket.emit('my_disconnect', {data: 'I\'m disconnected!'}); 18 }); 19 socket.on('my_response', function(msg, cb) { 20 $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html()); 21 if (cb) 22 cb(); 23 }); 24 var ping_pong_times = []; 25 var start_time; 26 window.setInterval(function() { 27 start_time = (new Date).getTime(); 28 socket.emit('my_ping'); 29 }, 1000); 30 socket.on('my_pong', function() { 31 var latency = (new Date).getTime() - start_time; 32 ping_pong_times.push(latency); 33 ping_pong_times = ping_pong_times.slice(-30); // keep last 30 samples 34 var sum = 0; 35 for (var i = 0; i < ping_pong_times.length; i++) 36 sum += ping_pong_times[i]; 37 $('#ping-pong').text(Math.round(10 * sum / ping_pong_times.length) / 10); 38 }); 39 40 $('form#emit').submit(function(event) { 41 socket.emit('my_event', {data: $('#emit_data').val()}); 42 return false; 43 }); 44 $('form#broadcast').submit(function(event) { 45 socket.emit('my_broadcast_event', {data: $('#broadcast_data').val()}); 46 return false; 47 }); 48 $('form#join').submit(function(event) { 49 socket.emit('join', {room: $('#join_room').val()}); 50 return false; 51 }); 52 $('form#leave').submit(function(event) { 53 socket.emit('leave', {room: $('#leave_room').val()}); 54 return false; 55 }); 56 $('form#send_room').submit(function(event) { 57 socket.emit('my_room_event', {room: $('#room_name').val(), data: $('#room_data').val()}); 58 return false; 59 }); 60 $('form#close').submit(function(event) { 61 socket.emit('close_room', {room: $('#close_room').val()}); 62 return false; 63 }); 64 65 $('form#disconnect').submit(function(event) { 66 socket.emit('disconnect_request'); 67 return false; 68 }); 69 70 }

気づいたこと

Client Disconnectに大体20~30の間でなるという規則性(?)があるようです。

補足情報(FW/ツールのバージョンなど)

Python 3.7.3
Flask 1.0.2

JavaScript SocketIO socket.io/3.0.4

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

原因はずっとJS側にあると思っていましたが、どうやらPython側でハートビートを設定するのが正解だったようです。
参考にさせていただいたページを載せておきます。

https://stackoverflow.com/questions/27159198/socket-io-with-flask-socketio-python-how-to-set-socket-keepalive-timeout

投稿2021/07/27 08:23

Dr.Pepper

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問