U E D R , A S I H C RSS

html5/communicationAPI

1. ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ API


  • ํ”„๋กœ๊ทธ๋žจ๊ฐ„์— ๋น„๋™์‹์œผ๋กœ ๋ฉ”์„ธ์ง€ ์ „๋‹ฌ : ๋А์Šจํ•œ ๊ฒฐํ•ฉ(loosely coupled)
  • ๋ฉ”์„ธ์ง€ : ์ž„์˜์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ์ฒด ๋˜๋Š” ๋‹จ์ˆœ ๋ฌธ์ž์—ด
  • ํ†ต์‹  ์ˆ˜ํ–‰์˜ ์ฃผ์ฒด : ์œˆ๋„์šฐ, ๋ฐฑ๊ทธ๋ผ์šด๋“œ ํƒœ์Šคํฌ, ์„œ๋ฒ„์—์„œ ๋™์ž‘ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ

  • ๋ฉ”์„ธ์ง€ ์ด๋ฒคํŠธ : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด ( data, origin, lastEventid, source, ports)

  • ๋ฉ”์„ธ์ง€ ์ˆ˜์‹  : onmessage์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ (MessageEvent๊ฐ์ฒด ์–ป์Œ)

2. ํฌ๋กœ์Šค ๋„ํ๋จผํŠธ ๋ฉ”์„ธ์ง•

  • ๋ฉ”์„ธ์ง€์˜ ์†ก์ˆ˜์‹ ์„ ํ†ตํ•ด ๋‘˜ ์ด์ƒ์˜ ์›น ํŽ˜์ด์ง€๊ฐ€ ์„œ๋กœ ๋ฐ์ดํ„ฐ ์ฃผ๊ณ ๋ฐ›์Œ
  • ๋„๋ฉ”์ธ์ด ๋‹ค๋ฅธ ์›นํŽ˜์ด์ง€๋„ ๋ฐ์ดํ„ฐ ๊ณต์œ ๊ฐ€๋Šฅ

  • ์†ก์‹  : postMessage(data, ports, targetOrigin)
  • ์ˆ˜์‹  : onmessage() ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ

  • postMessage(data, ports, targetOrigin)
    • data : ์ž„์˜์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด
    • ports : messagePort๊ฐ์ฒด, ์ƒ๋žต๊ฐ€๋Šฅ
    • targetOrigin : ๋ฉ”์„ธ์ง€๋ฅผ ์ˆ˜์‹ ํ•˜๋Š” ๋„๋ฉ”์ธ(ํ”„๋กœํ† ์ฝœ+๋„๋ฉ”์ธ+ํฌํŠธ๋ฒˆํ˜ธ)
  • ๋ณด์•ˆ์„ ์œ„ํ•ด ๋ฉ”์„ธ์ง€๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ์ƒ๋Œ€์˜ ์‹ ์› ํ™•์ธ ํ•„์ˆ˜

  • onMessage ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ

  // ๋ฉ”์„ธ์ง€๋ฅผ ์ˆ˜์‹ ํ•ด MessageEventํ˜•์˜ ๊ฐ์ฒด ์–ป์Œ
  window.onmessage = function(e) {
   // origin ์†์„ฑ์œผ๋กœ๋ถ€ํ„ฐ ์†ก์‹ ์ฒ˜ ํ™•์ธ
   if(e.origin == "http://localhost"){
      // data ์†์„ฑ์œผ๋กœ ์ˆ˜์‹ ๋œ ๋ฉ”์„ธ์ง€ ํ™•์ธ
       alert(e.data);
   }
 };

  • ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ

  // ๋ฉ”์„ธ์ง€๋ฅผ ์ˆ˜์‹ ํ•ด MessageEventํ˜•์˜ ๊ฐ์ฒด ์–ป์Œ
  window.addEventListener("message", function(e) {
     ....
   }, false);

  • ๋ฉ”์„ธ์ง€ ์†ก์‹  ์˜ˆ

 var destFrame = document.getElementById("message-dest");
 destFrame.contentWindow.postMessage("๋ฉ”์„ธ์ง€ ๋‚ด์šฉ", /*ํฌํŠธ ์ƒ๋žต๊ฐ€๋Šฅ*,/ "http://desc.example.com"); 

3. ์ฑ„๋„ ๋ฉ”์„ธ์ง•

  • ๋‹ค๋Œ€๋‹ค ๋ฉ”์„ธ์ง€ ํ†ต์‹ ์„ ์‹คํ˜„ํ•˜๊ธฐ ์œ„ํ•œ API
  • ์ฑ„๋„ : ๋ฉ”์„ธ์ง€ ์†ก,์ˆ˜์‹ ์„ ์ค‘๊ฐœํ•˜๋Š” ๊ฐ์ฒด, MessageChannelํ˜•
  • MessageChannel : ๋‘๊ฐœ์˜ ํฌํŠธ๊ฐ€์ง ํฌํŠธ1 -> ํฌํŠธ2, ํฌํŠธ2 -> ํฌํŠธ1
  • ํฌํŠธ : MessagePort๊ฐ์ฒด
    • start() : ํฌํŠธ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค. ์ฑ„๋„ ๋ฉ”์„ธ์ง• ์ˆ˜ํ–‰์‹œ ๊ฐ๊ฐ์˜ ํฌํŠธ์— ๋Œ€ํ•ด start()๋ฅผ ํ˜ธ์ถœ
    • close() : ํฌํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ํ•จ
    • postMessage(message, ports) : ๋ฉ”์„ธ์ง€ ์†ก์‹ 
    • onmessage : ๋ฉ”์„ธ์ง€ ๋„์ฐฉ์‹œ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ํ˜ธ์ถœ๋จ

  • ์ฑ„๋„์„ ์ด์šฉํ•œ ๋ฉ”์„ธ์ง€ ์†ก์‹ 

 // ์ƒ๋žต๊ฐ€๋Šฅ
 channel.port1.start(); 
 channel.port2.start();
 // ํฌํŠธ๋ฅผ ์ด์šฉํ•œ ๋ฉ”์„ธ์ง€ ์†ก์‹  
 channel.port1.postMessage("TEST");

4. ํฌํŠธ ๊ณต๊ฐœ

  • ํฌํŠธ๋ฅผ ์†ก์‹ ํ•˜์—ฌ ์ˆ˜์‹ ์ž๊ฐ€ ์†ก์‹ ์ž์˜ ํฌํŠธ์— ์ง์ ‘ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒํ•จ
  • ํฌํŠธ๋Š” ๊ฐ’ ๋ณต์‚ฌ๋กœ ์ „๋‹ฌ๋จ
  • ๋ฐ›์€ ํฌํŠธ๋Š” PostMessgae()์˜ ports์ธ์ž์— ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ์ „๋‹ฌ๊ฐ€๋Šฅ
    • ์ฃผ์˜ : ๋ฐฐ์—ด์•ˆ์— null์ด ํฌํ•จ๋  ๋•Œ, ์ด์ „์— postMessage()์˜ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ ์ด ์žˆ๋Š” ํฌํŠธ๊ฐ€ ํฌํ•จ๋  ๋•Œ, ํ•œ ์ฑ„๋„์˜ ํฌํŠธ1๊ณผ ํฌํŠธ2๊ฐ€ ๋™์‹œ์— ํฌํ•จ๋  ๋•Œ

5. ๊ด€๋ จ ์‚ฌ์ดํŠธ

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:40
Processing time 0.0071 sec