.. _sec-jsclientlib: ######################### JavaScript Client Library ######################### 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/.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: .. code-block:: html+jinja {% assets "js_client" %}{% endassets %} 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: .. code-block:: html+jinja Moreover, if you need to use the socket module, you'll need to include sockJS. You can embed it like this: .. code-block:: html+jinja 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 use that singular ``OctoPrint`` instance if you only need to talk to one OctoPrint server: .. code-block:: javascript 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: .. code-block:: javascript var client1 = new OctoPrintClient({baseurl: "http://example.com/octoprint1/", apikey: "apikey1"}); var client2 = new OctoPrintClient(); 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 }); .. seealso:: :ref:`Application Key Plugin ` A bundled plugin that implements an authorization workflow for third party clients. It adds various additional methods to the JS Client Library. .. toctree:: :maxdepth: 3 base.rst browser.rst connection.rst control.rst files.rst job.rst languages.rst logs.rst printer.rst printerprofiles.rst settings.rst slicing.rst socket.rst system.rst timelapse.rst users.rst util.rst wizard.rst