javascript - 使用 TogetherJS 扩展性将更改同步到 Div

Question

我的目标是围绕 TogetherJS 添加一些代码，以实现对 contenteditable div 所做更改的同步(TogetherJS 用户之间)。

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

TogetherJS 开发人员提供了如何在 Canvas 上绘图的示例:

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

我们将在 Canvas 上使用 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 有一个“中心”，可以在 session 中的每个人之间回显消息。它不会解释消息，每个人的消息都会来回传播，包括来自可能在另一个页面上的人的消息。 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 消息，这是每个客户端首次到达新页面时发送的消息。当我们看到该消息时，我们将向其他人发送我们 Canvas 的图像:

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

这对我来说效果出奇地好 - 出色的性能(尽管这是针对 Intranet 站点)。

对于初学者(像我一样)将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)
});