nodejs：使用socket.io更新html5canvas白板
我正在尝试创build交互式白板应用程序。 我想要做的是，无论是在sender.html上绘制应更新receiver.html，但它是行不通的。 这是代码 –
sender.html和iwb-sender.js
var socket; function startSocket() { socket = io.connect(); } function sendData(coordx, coordy, actualColor) { var data = { x: coordx, y: coordy, color: actualColor }; socket.emit("iwb-message", data); } <!DOCTYPE html> <html> <head> <title>A web whiteboard</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><meta charset="utf-8"> <script src="https://cdn.socket.io/socket.io-1.3.2.js"></script> <script src="wb/wb-client.js" type="text/javascript"></script> <script src="iwb/iwb-sender.js" type="text/javascript"></script> <script src="/libs/jscolor/jscolor.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="a.css"> <style type="text/css"> #pizarra { position: relative; } </style> <link rel="icon" type="image/png" href="/static/favicon.ico"> <link rel="apple-touch-icon" href="/static/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="/static/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114,114" href="/static/apple-touch-icon-114x114.png"> <link rel="stylesheet" href="/styles.css" /> <link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,900&subset=latin,latin-ext" rel="stylesheet" type="text/css"> </head> <body> <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;" onclick="removeModal()" class="aww"> <div id="message"></div> <canvas id="wbCanvas"></canvas> </div> <script src="/main.js"></script> <script src="/api.js"></script> <script src="/draw.js"></script> </body></html>
receiver.html和iwb-receiver.js
var socket, ctx; window.onload = function() {; socket = io.connect(); ctx = document.getElementById("wbCanvas").getContext("2d"); socket.on("get-iwb-message", updateWhiteboard); } function updateWhiteboard(data) { ctx.strokeStyle = data.color; ctx.lineTo(data.x, data.y); ctx.stroke(); }
<!DOCTYPE html> <html> <head> <title>A web whiteboard</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="a.css"> <style type="text/css"> #pizarra { position: relative; } </style> <script src="https://cdn.socket.io/socket.io-1.3.2.js"></script> <script src="iwb/iwb-receiver.js" type="text/javascript"></script> <link rel="icon" type="image/png" href="/static/favicon.ico"> <link rel="apple-touch-icon" href="/static/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="/static/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114,114" href="/static/apple-touch-icon-114x114.png"> <link rel="stylesheet" href="/styles.css" /> <link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,900&subset=latin,latin-ext" rel="stylesheet" type="text/css"> </head> <body> <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;" onclick="removeModal()" class="aww"> <canvas id="wbCanvas"></canvas> </div> <script src="/main.js"></script> <script src="/api.js"></script> <script src="/draw.js"></script> </body></html>
IWB-socket.js
// socket events for interactive whiteboard function bind(socket) { socket.on('iwb-message', function (data) { //console.log("the color was: " + data.color); //socket.emit('get-iwb-message', { x: data.x, y: data.y, color: data.color } ); socket.broadcast.emit('get-iwb-message', { x: data.x, y: data.y, color: data.color } ); }); } exports.bind = bind;
这里简单的样品
app.js
var express = require('express'), http = require('http'), app = express(), srv = http.createServer(app); app.use(express.static(__dirname + '/html')); var io = require('socket.io')(srv, { log: false }); io.on('connection', function(socket) { socket.on('draw',function(data){ socket.broadcast.emit('draw',data); }); }) srv.listen(3333);
sender.html
<!DOCTYPE html> <html> <head> <script src="https://cdn.socket.io/socket.io-1.3.2.js"></script> </head> <body> <canvas id="board"></canvas> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function(event) { var socket = io.connect(); canvas = document.getElementById('board'); ctx = canvas.getContext("2d"); w = canvas.width; h = canvas.height; var drawing = false; canvas.addEventListener("mousemove", function (e) { if (drawing) draw(e) }, false); canvas.addEventListener("mousedown", function (e) {drawing = true;}, false); canvas.addEventListener("mouseup", function (e) {drawing = false;}, false); canvas.addEventListener("mouseout", function (e) {drawing = false;}, false); function draw(e) { cX = e.clientX - canvas.offsetLeft; cY = e.clientY - canvas.offsetTop; ctx.strokeStyle = '#333333'; ctx.lineTo(cX, cY); ctx.stroke(); socket.emit('draw',{x:cX,y:cY}); } }); </script> </body> </html>
receiver.html
<!DOCTYPE html> <html> <head><script src="https://cdn.socket.io/socket.io-1.3.2.js"></script></head> <body> <canvas id="board"></canvas> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function(event) { var socket = io.connect(); socket.on('draw',function(data){ draw(data); }); canvas = document.getElementById('board'); ctx = canvas.getContext("2d"); function draw(e) { ctx.strokeStyle = '#333333'; ctx.lineTo(ex, ey); ctx.stroke(); } }); </script> </body> </html>