Question

我的目标是在TogetherJS周围添加一些代码，以便（在TogetherJS用户之间）实现对可信任div的更改。

我的问题是如何为div做这个 - 这似乎是一个更容易实现的功能，但我现在无法解决它。

TogetherJS开发人员提供了一个如何在画布上绘图的示例：

<canvas id="sketch" 
    style="height: 400px; width: 400px; border: 1px solid #000">
</canvas>

// get the canvas element and its context
var canvas = document.querySelector('#sketch');
var context = canvas.getContext('2d');

// brush settings
context.lineWidth = 2;
context.lineJoin = 'round';
context.lineCap = 'round';
context.strokeStyle = '#000';

我们将在画布上使用mousedown和mouseup事件来注册mousemove事件的move（）处理程序：

var lastMouse = {
  x: 0,
  y: 0
};

// attach the mousedown, mousemove, mouseup event listeners.
canvas.addEventListener('mousedown', function (e) {
lastMouse = {
    x: e.pageX - this.offsetLeft,
    y: e.pageY - this.offsetTop
};
canvas.addEventListener('mousemove', move, false);
}, false);

canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', move, false);
}, false);

然后move（）函数将找出需要绘制的行：

function move(e) {
var mouse = {
    x: e.pageX - this.offsetLeft,
    y: e.pageY - this.offsetTop
};
draw(lastMouse, mouse);
lastMouse = mouse;
}

最后是绘制线条的函数：

function draw(start, end) {
context.beginPath();
context.moveTo(start.x, start.y);
context.lineTo(end.x, end.y);
context.closePath();
context.stroke();
}

这是足够的代码，可以为我们提供一个非常简单的绘图应用程序。 TogetherJS有一个“中心”，可以在会话中的每个人之间回应消息。它不解释消息，并且每个人的消息来回传播，包括来自可能在另一页面上的人的消息。 TogetherJS还允许应用程序发送自己的消息，如：

TogetherJS.send({
  type: "message-type", 
  ...any other attributes you want to send...
})

发送消息（每条消息必须有一个类型），然后收听：

TogetherJS.hub.on("message-type", function (msg) {
  if (! msg.sameUrl) {
      // Usually you'll test for this to discard messages that came
      // from a user at a different page
      return;
  }
});

消息类型是命名空间，因此您的应用程序消息不会意外地与TogetherJS自己的消息重叠。

要同步绘图，我们要监视正在绘制的任何行，并将其发送给其他同行：

function move(e) {
    var mouse = {
        x: e.pageX - this.offsetLeft,
        y: e.pageY - this.offsetTop
    };
    draw(lastMouse, mouse);
    if (TogetherJS.running) {
        TogetherJS.send({type: "draw", start: lastMouse end: mouse});
    }
    lastMouse = mouse;
}

在发送之前，我们检查TogetherJS是否正在运行（TogetherJS.running）。我们发送的信息应该是不言自明的。

接下来我们要听取消息：

TogetherJS.hub.on("draw", function (msg) {
    if (! msg.sameUrl) {
        return;
    }
    draw(msg.start, msg.end);
});

当我们注册这个监听器时，我们不必担心TogetherJS是否正在运行，它只能在TogetherJS运行时调用。

这足以使我们的绘画生动和协作。但是我们缺少一件事：如果我开始画一幅图像，你加入我，你只会看到我绘制的新线条，你将看不到我已经画过的图像。

为了处理这个问题，我们将监听togetherjs.hello消息，这是每个客户端首次到达新页面时发送的消息。当我们看到该消息时，我们会向另一个人发送我们画布的图像：

TogetherJS.hub.on("togetherjs.hello", function (msg) {
    if (! msg.sameUrl) {
        return;
    }
    var image = canvas.toDataURL("image/png");
    TogetherJS.send({
        type: "init",
        image: image
    });
});

现在我们只需要监听这条新的初始消息：

TogetherJS.hub.on("init", function (msg) {
    if (! msg.sameUrl) {
        return;
    }
    var image = new Image();
    image.src = msg.image;
    context.drawImage(image, 0, 0);
});

Answer 1

这对我来说效果非常好 - 性能非常出色（虽然这是针对内部网站点的。）

对于将TogetherJS扩展到您自己的应用程序的初学者（比如我），“类型”可以设置为任何内容。它有助于区分此特定消息/操作对的功能与其他功能。它是必需的，因为它基本上是消息的标题。对于“输出”，您还可以命名任何（或具有多个）。这将存储要与消息一起发送的数据。

代码的第一部分发送消息。

第二部分代码在同一共享URL上侦听来自其他TogetherJS用户的消息。 “发送”和“监听”事件/函数之间的命名约定必须匹配（例如，文本发送）

这是我的解决方案：

$('#SourceText').keyup(function (event) {
    // grab text for sending as a message to collaborate
    var sharedtext = $('#SourceText').html()
    //alert(sharedtext)
    if (TogetherJS.running) {
        TogetherJS.send({
            type: "text-send",
            output: sharedtext
        });
        console.log(sharedtext)
    }
});

TogetherJS.hub.on("text-send", function (msg) {
    if (! msg.sameUrl) {
        return;
    }
    $('#SourceText').html(msg.output);
    console.log(msg.output)
});

使用TogetherJS可扩展性来同步Div的更改

1 个答案: