Question

我正在尝试创建一个交互式白板应用。我想要它做的是，在sender.html上绘制的任何内容都应该在receiver.html上更新，但它不起作用。这是代码 -

sender.html和iwb-sender.js

＆＃13;

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);
}

＆＃13;

<!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&amp;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>

＆＃13;

receiver.html和iwb-receiver.js

＆＃13;

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();
}

＆＃13;

<!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&amp;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>

＆＃13;

IWB-socket.js

＆＃13;

// 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;

＆＃13;

Answer 1

这里简单的样本

<强> 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(e.x, e.y);
            ctx.stroke();
        }
    });
</script>
</body>
</html>

nodejs：使用socket.io更新html5 canvas白板

1 个答案: