websockets stuff
This commit is contained in:
parent
6955fcabc1
commit
78ca6c5c07
@ -1,28 +1,84 @@
|
|||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Socket-Test</title>
|
<title>Flask-SocketIO Test</title>
|
||||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous"></script>
|
||||||
<script type="text/javascript" charset="utf-8">
|
<script type="text/javascript" charset="utf-8">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
// Connect to the Socket.IO server.
|
||||||
|
// The connection URL has the following format, relative to the current page:
|
||||||
|
// http[s]://<domain>:<port>[/<namespace>]
|
||||||
|
var socket = io();
|
||||||
|
|
||||||
namespace = '/test';
|
// Event handler for new connections.
|
||||||
var socket = io(namespace);
|
// The callback function is invoked when a connection with the
|
||||||
|
// server is established.
|
||||||
socket.on('connect', function() {
|
socket.on('connect', function() {
|
||||||
socket.emit('my_event', {data: 'connected to the SocketServer...'});
|
socket.emit('my_event', {data: 'I\'m connected!'});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Event handler for server sent data.
|
||||||
|
// The callback function is invoked whenever the server emits data
|
||||||
|
// to the client. The data is then displayed in the "Received"
|
||||||
|
// section of the page.
|
||||||
socket.on('my_response', function(msg, cb) {
|
socket.on('my_response', function(msg, cb) {
|
||||||
$('#log').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
|
$('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
|
||||||
if (cb)
|
if (cb)
|
||||||
cb();
|
cb();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Interval function that tests message latency by sending a "ping"
|
||||||
|
// message. The server then responds with a "pong" message and the
|
||||||
|
// round trip time is measured.
|
||||||
|
var ping_pong_times = [];
|
||||||
|
var start_time;
|
||||||
|
window.setInterval(function() {
|
||||||
|
start_time = (new Date).getTime();
|
||||||
|
$('#transport').text(socket.io.engine.transport.name);
|
||||||
|
socket.emit('my_ping');
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
// Handler for the "pong" message. When the pong is received, the
|
||||||
|
// time from the ping is stored, and the average of the last 30
|
||||||
|
// samples is average and displayed.
|
||||||
|
socket.on('my_pong', function() {
|
||||||
|
var latency = (new Date).getTime() - start_time;
|
||||||
|
ping_pong_times.push(latency);
|
||||||
|
ping_pong_times = ping_pong_times.slice(-30); // keep last 30 samples
|
||||||
|
var sum = 0;
|
||||||
|
for (var i = 0; i < ping_pong_times.length; i++)
|
||||||
|
sum += ping_pong_times[i];
|
||||||
|
$('#ping-pong').text(Math.round(10 * sum / ping_pong_times.length) / 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handlers for the different forms in the page.
|
||||||
|
// These accept data from the user and send it to the server in a
|
||||||
|
// variety of ways
|
||||||
$('form#emit').submit(function(event) {
|
$('form#emit').submit(function(event) {
|
||||||
socket.emit('my_event', {data: $('#emit_data').val()});
|
socket.emit('my_event', {data: $('#emit_data').val()});
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
$('form#broadcast').submit(function(event) {
|
||||||
|
socket.emit('my_broadcast_event', {data: $('#broadcast_data').val()});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
$('form#join').submit(function(event) {
|
||||||
|
socket.emit('join', {room: $('#join_room').val()});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
$('form#leave').submit(function(event) {
|
||||||
|
socket.emit('leave', {room: $('#leave_room').val()});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
$('form#send_room').submit(function(event) {
|
||||||
|
socket.emit('my_room_event', {room: $('#room_name').val(), data: $('#room_data').val()});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
$('form#close').submit(function(event) {
|
||||||
|
socket.emit('close_room', {room: $('#close_room').val()});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
$('form#disconnect').submit(function(event) {
|
$('form#disconnect').submit(function(event) {
|
||||||
socket.emit('disconnect_request');
|
socket.emit('disconnect_request');
|
||||||
return false;
|
return false;
|
||||||
@ -30,18 +86,43 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body style="background-color:white;">
|
<body>
|
||||||
|
<h1>Flask-SocketIO Test</h1>
|
||||||
<h1 style="background-color:white;">Socket</h1>
|
<p>
|
||||||
|
Async mode is: <b>{{ async_mode }}</b><br>
|
||||||
|
Current transport is: <b><span id="transport"></span></b><br>
|
||||||
|
Average ping/pong latency: <b><span id="ping-pong"></span>ms</b>
|
||||||
|
</p>
|
||||||
|
<h2>Send:</h2>
|
||||||
<form id="emit" method="POST" action='#'>
|
<form id="emit" method="POST" action='#'>
|
||||||
<input type="text" name="emit_data" id="emit_data" placeholder="Message">
|
<input type="text" name="emit_data" id="emit_data" placeholder="Message">
|
||||||
<input type="submit" value="Send 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>
|
||||||
|
<form id="join" method="POST" action='#'>
|
||||||
|
<input type="text" name="join_room" id="join_room" placeholder="Room Name">
|
||||||
|
<input type="submit" value="Join Room">
|
||||||
|
</form>
|
||||||
|
<form id="leave" method="POST" action='#'>
|
||||||
|
<input type="text" name="leave_room" id="leave_room" placeholder="Room Name">
|
||||||
|
<input type="submit" value="Leave Room">
|
||||||
|
</form>
|
||||||
|
<form id="send_room" method="POST" action='#'>
|
||||||
|
<input type="text" name="room_name" id="room_name" placeholder="Room Name">
|
||||||
|
<input type="text" name="room_data" id="room_data" placeholder="Message">
|
||||||
|
<input type="submit" value="Send to Room">
|
||||||
|
</form>
|
||||||
|
<form id="close" method="POST" action="#">
|
||||||
|
<input type="text" name="close_room" id="close_room" placeholder="Room Name">
|
||||||
|
<input type="submit" value="Close Room">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<form id="disconnect" method="POST" action="#">
|
<form id="disconnect" method="POST" action="#">
|
||||||
<input type="submit" value="Disconnect Server">
|
<input type="submit" value="Disconnect">
|
||||||
</form>
|
</form>
|
||||||
<h2 style="background-color:white;">Logs</h2>
|
<h2>Receive:</h2>
|
||||||
<div id="log" ></div>
|
<div id="log"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -1,39 +1,110 @@
|
|||||||
from flask import Flask, render_template, session, copy_current_request_context
|
|
||||||
from flask_socketio import SocketIO, emit, disconnect
|
|
||||||
from threading import Lock
|
from threading import Lock
|
||||||
|
|
||||||
|
from flask import Flask, render_template, session, request, \
|
||||||
|
copy_current_request_context
|
||||||
|
from flask_socketio import SocketIO, emit, join_room, leave_room, \
|
||||||
|
close_room, rooms, disconnect
|
||||||
|
|
||||||
|
# Set this variable to "threading", "eventlet" or "gevent" to test the
|
||||||
|
# different async modes, or leave it set to None for the application to choose
|
||||||
|
# the best option based on installed packages.
|
||||||
async_mode = None
|
async_mode = None
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
app.config['SECRET_KEY'] = 'secret!'
|
app.config['SECRET_KEY'] = 'secret!'
|
||||||
socket_ = SocketIO(app, async_mode=async_mode)
|
socketio = SocketIO(app, async_mode=async_mode)
|
||||||
thread = None
|
thread = None
|
||||||
thread_lock = Lock()
|
thread_lock = Lock()
|
||||||
|
|
||||||
|
|
||||||
@app.route('/')
|
@app.route('/')
|
||||||
def index():
|
def index():
|
||||||
return render_template('index.html', async_mode=socket_.async_mode)
|
return render_template('index.html', async_mode=socketio.async_mode)
|
||||||
|
|
||||||
|
|
||||||
@socket_.on('my_event', namespace='/test')
|
@app.route('/test')
|
||||||
def test_message(message):
|
def test():
|
||||||
|
send_text_to_room("salut c'est serveur", "192.168.1.130")
|
||||||
|
return "OK"
|
||||||
|
|
||||||
|
|
||||||
|
def send_text_to_room(text, room_id):
|
||||||
|
session['receive_count'] = session.get('receive_count', 0) + 1
|
||||||
|
socketio.emit('my_response', {'data': text, 'count': session['receive_count']}, to=room_id)
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.event
|
||||||
|
def my_event(message):
|
||||||
session['receive_count'] = session.get('receive_count', 0) + 1
|
session['receive_count'] = session.get('receive_count', 0) + 1
|
||||||
emit('my_response',
|
emit('my_response',
|
||||||
{'data': message['data'], 'count': session['receive_count']})
|
{'data': message['data'], 'count': session['receive_count']})
|
||||||
|
|
||||||
|
|
||||||
@socket_.on('disconnect_request', namespace='/test')
|
@socketio.event
|
||||||
|
def my_broadcast_event(message):
|
||||||
|
session['receive_count'] = session.get('receive_count', 0) + 1
|
||||||
|
emit('my_response',
|
||||||
|
{'data': message['data'], 'count': session['receive_count']},
|
||||||
|
broadcast=True)
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.event
|
||||||
|
def join(message):
|
||||||
|
join_room(message['room'])
|
||||||
|
session['receive_count'] = session.get('receive_count', 0) + 1
|
||||||
|
emit('my_response',
|
||||||
|
{'data': 'In rooms: ' + ', '.join(rooms()),
|
||||||
|
'count': session['receive_count']})
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.event
|
||||||
|
def leave(message):
|
||||||
|
leave_room(message['room'])
|
||||||
|
session['receive_count'] = session.get('receive_count', 0) + 1
|
||||||
|
emit('my_response',
|
||||||
|
{'data': 'In rooms: ' + ', '.join(rooms()),
|
||||||
|
'count': session['receive_count']})
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.on('close_room')
|
||||||
|
def on_close_room(message):
|
||||||
|
session['receive_count'] = session.get('receive_count', 0) + 1
|
||||||
|
emit('my_response', {'data': 'Room ' + message['room'] + ' is closing.',
|
||||||
|
'count': session['receive_count']},
|
||||||
|
to=message['room'])
|
||||||
|
close_room(message['room'])
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.event
|
||||||
def disconnect_request():
|
def disconnect_request():
|
||||||
@copy_current_request_context
|
@copy_current_request_context
|
||||||
def can_disconnect():
|
def can_disconnect():
|
||||||
disconnect()
|
disconnect()
|
||||||
|
|
||||||
session['receive_count'] = session.get('receive_count', 0) + 1
|
session['receive_count'] = session.get('receive_count', 0) + 1
|
||||||
|
# for this emit we use a callback function
|
||||||
|
# when the callback function is invoked we know that the message has been
|
||||||
|
# received and it is safe to disconnect
|
||||||
emit('my_response',
|
emit('my_response',
|
||||||
{'data': 'Disconnected!', 'count': session['receive_count']},
|
{'data': 'Disconnected!', 'count': session['receive_count']},
|
||||||
callback=can_disconnect)
|
callback=can_disconnect)
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.event
|
||||||
|
def my_ping():
|
||||||
|
emit('my_pong')
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.event
|
||||||
|
def connect():
|
||||||
|
global thread
|
||||||
|
emit('my_response', {'data': 'Connected', 'count': 0})
|
||||||
|
|
||||||
|
|
||||||
|
@socketio.on('disconnect')
|
||||||
|
def test_disconnect():
|
||||||
|
print('Client disconnected', request.sid)
|
||||||
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
socket_.run(app, debug=True, host='0.0.0.0')
|
socketio.run(app)
|
||||||
|
Loading…
Reference in New Issue
Block a user