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::

or::

You can then access the application from your web browser at

``http://localhost:8000``.

<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>

<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>

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')

async def index(request):

with open('app.html') as f:

return html(f.read())

async def test_message(sid, message):

await sio.emit('my response', {'data': message['data']}, room=sid,

namespace='/test')

async def test_broadcast_message(sid, message):

await sio.emit('my response', {'data': message['data']}, 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')

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')

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')

async def send_room_message(sid, message):

await sio.emit('my response', {'data': message['data']},

room=message['room'], namespace='/test')

async def disconnect_request(sid):

await sio.disconnect(sid, namespace='/test')

async def test_connect(sid, environ):

await sio.emit('my response', {'data': 'Connected', 'count': 0}, room=sid,

namespace='/test')

def test_disconnect(sid):

print('Client disconnected')

app.static('/static', './static')

if __name__ == '__main__':

sio.start_background_task(background_task)

app.run()

<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>

from sanic import Sanic

from sanic.response import html

import socketio

sio = socketio.AsyncServer(async_mode='sanic')

app = Sanic()

sio.attach(app)

def index(request):

with open('latency.html') as f:

return html(f.read())

async def ping(sid):

await sio.emit('pong_from_server', room=sid)

app.static('/static', './static')

if __name__ == '__main__':

app.run()

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; }