sanic examples (long-polling only)

miguelgrinberg · miguelgrinberg · commit 38af61ee1f3f · 2017-02-13T09:17:51.000-08:00
diff --git a/examples/sanic/README.rst b/examples/sanic/README.rst
@@ -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``.
diff --git a/examples/sanic/app.html b/examples/sanic/app.html
@@ -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>
diff --git a/examples/sanic/app.py b/examples/sanic/app.py
@@ -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()
diff --git a/examples/sanic/latency.html b/examples/sanic/latency.html
@@ -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>
diff --git a/examples/sanic/latency.py b/examples/sanic/latency.py
@@ -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()
diff --git a/examples/sanic/requirements.txt b/examples/sanic/requirements.txt
@@ -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
diff --git a/examples/sanic/static/style.css b/examples/sanic/static/style.css
@@ -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; }
