68 lines
2.2 KiB
HTML
68 lines
2.2 KiB
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,
|
||
|
|
}, info);
|
||
|
|
}
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
window.deviceName.innerText = 'this is ' + window.webxdc.selfName;
|
||
|
|
})()
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|