pythonasyncioeventletgeventlong-pollinglow-latencysocket-iosocketiosocketio-serverweb-serverwebsocket
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
3.7 KiB
90 lines
3.7 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Flask-SocketIO Test</title>
|
|
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(document).ready(function(){
|
|
var socket = io.connect();
|
|
|
|
socket.on('connect', function() {
|
|
socket.emit('my_event', {data: 'I\'m connected!'});
|
|
});
|
|
socket.on('disconnect', function() {
|
|
$('#log').append('<br>Disconnected');
|
|
});
|
|
socket.on('my_response', function(msg) {
|
|
$('#log').append('<br>Received: ' + msg.data);
|
|
});
|
|
|
|
// event handler for server sent data
|
|
// the data is displayed in the "Received" section of the page
|
|
// handlers for the different forms in the page
|
|
// these send data to the server in a variety of ways
|
|
$('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;
|
|
});
|
|
$('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) {
|
|
socket.emit('disconnect_request');
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Flask-SocketIO Test</h1>
|
|
<h2>Send:</h2>
|
|
<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>
|
|
<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 id="disconnect" method="POST" action="#">
|
|
<input type="submit" value="Disconnect">
|
|
</form>
|
|
<h2>Receive:</h2>
|
|
<div><p id="log"></p></div>
|
|
</body>
|
|
</html>
|
|
|