使用 websockets (Socket.io) 在节点 web 应用程序的多个页面上镜像 jquery 事件答案

【问题标题】：Use websockets (Socket.io) to mirror jquery events over multiple pages of a node web app使用 websockets (Socket.io) 在节点 web 应用程序的多个页面上镜像 jquery 事件
【发布时间】：2015-03-11 17:10:28
【问题描述】：

我有一个 node.js express socket.io 应用程序，它将在 testurl.com/grab_input 上显示一个输入框。

在该页面上，有一个 keyup 事件将框的内容发送到服务器，并将输出发送到 testurl.com/show_result 上的输入框

因此，如果我在一台显示器上打开 testurl.com/grab_input 并在另一台显示器上打开 testurl.com/show_result 并输入第一个显示器，我会看到在另一个显示器上实时填写的字母。

我需要创建一个类似的应用程序，在一个页面上获取输入并将其显示在另一个页面上，但用于使用http://intridea.github.io/sketch.js/ 绘制线条

所以在第一页上你会有一个 div 并且你会在其中绘图，然后在另一个页面上你会有一个相同大小的 div 放置在同一个位置并且你会看到线条被绘制。

有人可以就解决此问题的最佳方法提供任何建议吗？只是谷歌的东西或继续的东西，老实说，我什至不知道从哪里开始？是否有某种事情可以让您将事件设置为在一个页面上触发以在另一个页面上的 DOM 元素上发生？谢谢！

谢谢！

【问题讨论】：

您的一个想法是使用WebRTC。它使用 P2P 连接，似乎符合您的要求。有一些示例使用画布在绘图时显示来自其他客户端的数据。
我会调查一下，非常感谢！

标签： jquery node.js dom express socket.io

【解决方案1】：

您可以按照本教程制作草图应用程序：
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

比创建用于在用户之间创建套接字的 socket.io 脚本：

例如：

服务器端：

io.on('connection', function(socket){
  socket.on('drawing',function(json){
     socket.broadcast.emit('drawing',{ x: json.x, y:json.y });
  });
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

客户端：

io.on('connection', function(socket){
  socket.on('drawing',function(json){
     // HERE WRITE SCRIPT FOR WRITE ON CANVAS
  });
  // HERE IF USER DRAW SOMETHING ON CANVAS (x and y from sketch script)
  socket.emit('drawing',{x:412,y:444});
});

干杯！

【讨论】：

这是一个很好的建议，我很可能会接受这个！谢谢！