v5 protocol: add JavaScript client and server examples for testing

4 years ago · 798ab6abe1
20 changed files with 3598 additions and 3 deletions
--- a/.gitignore
+++ b/.gitignore
@ -43,3 +43,5 @@ venv*
 tags
 htmlcov
 *.swp
 node_modules
--- a/examples/client/README.rst
+++ b/examples/client/README.rst
@ -13,3 +13,8 @@ asyncio
 -------
 Examples that use Python's `asyncio` package for concurrency.
 javascript
 ----------
 Examples that use the JavaScript version of Socket.IO for compatiblity testing.
--- a/examples/client/asyncio/latency_client.py
+++ b/examples/client/asyncio/latency_client.py
@ -25,7 +25,8 @@ async def pong_from_server():
    latency = time.time() - start_timer
    print('latency is {0:.2f} ms'.format(latency * 1000))
    await sio.sleep(1)
-    await send_ping()
+    if sio.connected:
        await send_ping()
 async def start_server():
--- a/examples/client/javascript/README.md
+++ b/examples/client/javascript/README.md
@ -0,0 +1,10 @@
 # Socket.IO Fiddle
 ```
 $ npm install
 $ node fiddle-client.js   # to run the fiddle example
 $ node latency-client.js  # to run the latency example
 ```
 Optionally, specify a port by supplying the `PORT` env variable.
--- a/examples/client/javascript/fiddle-client.js
+++ b/examples/client/javascript/fiddle-client.js
@ -0,0 +1,16 @@
 const io = require('socket.io-client')
 const port = process.env.PORT || 5000;
 const socket = io('http://localhost:' + port);
 socket.on('connect', () => {
  console.log(`connect ${socket.id}`);
 });
 socket.on('disconnect', () => {
  console.log(`disconnect ${socket.id}`);
 });
 socket.on('hello', (a, b, c) => {
  console.log(a, b, c);
 });
--- a/examples/client/javascript/latency_client.js
+++ b/examples/client/javascript/latency_client.js
@ -0,0 +1,24 @@
 const io = require('socket.io-client')
 const port = process.env.PORT || 5000;
 const socket = io('http://localhost:' + port);
 let last;
 function send () {
  last = new Date();
  socket.emit('ping_from_client');
 }
 socket.on('connect', () => {
  console.log(`connect ${socket.id}`);
  send();
 });
 socket.on('disconnect', () => {
  console.log(`disconnect ${socket.id}`);
 });
 socket.on('pong_from_server', () => {
  const latency = new Date() - last;
  console.log('latency is ' + latency + ' ms');
  setTimeout(send, 1000);
 });
--- a/examples/client/javascript/package-lock.json
+++ b/examples/client/javascript/package-lock.json
--- a/examples/client/javascript/package.json
+++ b/examples/client/javascript/package.json
@ -0,0 +1,10 @@
 {
  "name": "socketio-examples",
  "version": "0.1.0",
  "dependencies": {
    "express": "^4.17.1",
    "smoothie": "1.19.0",
    "socket.io": "^3.0.0",
    "socket.io-client": "^3.0.0"
  }
 }
--- a/examples/client/threads/latency_client.py
+++ b/examples/client/threads/latency_client.py
@ -1,7 +1,7 @@
 import time
 import socketio
-sio = socketio.Client(engineio_logger=True)
+sio = socketio.Client(logger=True, engineio_logger=True)
 start_timer = None
@ -23,7 +23,8 @@ def pong_from_server():
    latency = time.time() - start_timer
    print('latency is {0:.2f} ms'.format(latency * 1000))
    sio.sleep(1)
-    send_ping()
+    if sio.connected:
        send_ping()
 if __name__ == '__main__':
--- a/examples/server/README.rst
+++ b/examples/server/README.rst
@ -28,3 +28,8 @@ tornado
 -------
 Examples that are compatible with the tornado framework.
 javascript
 ----------
 Examples that use the JavaScript version of Socket.IO for compatiblity testing.
--- a/examples/server/javascript/README.md
+++ b/examples/server/javascript/README.md
@ -0,0 +1,11 @@
 # Socket.IO JavaScript Examples
 ```
 $ npm install
 $ node fiddle  # to run the fiddle server example
 $ node latency # to run the latency server example
 ```
 And point your browser to `http://localhost:5000`. Optionally, specify
 a port by supplying the `PORT` env variable.
