The JS Client Library provides an interface to all of OctoPrint’s API, including the SockJS based socket to send
push messages from the server to connected clients. It is available as packed web
asset file at /static/webassets/packed_client.js or as individual
component files at /static/js/app/client/<component>.js relative to your
OctoPrint instance’s base URL (e.g. http://octopi.local/static/webassets/packed_client.js).

If you are using it from a web page hosted on OctoPrint as a Jinja2 template, you should use one of the following
methods to embed it instead of manually entering the URL, in order to have OctoPrint take care of setting the
correct URL prefix:

<!-- full client library or all individual files, depending on the server mode - should be the preferred variant-->{%assets"js_client"%}<scripttype="text/javascript"src="{{ASSET_URL}}"></script>{%endassets%}<!-- full client library--><scripttype="text/javascript"src="{{url_for("static",filename="webassets/packed_client.js")}}"></script><!-- individual components (do not forget base!)--><scripttype="text/javascript"src="{{url_for("static",filename="js/app/client/<component>.js")}}"></script>

Regardless of which way you use to include the library, you’ll also need to make sure you included JQuery and lodash,
because the library depends on those to be available (as $ and _). You can embed those like this:

Note that all components depend on the base component to be present, so if you are only including a select
number of components, make sure to at the very least include that one to be able to utilize the client.

When you import the client library as described above, a global variable OctoPrint will become available, which is
a prepared instance of the OctoPrintClient class the library assembles from registered components. You can directly
used that singular OctoPrint instance if you only need to talk to one OctoPrint server:

OctoPrint.options.baseurl="http://example.com/octoprint/"OctoPrint.options.apikey="apikey";OctoPrint.files.list().done(function(response){// do something with the response});

If you want to access multiple servers, you should however instead instantiate your own clients. You can provide the
connection options (baseurl and apikey) directly in the constructor or set them later:

varclient1=newOctoPrintClient({baseurl:"http://example.com/octoprint1/",apikey:"apikey1"});varclient2=newOctoPrintClient();client2.options.baseurl="http://example.com/octoprint2/";client2.options.apikey="apikey2";client1.files.list().done(function(response){// do something with the response for server 1});client2.files.list().done(function(response){// do something with the response for server 2});