<commit_before>.. _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/<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:

.. code-block:: html+jinja

   <!--
     full client library or all individual files, depending
     on the server mode - should be the preferred variant
   -->
   {% assets "js_client" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}

   <!--
     full client library
   -->
   <script type="text/javascript" src="{{ url_for("static", filename="webassets/packed_client.js") }}"></script>

   <!--
     individual components (do not forget base!)
   -->
   <script type="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:

.. code-block:: html+jinja

   <script src="{{ url_for("static", filename="js/lib/jquery/jquery.min.js") }}"></script>
   <script src="{{ url_for("static", filename="js/lib/lodash.min.js") }}"></script>

Moreover, if you need to use the socket module, you'll need to include sockJS. You can embedded it like this:
<commit_msg>Fix my bad english...<commit_after>.. _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/<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:

.. code-block:: html+jinja

   <!--
     full client library or all individual files, depending
     on the server mode - should be the preferred variant
   -->
   {% assets "js_client" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}

   <!--
     full client library
   -->
   <script type="text/javascript" src="{{ url_for("static", filename="webassets/packed_client.js") }}"></script>

   <!--
     individual components (do not forget base!)
   -->
   <script type="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:

.. code-block:: html+jinja

   <script src="{{ url_for("static", filename="js/lib/jquery/jquery.min.js") }}"></script>
   <script src="{{ url_for("static", filename="js/lib/lodash.min.js") }}"></script>

Moreover, if you need to use the socket module, you'll need to include sockJS. You can embed it like this:

{'fraction_non_alphanumeric': 0.1496546431312356, 'fraction_numerical': 0.0005116398055768739, 'mean_word_length': 4.248322147651007, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '892929', 'n_tokens_mistral': 1094, 'n_tokens_neox': 1058, 'n_words': 447}