WebSocket API
=============

The **XPARO WebSocket API** enables real-time communication between robots, clients, and the XPARO platform.

Unlike REST, WebSocket maintains a persistent connection that allows the server to push updates instantly.

WebSocket endpoint
------------------

```
wss://xparo-website.onrender.com/ws/chatbot/<secret_key>/<project_id>/
```

Connection flow
---------------

1. Client connects to the WebSocket endpoint.
2. Server authenticates using ``secret_key`` and ``project_id``.
3. Server may push configuration updates immediately.
4. Client sends messages; the server responds or pushes asynchronous events.

Message format
--------------

All messages are JSON objects.

Basic structure:

.. code-block:: json

   {
     "type": "message_type",
     "data": {}
   }

Client → Server examples
------------------------

**Chat**

.. code-block:: json

   {
     "type": "chat",
     "data": {
       "message": "Hello robot",
       "robot_id": "robot_123"
     }
   }

Server response:

.. code-block:: json

   {
     "type": "chat_response",
     "data": {
       "response": "Hello, how can I assist you?"
     }
   }

**Telemetry update**

.. code-block:: json

   {
     "type": "telemetry",
     "data": {
       "cpu_usage": 42,
       "memory_usage": 63,
       "disk_usage": 31
     }
   }

Server → Client events
-----------------------

**Chat response**

.. code-block:: json

   {
     "type": "chat_response",
     "data": {
       "response": "Navigation command received"
     }
   }

**Behavior tree update**

.. code-block:: json

   {
     "type": "behavior_update",
     "data": {
       "tree_name": "MainTree",
       "xml": "<BehaviorTree>...</BehaviorTree>"
     }
   }

**Remote control**

.. code-block:: json

   {
     "type": "remote_command",
     "data": {
       "command": "start_navigation",
       "parameters": {
         "goal": "table_4"
       }
     }
   }

**Logging session start**

.. code-block:: json

   {
     "type": "log_updated",
     "data": {
       "session_id": "session_987"
     }
   }

**REST token update**

.. code-block:: json

   {
     "type": "REST_API_TOKEN",
     "data": {
       "token": "abcdef123456"
     }
   }

Heartbeat
---------

Server ping:

.. code-block:: json

   { "type": "ping" }

Client should reply with:

.. code-block:: json

   { "type": "pong" }

Example Python client
---------------------

.. code-block:: python

   import websocket
   import json

   url = "wss://xparo-website.onrender.com/ws/chatbot/SECRET/PROJECT/"

   def on_message(ws, message):
       data = json.loads(message)
       print("Received:", data)

   def on_open(ws):
       payload = {
           "type": "chat",
           "data": {
               "message": "Hello robot"
           }
       }
       ws.send(json.dumps(payload))

   ws = websocket.WebSocketApp(
       url,
       on_message=on_message
   )

   ws.run_forever()



























































.. raw:: html

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3419029396694223" crossorigin="anonymous"></script>
  <ins class="adsbygoogle" style ="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3419029396694223" data-ad-slot="4772957983"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

.. raw:: html

      <style>
      .wy-grid-for-nav {
         overflow-y: scroll;
         position: unset;
         }
      </style>
      <link rel="stylesheet" href="https://firebasestorage.googleapis.com/v0/b/xp-website-9b131.appspot.com/o/assets%2Fstyle.css?alt=media&token=8a62ee77-4eb9-4d42-bed4-4bf4c9d0ac6c">
      



