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

Question

我有一个 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 位于同一个地方，你会看到正在绘制的线条。

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

谢谢！

Answer 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});
});

干杯！

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

Use websockets (Socket.io) to mirror jquery events over multiple pages of a node web app

jquery

dom

node.js

express

socket.io