Skip to content

Commit 8eaba08

Browse files
darrachequesnedarrachequesne
authored
[docs] Implement whiteboard example (#2810)
1 parent 2258a6a commit 8eaba08

File tree

6 files changed

+219
-0
lines changed

6 files changed

+219
-0
lines changed

‎examples/whiteboard/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
# Socket.IO Collaborative Whiteboard
3+
4+
A simple collaborative whiteboard for socket.io
5+
6+
## How to use
7+
8+
```
9+
$ npm i && npm start
10+
```
11+
12+
And point your browser to `http://localhost:3000`. Optionally, specify
13+
a port by supplying the `PORT` env variable.
14+
15+
## Features
16+
17+
- draw on the whiteboard and all other users will see you drawings live

‎examples/whiteboard/index.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
const express = require('express');
3+
const app = express();
4+
const http = require('http').Server(app);
5+
const io = require('socket.io')(http);
6+
const port = process.env.PORT || 3000;
7+
8+
app.use(express.static(__dirname + '/public'));
9+
10+
function onConnection(socket){
11+
socket.on('drawing', (data) => socket.broadcast.emit('drawing', data));
12+
}
13+
14+
io.on('connection', onConnection);
15+
16+
http.listen(port, () => console.log('listening on port ' + port));

‎examples/whiteboard/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "whiteboard",
3+
"version": "1.0.0",
4+
"description": "A simple collaborative whiteboard using socket.io",
5+
"main": "index.js",
6+
"keywords": [
7+
"socket.io",
8+
"whiteboard"
9+
],
10+
"dependencies": {
11+
"express": "4.9.x",
12+
"socket.io": "latest"
13+
},
14+
"scripts": {
15+
"start": "node index"
16+
},
17+
"author": "Damien Arrachequesne",
18+
"license": "MIT"
19+
}

‎examples/whiteboard/public/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Socket.IO whiteboard</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<canvas class="whiteboard" ></canvas>
11+
12+
<div class="colors">
13+
<div class="color black"></div>
14+
<div class="color red"></div>
15+
<div class="color green"></div>
16+
<div class="color blue"></div>
17+
<div class="color yellow"></div>
18+
</div>
19+
20+
<script src="/socket.io/socket.io.js"></script>
21+
<script src="/main.js"></script>
22+
</body>
23+
</html>

‎examples/whiteboard/public/main.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
'use strict';
2+
3+
(function() {
4+
5+
var socket = io();
6+
var canvas = document.getElementsByClassName('whiteboard')[0];
7+
var colors = document.getElementsByClassName('color');
8+
var context = canvas.getContext('2d');
9+
10+
var current = {
11+
color: 'black'
12+
};
13+
var drawing = false;
14+
15+
canvas.addEventListener('mousedown', onMouseDown, false);
16+
canvas.addEventListener('mouseup', onMouseUp, false);
17+
canvas.addEventListener('mouseout', onMouseUp, false);
18+
canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);
19+
20+
for (var i = 0; i < colors.length; i++){
21+
colors[i].addEventListener('click', onColorUpdate, false);
22+
}
23+
24+
socket.on('drawing', onDrawingEvent);
25+
26+
window.addEventListener('resize', onResize, false);
27+
onResize();
28+
29+
30+
function drawLine(x0, y0, x1, y1, color, emit){
31+
context.beginPath();
32+
context.moveTo(x0, y0);
33+
context.lineTo(x1, y1);
34+
context.strokeStyle = color;
35+
context.lineWidth = 2;
36+
context.stroke();
37+
context.closePath();
38+
39+
if (!emit) { return; }
40+
var w = canvas.width;
41+
var h = canvas.height;
42+
43+
socket.emit('drawing', {
44+
x0: x0 / w,
45+
y0: y0 / h,
46+
x1: x1 / w,
47+
y1: y1 / h,
48+
color: color
49+
});
50+
}
51+
52+
function onMouseDown(e){
53+
drawing = true;
54+
current.x = e.clientX;
55+
current.y = e.clientY;
56+
}
57+
58+
function onMouseUp(e){
59+
if (!drawing) { return; }
60+
drawing = false;
61+
drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
62+
}
63+
64+
function onMouseMove(e){
65+
if (!drawing) { return; }
66+
drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
67+
current.x = e.clientX;
68+
current.y = e.clientY;
69+
}
70+
71+
function onColorUpdate(e){
72+
current.color = e.target.className.split(' ')[1];
73+
}
74+
75+
// limit the number of events per second
76+
function throttle(callback, delay) {
77+
var previousCall = new Date().getTime();
78+
return function() {
79+
var time = new Date().getTime();
80+
81+
if ((time - previousCall) >= delay) {
82+
previousCall = time;
83+
callback.apply(null, arguments);
84+
}
85+
};
86+
}
87+
88+
function onDrawingEvent(data){
89+
var w = canvas.width;
90+
var h = canvas.height;
91+
drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
92+
}
93+
94+
// make the canvas fill its parent
95+
function onResize() {
96+
canvas.width = window.innerWidth;
97+
canvas.height = window.innerHeight;
98+
}
99+
100+
})();

‎examples/whiteboard/public/style.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
/**
3+
* Fix user-agent
4+
*/
5+
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
html, body {
11+
height: 100%;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
/**
17+
* Canvas
18+
*/
19+
20+
.whiteboard {
21+
height: 100%;
22+
width: 100%;
23+
position: absolute;
24+
left: 0;
25+
right: 0;
26+
bottom: 0;
27+
top: 0;
28+
}
29+
30+
.colors {
31+
position: fixed;
32+
}
33+
34+
.color {
35+
display: inline-block;
36+
height: 48px;
37+
width: 48px;
38+
}
39+
40+
.color.black { background-color: black; }
41+
.color.red { background-color: red; }
42+
.color.green { background-color: green; }
43+
.color.blue { background-color: blue; }
44+
.color.yellow { background-color: yellow; }

0 commit comments

Comments
 (0)