Added a port of the "latency" example from the official Javascript cl…

…ient
miguelgrinberg · Sep 1, 2015 · b976ff3 · b976ff3
1 parent 1e8fab6
commit b976ff3
Show file tree

Hide file tree

Showing 8 changed files with 163 additions and 1 deletion.
diff --git a/examples/README.rst b/examples/README.rst
@@ -0,0 +1,49 @@
+Engine.IO Examples
+==================
+
+This directory contains example Engine.IO applications.
+
+simple.py
+---------
+
+A basic application in which the client sends messages to the server and the
+server responds.
+
+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 Engine.IO server.
+
+Running the Examples
+--------------------
+
+To run these examples using the default ``'threading'`` mode, create a virtual
+environment, install the requirements and then run::
+
+    $ python simple.py
+
+or::
+
+    $ python latency.py
+
+Near the top of the ``simple.py`` and ``latency.py`` source files there is a
+``async_mode`` variable that can be edited to swich to the other asynchornous
+modes. Accepted values for ``async_mode`` are ``'threading'``, ``'eventlet'``
+and ``'gevent'``.
+
+Note 1: when using the ``'eventlet'`` mode, the eventlet package must be
+installed in the virtual environment::
+
+    $ pip install eventlet
+
+Note 2: when using the ``'gevent'`` mode, the gevent and gevent-websocket
+packages must be installed in the virtual environment::
+
+    $ pip install gevent gevent-websocket
diff --git a/examples/latency.py b/examples/latency.py
@@ -0,0 +1,45 @@
+from flask import Flask, render_template
+
+import engineio
+
+async_mode = 'threading'
+
+eio = engineio.Server(async_mode=async_mode)
+app = Flask(__name__)
+app.wsgi_app = engineio.Middleware(eio, app.wsgi_app)
+
+
+@app.route('/')
+def index():
+    return render_template('latency.html')
+
+
+@eio.on('message')
+def message(sid, data):
+    eio.send(sid, 'pong', binary=False)
+
+
+if __name__ == '__main__':
+    if async_mode == 'threading':
+        # deploy with Werkzeug
+        app.run(threaded=True)
+    elif async_mode == 'eventlet':
+        # deploy with eventlet
+        import eventlet
+        from eventlet import wsgi
+        wsgi.server(eventlet.listen(('', 5000)), app)
+    elif async_mode == 'gevent':
+        # deploy with gevent
+        from gevent import pywsgi
+        try:
+            from geventwebsocket.handler import WebSocketHandler
+            websocket = True
+        except ImportError:
+            websocket = False
+        if websocket:
+            pywsgi.WSGIServer(('', 5000), app,
+                              handler_class=WebSocketHandler).serve_forever()
+        else:
+            pywsgi.WSGIServer(('', 5000), app).serve_forever()
+    else:
+        print('Unknown async_mode: ' + async_mode)
diff --git a/example/requirements.txt → examples/requirements.txt b/example/requirements.txt → examples/requirements.txt
diff --git a/example/app.py → examples/simple.py b/example/app.py → examples/simple.py
@@ -11,7 +11,7 @@
 
 @app.route('/')
 def index():
-    return render_template('index.html')
+    return render_template('simple.html')
 
 
 @eio.on('connect')

diff --git a/example/static/engine.io.js → examples/static/engine.io.js b/example/static/engine.io.js → examples/static/engine.io.js
diff --git a/examples/static/style.css b/examples/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; }
diff --git a/examples/templates/latency.html b/examples/templates/latency.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+  <head>
+    <title>EIO Latency</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+  </head>
+  <body>
+    <h1>EIO 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="{{ url_for('static', filename='engine.io.js') }}"></script>
+    <script>
+      // socket
+      var socket = eio('http://' + document.domain + ':' + location.port);
+      var char = $('chart').get(0);
+      socket.on('open', function() {
+          if (chart.getContext) {
+              render();
+              window.onresize = render;
+          }
+          send();
+      });
+      socket.on('message', function(data) {
+          var latency = new Date - last;
+          $('#latency').text(latency + 'ms');
+          if (time)
+              time.append(+new Date, latency);
+          setTimeout(send, 100);
+      });
+      socket.on('close', function() {
+          if (smoothie)
+              smoothie.stop();
+          $('#transport').text('(disconnected)');
+      });
+
+      var last;
+      function send() {
+          last = new Date;
+          socket.send('ping');
+          $('#transport').text(socket.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/example/templates/index.html → examples/templates/simple.html b/example/templates/index.html → examples/templates/simple.html