--- a/examples/server/javascript/fiddle.js
+++ b/examples/server/javascript/fiddle.js
@ -0,0 +1,21 @@
 const express = require('express');
 const app = express();
 const server = require('http').createServer(app);
 const io = require('socket.io')(server);
 const port = process.env.PORT || 5000;
 app.use(express.static(__dirname + '/fiddle_public'));
 io.on('connection', socket => {
  console.log(`connect ${socket.id}`);
  socket.emit('hello', 1, '2', {
    hello: 'you'
  });
  socket.on('disconnect', () => {
    console.log(`disconnect ${socket.id}`);
  });
 });
 server.listen(port, () => console.log(`server listening on port ${port}`));
--- a/examples/server/javascript/fiddle_public/index.html
+++ b/examples/server/javascript/fiddle_public/index.html
@ -0,0 +1,11 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Socket.IO Fiddle</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
    <script src="/main.js"></script>
  </body>
 </html>
--- a/examples/server/javascript/fiddle_public/main.js
+++ b/examples/server/javascript/fiddle_public/main.js
@ -0,0 +1,19 @@
 'use strict';
 (function() {
  const socket = io();
  socket.on('connect', () => {
    console.log(`connect ${socket.id}`);
  });
  socket.on('disconnect', () => {
    console.log(`disconnect ${socket.id}`);
  });
  socket.on('hello', (a, b, c) => {
    console.log(a, b, c);
  });
 })();
--- a/examples/server/javascript/latency.js
+++ b/examples/server/javascript/latency.js
@ -0,0 +1,21 @@
 const express = require('express');
 const app = express();
 const server = require('http').createServer(app);
 const io = require('socket.io')(server);
 const port = process.env.PORT || 5000;
 app.use(express.static(__dirname + '/latency_public'));
 io.on('connection', socket => {
  console.log(`connect ${socket.id}`);
  socket.on('ping_from_client', () => {
    socket.emit('pong_from_server');
  });
  socket.on('disconnect', () => {
    console.log(`disconnect ${socket.id}`);
  });
 });
 server.listen(port, () => console.log(`server listening on port ${port}`));
--- a/examples/server/javascript/latency_public/index.html
+++ b/examples/server/javascript/latency_public/index.html
@ -0,0 +1,16 @@
 <!doctype html>
 <html>
  <head>
    <title>Socket.IO Latency</title>
    <link rel="stylesheet" href="/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="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.2.0/smoothie.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
    <script src="/index.js"></script>
  </body>
 </html>
--- a/examples/server/javascript/latency_public/index.js
+++ b/examples/server/javascript/latency_public/index.js
@ -0,0 +1,48 @@
 // helper
 function $ (id) { return document.getElementById(id); }
 // chart
 let smoothie;
 let 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
  });
 }
 // socket
 const socket = io();
 let last;
 function send () {
  last = new Date();
  socket.emit('ping_from_client');
  $('transport').innerHTML = socket.io.engine.transport.name;
 }
 socket.on('connect', () => {
  if ($('chart').getContext) {
    render();
    window.onresize = render;
  }
  send();
 });
 socket.on('disconnect', () => {
  if (smoothie) smoothie.stop();
  $('transport').innerHTML = '(disconnected)';
 });
 socket.on('pong_from_server', () => {
  const latency = new Date() - last;
  $('latency').innerHTML = latency + 'ms';
  if (time) time.append(+new Date(), latency);
  setTimeout(send, 100);
 });
--- a/examples/server/javascript/latency_public/style.css
+++ b/examples/server/javascript/latency_public/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; }
--- a/examples/server/javascript/package-lock.json
+++ b/examples/server/javascript/package-lock.json
--- a/examples/server/javascript/package.json
+++ b/examples/server/javascript/package.json
@ -0,0 +1,10 @@
 {
  "name": "socketio-examples",
  "version": "0.1.0",
  "dependencies": {
    "socket.io": "^3.0.0",
    "socket.io-client": "^3.0.0",
    "express": "^4.17.1",
    "smoothie": "1.19.0"
  }
 }