Echtzeit-Maus-Tracking über die externe js

Question

Ich habe ein einfaches Beispiel für Echtzeit-Mausbewegung mit node.js und socket.io.

Wenn ich will es auf jeder HTML-Seite schließen ich node.js Server verbinden habe:

<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.. 

Ich mag würde, andere Menschen bieten os ihre Websites verfolgen. Die meisten Anwendungen erfordern Code wie folgt (async natürlich - nicht diese einfache Art und Weise) einzufügen:

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

Das ist der Weg, möchte ich es entweder behandeln. Soll ich einfach den Inhalt von socket.io.js + my code in connect.js kopieren und einfügen?

Ist es ein guter Ansatz oder was ist der bessere Weg, um eine zufällige Website mit meinem node.js Server zu verbinden?

Answer 1

Was Sie suchen, ist ein Skript, mit dem Web-Clients eine Verbindung zu Ihrem Web-Socket-Server herstellen können.

Sie eine Datei erstellen, die:

• laden einige Bibliotheken wie jQuery und/oder socket.io

Dann führen Sie Ihre Anwendungslogik (andere Websites nicht diejenigen geladen haben kann)

Sie müssen daher Bibliotheken vor Ihrer Anwendungslogik laden.

So:

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

und dann Websites geben Besitzer dieses Einbettungscode:

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

---

Einige Überlegungen:

• Verteilen Sie Ihr Skript in einem CDN

• Wenn Ihre Anwendungslogik eine große Anzahl von Dateien enthält, benötigen Sie möglicherweise einen Modullader zum Anfordern Ihrer Skripts. z.B. requirejs.

• Ich empfehle Ihnen, keine Socket-Nachrichten auf Mousemove emittieren! Es wird ein Overkill für Ihren Server sein. Sie sollten Ihre Mausverfolgungslogik mit etwas weniger kostspieligem ändern, zum Beispiel indem Sie Ihre Ausgabe mit a throttle or a debouncer umhüllen oder einfach Mausklicks verfolgen.