Miguel Grinberg
8 years ago
7 changed files with 323 additions and 0 deletions
@ -0,0 +1,42 @@ |
|||||
|
Socket.IO sanic Examples |
||||
|
======================== |
||||
|
|
||||
|
This directory contains example Socket.IO applications that are compatible with |
||||
|
asyncio and the sanic framework. These applications require Python 3.5 or |
||||
|
later. |
||||
|
|
||||
|
Note that because sanic does not support the WebSocket protocol, the only |
||||
|
transport is long-polling at this time. |
||||
|
|
||||
|
app.py |
||||
|
------ |
||||
|
|
||||
|
A basic "kitchen sink" type application that allows the user to experiment |
||||
|
with most of the available features of the Socket.IO server. |
||||
|
|
||||
|
latency.py |
||||
|
---------- |
||||
|
|
||||
|
A port of the latency application included in the official Engine.IO |
||||
|
Javascript server. In this application the client sends *ping* messages to |
||||
|
the server, which are responded by the server with a *pong*. The client |
||||
|
measures the time it takes for each of these exchanges and plots these in real |
||||
|
time to the page. |
||||
|
|
||||
|
This is an ideal application to measure the performance of the different |
||||
|
asynchronous modes supported by the Socket.IO server. |
||||
|
|
||||
|
Running the Examples |
||||
|
-------------------- |
||||
|
|
||||
|
To run these examples, create a virtual environment, install the requirements |
||||
|
and then run:: |
||||
|
|
||||
|
$ python app.py |
||||
|
|
||||
|
or:: |
||||
|
|
||||
|
$ python latency.py |
||||
|
|
||||
|
You can then access the application from your web browser at |
||||
|
``http://localhost:8000``. |
||||
@ -0,0 +1,91 @@ |
|||||
|
<!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/1.3.5/socket.io.min.js"></script> |
||||
|
<script type="text/javascript" charset="utf-8"> |
||||
|
$(document).ready(function(){ |
||||
|
namespace = '/test'; |
||||
|
var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); |
||||
|
|
||||
|
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> |
||||
@ -0,0 +1,89 @@ |
|||||
|
import asyncio |
||||
|
|
||||
|
from sanic import Sanic |
||||
|
from sanic.response import html |
||||
|
|
||||
|
import socketio |
||||
|
|
||||
|
sio = socketio.AsyncServer(async_mode='sanic') |
||||
|
app = Sanic() |
||||
|
sio.attach(app) |
||||
|
|
||||
|
|
||||
|
async def background_task(): |
||||
|
"""Example of how to send server generated events to clients.""" |
||||
|
count = 0 |
||||
|
while True: |
||||
|
await sio.sleep(10) |
||||
|
count += 1 |
||||
|
await sio.emit('my response', {'data': 'Server generated event'}, |
||||
|
namespace='/test') |
||||
|
|
||||
|
|
||||
|
@app.route('/') |
||||
|
async def index(request): |
||||
|
with open('app.html') as f: |
||||
|
return html(f.read()) |
||||
|
|
||||
|
|
||||
|
@sio.on('my event', namespace='/test') |
||||
|
async def test_message(sid, message): |
||||
|
await sio.emit('my response', {'data': message['data']}, room=sid, |
||||
|
namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('my broadcast event', namespace='/test') |
||||
|
async def test_broadcast_message(sid, message): |
||||
|
await sio.emit('my response', {'data': message['data']}, namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('join', namespace='/test') |
||||
|
async def join(sid, message): |
||||
|
sio.enter_room(sid, message['room'], namespace='/test') |
||||
|
await sio.emit('my response', {'data': 'Entered room: ' + message['room']}, |
||||
|
room=sid, namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('leave', namespace='/test') |
||||
|
async def leave(sid, message): |
||||
|
sio.leave_room(sid, message['room'], namespace='/test') |
||||
|
await sio.emit('my response', {'data': 'Left room: ' + message['room']}, |
||||
|
room=sid, namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('close room', namespace='/test') |
||||
|
async def close(sid, message): |
||||
|
await sio.emit('my response', |
||||
|
{'data': 'Room ' + message['room'] + ' is closing.'}, |
||||
|
room=message['room'], namespace='/test') |
||||
|
await sio.close_room(message['room'], namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('my room event', namespace='/test') |
||||
|
async def send_room_message(sid, message): |
||||
|
await sio.emit('my response', {'data': message['data']}, |
||||
|
room=message['room'], namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('disconnect request', namespace='/test') |
||||
|
async def disconnect_request(sid): |
||||
|
await sio.disconnect(sid, namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('connect', namespace='/test') |
||||
|
async def test_connect(sid, environ): |
||||
|
await sio.emit('my response', {'data': 'Connected', 'count': 0}, room=sid, |
||||
|
namespace='/test') |
||||
|
|
||||
|
|
||||
|
@sio.on('disconnect', namespace='/test') |
||||
|
def test_disconnect(sid): |
||||
|
print('Client disconnected') |
||||
|
|
||||
|
|
||||
|
app.static('/static', './static') |
||||
|
|
||||
|
|
||||
|
if __name__ == '__main__': |
||||
|
sio.start_background_task(background_task) |
||||
|
app.run() |
||||
@ -0,0 +1,64 @@ |
|||||
|
<!doctype html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title>Socket.IO Latency</title> |
||||
|
<link rel="stylesheet" href="/static/style.css" /> |
||||
|
</head> |
||||
|
<body> |
||||
|
<h1>Socket.IO Latency <span id="latency"></span></h1> |
||||
|
<h2 id="transport">(connecting)</h2> |
||||
|
<canvas id="chart" height="200"></canvas> |
||||
|
|
||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> |
||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/smoothie/1.27.0/smoothie.js"></script> |
||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script> |
||||
|
<script> |
||||
|
// socket |
||||
|
var socket = io.connect('http://' + document.domain + ':' + location.port); |
||||
|
var char = $('chart').get(0); |
||||
|
socket.on('connect', function() { |
||||
|
if (chart.getContext) { |
||||
|
render(); |
||||
|
window.onresize = render; |
||||
|
} |
||||
|
send(); |
||||
|
}); |
||||
|
socket.on('pong_from_server', function() { |
||||
|
var latency = new Date - last; |
||||
|
$('#latency').text(latency + 'ms'); |
||||
|
if (time) |
||||
|
time.append(+new Date, latency); |
||||
|
setTimeout(send, 100); |
||||
|
}); |
||||
|
socket.on('disconnect', function() { |
||||
|
if (smoothie) |
||||
|
smoothie.stop(); |
||||
|
$('#transport').text('(disconnected)'); |
||||
|
}); |
||||
|
|
||||
|
var last; |
||||
|
function send() { |
||||
|
last = new Date; |
||||
|
socket.emit('ping_from_client'); |
||||
|
$('#transport').text(socket.io.engine.transport.name); |
||||
|
} |
||||
|
|
||||
|
// chart |
||||
|
var smoothie; |
||||
|
var time; |
||||
|
function render() { |
||||
|
if (smoothie) |
||||
|
smoothie.stop(); |
||||
|
chart.width = document.body.clientWidth; |
||||
|
smoothie = new SmoothieChart(); |
||||
|
smoothie.streamTo(chart, 1000); |
||||
|
time = new TimeSeries(); |
||||
|
smoothie.addTimeSeries(time, { |
||||
|
strokeStyle: 'rgb(255, 0, 0)', |
||||
|
fillStyle: 'rgba(255, 0, 0, 0.4)', |
||||
|
lineWidth: 2 |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,25 @@ |
|||||
|
from sanic import Sanic |
||||
|
from sanic.response import html |
||||
|
|
||||
|
import socketio |
||||
|
|
||||
|
sio = socketio.AsyncServer(async_mode='sanic') |
||||
|
app = Sanic() |
||||
|
sio.attach(app) |
||||
|
|
||||
|
|
||||
|
@app.route('/') |
||||
|
def index(request): |
||||
|
with open('latency.html') as f: |
||||
|
return html(f.read()) |
||||
|
|
||||
|
|
||||
|
@sio.on('ping_from_client') |
||||
|
async def ping(sid): |
||||
|
await sio.emit('pong_from_server', room=sid) |
||||
|
|
||||
|
app.static('/static', './static') |
||||
|
|
||||
|
|
||||
|
if __name__ == '__main__': |
||||
|
app.run() |
||||
@ -0,0 +1,8 @@ |
|||||
|
aiofiles==0.3.0 |
||||
|
httptools==0.0.9 |
||||
|
python_engineio |
||||
|
python_socketio |
||||
|
sanic==0.3.1 |
||||
|
six==1.10.0 |
||||
|
ujson==1.35 |
||||
|
uvloop==0.8.0 |
||||
@ -0,0 +1,4 @@ |
|||||
|
body { margin: 0; padding: 0; font-family: Helvetica Neue; } |
||||
|
h1 { margin: 100px 100px 10px; } |
||||
|
h2 { color: #999; margin: 0 100px 30px; font-weight: normal; } |
||||
|
#latency { color: red; } |
||||
Loading…
Reference in new issue