отслеживание мыши в реальном времени через внешние js

У меня есть простой пример перемещения мыши в реальном времени с помощью 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>

Так я и хотел бы справиться с этим. Должен ли я просто скопировать и вставить содержимое сокета.io.js + мой код в connect.js?

Это хороший подход или лучший способ подключения случайного веб-сайта к моему серверу node.js?

javascript,node.js,sockets,socket.io,real-time,

0

Ответов: 1

0 принят
+50

То, что вы ищете, - это сценарий, позволяющий веб-клиентам подключаться к вашему серверу веб-сокетов.

Вы можете создать один файл, который:

  • Загрузите некоторые библиотеки, такие как jQuery и / или 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! Это будет излишним для вашего сервера. Вы должны поменять логику отслеживания мыши на что-то менее дорогое, например, путем обертывания вашего испускания дросселем или дебонтером или просто щелчками мыши.

JavaScript, Node.js, розетки, socket.io, в режиме реального времени,
Похожие вопросы
Яндекс.Метрика