index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <script src="webxdc.js"></script>
        <style type="text/css">
            body {
                font-family: Helvetica, Arial, sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>Hello</h1>
        <form>
            <input id="input" type="text" placeholder="Message" autofocus required />
            <input type="submit" onclick="sendMsg(); return false;" value="Send" />
        </form>
        <p id="output"></p>
        <p><em><small id="deviceName"></small></em></p>
        <script>

        var El = function (tag, text) {
            var el = document.createElement(tag);
            el.innerText = text || '';
            return el;
        };

        // handle past and future state updates
        window.webxdc.setUpdateListener(function (update) {
            var output = document.getElementById('output');
            // when appending content to an element with output.innerHTML +=
            // that content is implicitly parsed, making it possible for messages
            // to be interpreted as scripts. Creating elements directly,
            // injecting content as plain text, and appending them to the DOM
            // is a much safer practice.
            [
                El('strong', update.payload.name + ':'),
                El('span', update.payload.msg),
                El('br'),
            ].forEach(function (item) {
                output.appendChild(item);
            });
        });

        function sendMsg() {
            msg = document.getElementById("input").value;
            info = 'someone typed "' + msg + '"';
            document.getElementById("input").value = '';

            // send new updates
            window.webxdc.sendUpdate({
                payload: {
                    name: window.webxdc.selfName,
                    msg,
                },
                info,
            });
        }

        (function () {
            window.deviceName.innerText = 'this is ' + window.webxdc.selfName;
        })()
        </script>
    </body>
</html>