Miguel Grinberg
4 years ago
20 changed files with 3598 additions and 3 deletions
@ -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. |
|||
@ -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); |
|||
}); |
|||
@ -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); |
|||
}); |
|||
File diff suppressed because it is too large
@ -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" |
|||
} |
|||
} |
|||
@ -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. |
|||
@ -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}`)); |
|||
@ -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> |
|||
@ -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); |
|||
}); |
|||
|
|||
})(); |
|||
@ -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}`)); |
|||
@ -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> |
|||
@ -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); |
|||
}); |
|||
@ -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; } |
|||
File diff suppressed because it is too large
@ -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" |
|||
} |
|||
} |
|||
Loading…
Reference in new issue