javascript - nodejs:使用socket.io更新html5 Canvas 白板

我正在尝试创建一个交互式白板应用程序。我希望它做的是，在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&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>

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&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>

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;

最佳答案

这里是简单的样品
应用程序js。
子pp
发件人。
子pp
html接收器。
子pp

关于javascript - nodejs:使用socket.io更新html5 Canvas 白板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30341647/

Receiver

javascript - nodejs:使用socket.io更新html5 Canvas 白板