个人中心
gpt4 book ai didi

javascript - Node : Update html5 canvas whiteboard using socket. io

转载 作者：行者123 更新时间：2023-11-28 01:30:47 25 4
gpt4 key购买 nike

我正在尝试创建一个交互式白板应用程序。我想让它做的是，无论在 sender.html 上绘制什么，都应该在 receiver.html 上更新，但它不起作用。这是代码-

sender.html and 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 and 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;

最佳答案

这里是简单的例子

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>

关于javascript - Node : Update html5 canvas whiteboard using socket. io，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30341647/

25 4 0
文章推荐： javascript - 单击按钮时触发的事件也会触发另一个事件
文章推荐： javascript - 识别粘贴文本并键入文本
文章推荐： javascript - 将明文标签还原为 html
文章推荐： javascript - 我们可以为单页应用程序提供两个入口点吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com