Simple Multiuser WebSocket Whiteboard
Apr. 24th, 2012 07:56 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
codedotAssuming Node.js installed, one can run a broadcasting WebSocket server like this:
Then, we can implement a primitive multiuser whiteboard in HTML5 as follows:
alexo@uniweb:~/chat$ npm install websocket-server
npm http GET https://registry.npmjs.org/websocket-server
npm http 304 https://registry.npmjs.org/websocket-server
websocket-server@1.4.04 ./node_modules/websocket-server
alexo@uniweb:~/chat$ cat >server.js
var server = require("websocket-server").createServer();
server.addListener("connection", function(connection) {
connection.addListener("message", function(msg) {
server.broadcast(msg);
});
});
server.listen(8080);
alexo@uniweb:~/chat$ node server.jsThen, we can implement a primitive multiuser whiteboard in HTML5 as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>WebSocket Whiteboard</title>
<style id="style" type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
<script id="control">
var c2d;
function init()
{
var uri = "ws://localhost:8080/";
var socket = new WebSocket(uri);
socket.onmessage = function(event) {
var coord = event.data.split(":");
var src = coord[0].split(",");
var dst = coord[1].split(",");
c2d.moveTo(src[0], src[1]);
c2d.lineTo(dst[0], dst[1]);
c2d.stroke();
};
socket.onopen = function() {
var width = c2d.canvas.width;
var height = c2d.canvas.height;
c2d.fillStyle = "#ddffdd";
c2d.fillRect(0, 0, width, height);
};
socket.onclose = function() {
var width = c2d.canvas.width;
var height = c2d.canvas.height;
c2d.fillStyle = "#ffdddd";
c2d.fillRect(0, 0, width, height);
};
canvas = document.getElementById("canvas");
canvas.onmousedown = function(event) {
c2d.oldx = event.clientX;
c2d.oldy = event.clientY;
c2d.canvas.onmousemove = function(event) {
var x = event.clientX;
var y = event.clientY;
var src = c2d.oldx + "," + c2d.oldy;
var dst = x + "," + y;
c2d.socket.send(src + ":" + dst);
c2d.oldx = x;
c2d.oldy = y;
};
};
canvas.onmouseup = function() {
c2d.canvas.onmousemove = null;
};
c2d = canvas.getContext("2d");
c2d.fillStyle = "#ffdddd";
c2d.socket = socket;
c2d.canvas = canvas;
window.onresize = function() {
c2d.canvas.width = this.innerWidth;
c2d.canvas.height = this.innerHeight;
};
window.onresize();
}
window.onload = init;
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
