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