websocket - モデル変更時にポリマー コンポーネントを更新する方法

Question

私は、外部 URL からデータを取得する単純な Polymer コンポーネントを持っています。この例では、json プレースホルダーです。将来、これは API から消費されます。

私がやりたいことは、モデルの更新時に表示されるデータを更新することです。API 応答から公開されたデータが変更された場合は、すぐに HTML に反映する必要があります (おそらく Web ソケットを使用して、私の場合は R を通知します)。

<dom-module id="ajax-test">
<template>

    <!-- GETS THE DATA FROM A SOURCE -->
    <iron-ajax auto
               url="https://jsonplaceholder.typicode.com/users"
               handle-as="json"
               last-response="{{ajaxResponse}}">
    </iron-ajax>

    <table class="tg">
        <caption><span>USERS</span></caption>
        <template is="dom-repeat" items="[[ajaxResponse]]">
            <tr>
                <th class="tg-yw4l">[[item.name]]</th>
                <th class="tg-yw4l">[[item.username]]</th>
                <th class="tg-yw4l">[[item.email]]</th>
                <th class="tg-yw4l">[[item.address.street]] [[item.address.suite]] </th>
            </tr>
        </template>

    </table>

    <!-- SHOW THE FETCHED DATA -->
    <br />
    <pre>[[json(ajaxResponse)]]</pre>

</template>
<script>
    class AjaxTest extends Polymer.Element {
        static get is() { return 'ajax-test'; }

        static get properties() {
            return {
                prop1: {
                    type: String,
                    value: "bar"
                }
            }
        }

        json(obj) {
            return JSON.stringify(obj, null, 2);
        }
    }
    customElements.define(AjaxTest.is, AjaxTest);

</script>