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

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

我的问题是如何为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);
});

最佳答案

这对我来说出奇地好-出色的性能（尽管这是针对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)
});

关于javascript - 使用TogetherJS扩展性将更改同步到Div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24216400/