1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Receiving a message through PresentationConnection</title>
<link rel="author" title="Tomoyuki Shimizu" href="https://github.com/tomoyukilabs/">
<link rel="help" href="http://w3c.github.io/presentation-api/#receiving-a-message-through-presentationconnection">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="common.js"></script>
<script src="support/stash.js"></script>
<p id="notice">
Click the button below and select the available presentation display, to start the manual test. The test passes if a "PASS" result appears.<br>
<button id="presentBtn">Start Presentation Test</button>
</p>
<script>
setup({explicit_timeout: true});
const presentBtn = document.getElementById('presentBtn');
const message1 = '1st';
const message2 = '2nd';
const message3 = new Uint8Array([51, 114, 100]); // "3rd"
const message4 = new Uint8Array([52, 116, 104]); // "4th"
const message5 = new Uint8Array([108, 97, 115, 116]); // "last"
const toUint8Array = buf => {
return buf instanceof ArrayBuffer ? new Uint8Array(buf) : buf;
}
// compare two ArrayBuffer or Uint8Array
const compare = (a, b) => {
const p = toUint8Array(a);
const q = toUint8Array(b);
return !!p && !!q && p.every((item, index) => { return item === q[index]; });
};
promise_test(t => {
const clickWatcher = new EventWatcher(t, presentBtn, 'click');
const request = new PresentationRequest(presentationUrls);
const stash = new Stash(stashIds.toController, stashIds.toReceiver);
let connection, watcher, eventWatcher;
const checkEvent = event => {
assert_true(event.isTrusted, 'a trusted event is fired');
assert_true(event instanceof MessageEvent, 'The event uses the MessageEvent interface');
assert_false(event.bubbles, 'the event does not bubble');
assert_false(event.cancelable, 'the event is not cancelable');
};
const watchEvent = (obj, watcher, type) => {
const watchHandler = new Promise(resolve => {
obj['on' + type] = evt => { resolve(evt); };
});
return Promise.all([ watchHandler, watcher.wait_for(type) ]).then(results => {
assert_equals(results[0], results[1], 'Both on' + type + ' and addEventListener pass the same event object.');
return results[0];
});
};
t.add_cleanup(() => {
if (connection) {
connection.onconnect = () => { connection.terminate(); };
if (connection.state === 'closed')
request.reconnect(connection.id);
else
connection.terminate();
}
const notice = document.getElementById('notice');
notice.parentNode.removeChild(notice);
stash.stop();
});
return Promise.all([
clickWatcher.wait_for('click'),
stash.init()
]).then(() => {
presentBtn.disabled = true;
return request.start();
}).then(c => {
connection = c;
assert_equals(connection.state, 'connecting', 'the initial state of the presentation connection is "connecting"');
assert_equals(connection.binaryType, 'arraybuffer', 'the default value of binaryType is "arraybuffer"');
// enable timeout again, cause no user action is needed from here.
t.step_timeout(() => {
t.force_timeout();
t.done();
}, 5000);
watcher = new EventWatcher(t, connection, 'connect');
return watcher.wait_for('connect');
}).then(() => {
return stash.init();
}).then(() => {
eventWatcher = new EventWatcher(t, connection, 'message');
// Tell receiving page to start sending messages, and wait for first message
return Promise.all([
stash.send('onmessage'),
watchEvent(connection, eventWatcher, 'message')
]).then(results => results[1]);
}).then(event => {
checkEvent(event);
assert_equals(event.data, message1, 'receive a string correctly');
return watchEvent(connection, eventWatcher, 'message');
}).then(event => {
checkEvent(event);
assert_equals(event.data, message2, 'receive a string correctly');
return watchEvent(connection, eventWatcher, 'message');
}).then(event => {
checkEvent(event);
assert_true(event.data instanceof ArrayBuffer, 'receive binary data as ArrayBuffer');
assert_true(compare(event.data, message3), 'receive an ArrayBuffer correctly (originally a Blob at a receiving user agent)');
return watchEvent(connection, eventWatcher, 'message');
}).then(event => {
checkEvent(event);
assert_true(event.data instanceof ArrayBuffer, 'receive binary data as ArrayBuffer');
assert_true(compare(event.data, message4), 'receive an ArrayBuffer correctly (originally an ArrayBuffer at a receiving user agent)');
return watchEvent(connection, eventWatcher, 'message');
}).then(event => {
checkEvent(event);
assert_true(event.data instanceof ArrayBuffer, 'receive binary data as ArrayBuffer');
assert_true(compare(event.data, message5), 'receive an ArrayBuffer correctly (originally an ArrayBufferView at a receiving user agent)');
connection.binaryType = 'blob';
return Promise.all([
stash.send('blob'),
watchEvent(connection, eventWatcher, 'message')
]).then(results => results[1]);
}).then(event => {
assert_true(event.data instanceof Blob, 'receive binary data as Blob');
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = resolve;
reader.onerror = reject;
reader.readAsArrayBuffer(event.data);
});
}).then(event => {
assert_true(compare(event.target.result, message5), 'receive a Blob correctly');
connection.terminate();
});
});
</script>
|