通过外部 js 进行实时鼠标跟踪

Question

我有一个使用 node.js 和 socket.io 实时鼠标移动的简单示例。

当我想将它包含在任何 html 站点上时，我必须连接到 node.js 服务器：

<script src="/socket.io/socket.io.js"></script>

var socket = io.connect('http://localhost:3000');

$(document).mousemove(function(e) {
  socket.emit('movement', {
    'id': socket.id,
    ..
  });
});

// more code later..

我想提供其他人跟踪他们的网站。大多数应用程序都需要插入这样的代码（当然是异步的 - 不是这种简单的方法）：

<script src="http://localhost:3000/connect.js"></script>

这也是我想处理的方式。我是否应该将 socket.io.js + 我的代码的内容复制并粘贴到 connect.js 中？

将随机网站连接到我的 node.js 服务器是一个好方法还是更好的方法？

Answer 1

您正在寻找的是允许 Web 客户端连接到您的 Web 套接字服务器的脚本。

您可以创建一个文件：

加载一些库，例如 jQuery and/or socket.io（其他网站可能没有加载这些库）
然后执行你的应用程序逻辑

因此您需要在应用程序逻辑之前加载库。

像这样：

// embedded-script.js

// You can use this simple function to load the libraries you need
function loadScripts(scripts, complete) {
    var loadScript = function( src ) {
        var xmlhttp, next;
        if (window.XMLHttpRequest)  {
            xmlhttp = new XMLHttpRequest();
        } else {
            try {
                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return;
            }
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                eval(xmlhttp.responseText);
                next = scripts.shift();
                if ( next ) {
                    loadScript(next);
                } else if ( typeof complete == 'function' ) {
                    complete();
                }
            }
        }
        xmlhttp.open("GET", src , true);
        xmlhttp.send();
    };
    loadScript( scripts.shift() );
}

// load the libraries you need
loadScripts([
  "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js", // assuming you need jQuery
  "https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"
], function() {
   // libraries loaded.
   // your application logic here
});

然后给网站所有者这个嵌入代码：

<script src="http://your-domain.com/embedded-script.js"></script>

一些注意事项：

在 CDN 中分发您的脚本
如果您的应用程序逻辑涉及大量文件，您可能需要一个模块加载器来加载您的脚本。例如。 requirejs.
我建议您不要在 mousemove 上发出套接字消息！这对您的服务器来说太过分了。你应该用更便宜的东西改变你的鼠标跟踪逻辑，例如用 a throttle or a debouncer 包装你的发射或只跟踪鼠标点击。

通过外部 js 进行实时鼠标跟踪

real time mouse tracking via the external js

javascript

sockets

real-time

node.js

socket.io