title: Listening to variable changes in JavaScript
body: <pre class="lang-javascript prettyprint-override"><code>function notify() {
      var json = {
          'sessionId': "#{session.id}",
          'cartToken': "#{socketTokenBean.token}"
      };
  
      notifyAll(JSON.stringify(json)); // Push "json" to a WebSocket channel.
  }
  </code></pre>
  
  <pre class="lang-xhtml prettyprint-override"><code>&lt;p:inputText value="#{bean.value}" .../&gt;
  &lt;p:commandButton value="Submit" oncomplete="notify()" process="@this" update="..." .../&gt;
  </code></pre>
  
  <p>There could be another component like <code>&lt;p:selectOneMenu&gt;</code> in place of <code>&lt;p:inputText&gt;</code>. Consider it as an input component holding a quantity value in a shopping basket. <code>bean</code> is a session scoped managed bean holding a list of items in a shopping basket.</p>
  
  <p>The <code>oncomplete</code> handler of <code>&lt;p:commandButton&gt;</code> invokes a JavaScript function which pushes a JSON message to a WebSocket channel. Obviously, if nothing is changed in <code>&lt;p:inputText&gt;</code>, pushing a JSON message to a WebSocket channel is worth nothing - it will unnecessarily send associated clients a notification taking unnecessary processing power.</p>
  
  <p>Is there a way to invoke the <code>notify()</code> function here <code>oncomplete="notify()"</code>, only if the value held by the given <code>&lt;p:inputText&gt;</code> has been changed?</p>