.. raw:: html


      <div class="search-form">
         <div>
            <div class="sticky-menu-container">
               <div class="inner-menu closed">
               <div class="menu-list" style=
               " height: 100%;
                  list-style: none;
                  display: flex;
                  flex-wrap: wrap;
                  align-content: space-between;
                  margin: 0;
                  padding: 0;">
                  <li class="menu-item">
                     <a href="/" class="ripple" style="height: 55px;">
                     <img src="https://firebasestorage.googleapis.com/v0/b/xp-website-9b131.appspot.com/o/myicon.png?alt=media&token=21090ad0-daa3-4b1b-835e-8719c5618ac5" class="img-circle" alt="xparo" style="height: 50px; width: 50px; margin: 5px 65px;">
                     </a>
                  </li>
                  <li>
                     <h5 class="header__title text-center  " style="scale: 0.5; position:relative; left:-15%;  align-items: center;">X<span class="header__title--light">.P.A.R.O</span></h5>
                  </li>
                  <li class="menu-item">
                     <span class="item-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ui-radios-grid" viewBox="0 0 16 16">
                        <path d="M3.5 15a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm9-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM16 3.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zm-9 9a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zm5.5 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm-9-11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                     </svg>
                     </span>
                     <span class="item-text"><a href="/dashboard_app" class="ripple">Dashboard</a></span>
                  </li>
                  <li class="menu-item">
                     <span class="item-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M0 0h1v15h15v1H0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5"/>
                     </svg>
                     </span>
                     <span class="item-text"><a href="\analytics_home" class="ripple">Analytics</a></span>
                  </li>

                  <li class="menu-item">
                     <span class="item-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                        </svg>
                     </span>
                     <span class="item-text"><a href="\all_blogs" class="ripple">Search</a></span>
                  </li>
               </div>
               </div>
               <div class="outer-button">
               <div class="icon-container">
                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve" class="close-icon">
                     <path id="XMLID_732_" d="M70.7,64.3c1.8,1.8,1.8,4.6,0,6.4c-0.9,0.9-2,1.3-3.2,1.3c-1.2,0-2.3-0.4-3.2-1.3L46,52.4L27.7,70.7
               c-0.9,0.9-2,1.3-3.2,1.3s-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4L39.6,46L21.3,27.7c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
               L46,39.6l18.3-18.3c1.8-1.8,4.6-1.8,6.4,0c1.8,1.8,1.8,4.6,0,6.4L52.4,46L70.7,64.3z" />
                  </svg>
                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 92 92" xml:space="preserve" class="arrow-icon">

                     <path id="XMLID_507_" fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
                  </svg>

               </div>
               </div>
            </div>
         </div>


         <nav class="nav-hamburger" id="dashboard_btn_inner_content">
            <div class="lazy-typing-container">
               <div class="lazy-typewriter">
               <p>you are using XPARO BETA* version.</p>
               </div>
            </div>
         </nav>

         </div>

.. raw:: html


   <script>
   var isAnimating = false;
   var isOpen = false;
   var button = document.querySelector(".sticky-menu-container .outer-button");
   var menu = document.querySelector(".sticky-menu-container .inner-menu");
   var closeIcon = document.querySelector(".sticky-menu-container .outer-button .close-icon");
   var arrowIcon = document.querySelector(".sticky-menu-container .outer-button .arrow-icon");
   var menuItems = document.querySelectorAll(".sticky-menu-container .inner-menu > .menu-list > .menu-item");
   var itemTexts = document.querySelectorAll(".sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text");
   button.addEventListener("click", function() {
      if (isAnimating) return;
      this.classList.add("clicked");
      menu.classList.toggle("closed");

      if (isOpen) {
         closeIcon.classList.remove("show");
         closeIcon.classList.add("hide");
         arrowIcon.classList.remove("hide");
         arrowIcon.classList.add("show");
         menuItems.forEach(function(item) {
            item.classList.add("text-hides");
         });
         itemTexts.forEach(function(text, index) {
            setTimeout(function() {
               text.classList.remove("text-in");
            });
         });
         isOpen = false;
      } else {
         closeIcon.classList.remove("hide");
         closeIcon.classList.add("show");
         arrowIcon.classList.remove("show");
         arrowIcon.classList.add("hide");
         menuItems.forEach(function(item) {
            item.classList.remove("text-hides");
         });
         itemTexts.forEach(function(text, index) {
            setTimeout(function() {
               text.classList.add("text-in");
            }, index * 150);
         });
         isOpen = true;
         try {
            close_edit_popup_now();
         } catch {}
      }

   });

   button.addEventListener("animationstart", function(event) {
      isAnimating = true;
   });

   button.addEventListener("animationend", function(event) {
      isAnimating = false;
      this.classList.remove("clicked");
   });
   </script>