WebTransport mini handson

2024.06.28 に某所で実施予定の「WebTransport ミニミニハンズオン」の資料です。

Transcript

1. WebTransport ϛχϛχϋϯζΦϯ 
   ͩ͜·ɹͻͰΏ͖ Teams!"#ˠ IUUQTHJTUHJUIVCDPNUBEGNBDFEFEDCFEB ࣄલ४උ
2. ࣗݾ঺հ ͩ͜·ɹͻͰΏ͖ 8FCΤϯδχΞ
   
   ϓϩτλΠϐϯά޷͖ !UBEGNBD IUUQTHJUIVCDPNUBEGNBD
3. ΞδΣϯμ 
   8FC5SBOTQPSUͱ͸ 
   ϛχϛχϋϯζΦϯ 
 ʢϩʔΧϧ1$Ͱ8FC5SBOTQPSUαʔόʔΛཱͯͯϒϥ΢β͔Β৮ͬͯΈΔʣ
4. 
   8FC5SBOTQPSUͱ͸ ৽͍͠௿Ϩϕϧτϥϯεϙʔτ"1*ɻʢͳΜͰ͜Μͳࡶͳઆ໌ͳͷ͔ ͸ޙड़ʣ Լهͭͷ"1*Λఏڙɻ 
   4USFBN
   "1* ˠ
   ॱংอূɺύέϩε࣌ͷ࠶ૹ੍ޚ͋Γɻ৴པੑ͕ߴ͍ɻ 
   EBUBHSBN
   "1* ˠ
   ॱংอূͳ͠ɺύέϩε࣌ͷ࠶ૹ੍ޚͳ͠ɻ৴པੑ͕௿͍ɻ IUUQTXXXXPSH53XFCUSBOTQPSU ࢓༷͸·ͩ8%ɻ࠷৽൛ͷΞοϓσʔτ͸
    8FC5SBOTQPSUͱ͸
5. ࢖͑Δ؀ڥ͸ 4BGBSJ଴ͪɻ 
   8FC5SBOTQPSUͱ͸ ͨͩ͠ɺ͜Ε͸ɺ Ҿ༻ݩɿIUUQTDBOJVTFDPN TFBSDIXFCUSBOTQPSU ͭ·Γɺʮ4FSWFS$MJFOUؒͷʯʮ)551ϕʔεͷʯ࢓༷ͷ࿩ɻ
6. 4FSWFS$MJFOUؒͷ)551ϕʔεͷ8FC5SBOTQPSUʁ ͜Ε 
   8FC5SBOTQPSUͱ͸ Ҿ༻ݩɿIUUQTEBUBUSBDLFSJFUGPSHEPDIUNMESBGUJFUGXFCUSBOTIUUQ
7. 8FC5SBOTQPSU
   PWFS
   )551
   ͱ͸ 
   8FC5SBOTQPSUͱ͸ )551ϕʔεͷαʔόʔΫϥΠΞϯτؒͰͷ૒ํ޲τϥϯεϙʔτ"1* 
 )551ʢ26*$ʣϕʔεͳͷͰɺ6%1Ͱ&&҉߸ԽͰ௨৴͢Δɻ Լهͭͷ"1*Λఏڙɻ 
   4USFBN
   "1* ˠ
   ॱংอূɺύέϩε࣌ͷ࠶ૹ੍ޚ͋Γɻ৴པੑ͕ߴ͍ɻ 
   EBUBHSBN
   "1* ˠ
   ॱংอূͳ͠ɺύέϩε࣌ͷ࠶ૹ੍ޚͳ͠ɻ৴པੑ͕௿͍ɻ 8FCݕࡧͯ͠ݟ͔ͭΔ8FC5SBOTQPSUͷઆ໌͸ɺ͍͍ͩͨ͜Εɻ 
 ΋ͱ΋ͱͷ8FC5SBOTQPSUͷϞνϕͷ࢓༷͸͜ΕͳͷͰɺਖ਼ղͱ͍͑͹ਖ਼ղɻ
8. Ͳ͏ͳͬͪΌͬͨͷ 
   8FC5SBOTQPSUͱ͸ Ҿ༻ݩɿIUUQTXXXXPSHTUBOEBSETIJTUPSZXFCUSBOTQPSU 8FC5SBOTQPSU
   PWFS
   )551௥Ճ 8FC5SBOTQPSU
   PWFS
   )551Ͱ࢝·Δ
9. ͜͏ͳͬͨɻʢͷ࢓༷Ͱ΋มΘΒͣʣ 
   8FC5SBOTQPSUͱ͸ Ҿ༻ݩɿIUUQTXXXXPSH53XFCUSBOTQPSUJOUSPEVDUJPO ˠ)551ϕʔεʢ5$1ϕʔεʣͰ΋8FC5SBOTQPSUϓϩτίϧ͕࢖͑ΔΑ͏ʹɺ 
 ɹ8FC5SBOTQPSU
   PWFS
   )551
   ͷ࢓༷͕௥Ճ͞Εͨɻ Ҿ༻ݩɿIUUQTEBUBUSBDLFSJFUGPSHEPDIUNMESBGUJFUGXFCUSBOTIUUQ
10. ͳΜͰ
    5$1ϕʔε͕௥Ճ͞Εͨͷ 
    8FC5SBOTQPSUͱ͸ ˠ6%1΍26*$࢖͑ͳ͍γʔϯଟ͍͔Βɻ 
 ྫɿ 
 ɹɾ6%1ϙʔτۭ͍ͯͳ͍
    ɹɾ1SPYZαʔόʔ͘Μ͕अຐ͢Δ 
 ϦΞϧλΠϜੑೳ͸ ˠ౰વԼ͕Δͱ༧૝ɻʢ࣮૷͕ແ͍ͷͰɺͲͷ͘Β͍Լ͕Δ͔͸Θ͔ΒΜ͚Ͳʣ PWFS
    )551
    ʹμ΢ϯάϨʔυͯ͠خ͍͠Ϣʔεέʔε͸ ˠ8FC4PDLFUͷ୅ΘΓʹϕετΤϑΥʔτͰੑೳ্͛ͯ8FC5SBOTQPSUΛ࢖͍͍ͨ
    ɹˠૣ͞ΑΓ΋ܨ͍͛ͨɺͱ͍͏ํ޲ 
 ɹɹˠͰ΋ɺ8FC4PDLFUͷ··Ͱ΋͍͍ͷͰ͸ʁͱ͍͏ٙ໰΋ɻ PWFS
    )551
    ʹμ΢ϯάϨʔυ͞ΕͯࠔΓͦ͏ͳϢʔεέʔε͸ ˠEBUBHSBN࢖͍͍͔ͨΒ8FC5SBOTQPSUΛ࢖͏Α͏ͳγʔϯɻ 
 ɹྫ͑͹ɺ.FEJB
    PWFS
    2VJD
    ͷϕʔεͱͯ͠8FC5SBOTQPSU࢖ͬͯΔͱ͔ͷ࣌͸ɺ
    ɹεϧʔϓοτͰͳ͍Μ͡Όͳ͍͔ʁͱࢥ͏ɻ
11. Ͱɺ׬શʹ༨ஊɻ 
    8FC5SBOTQPSUͱ͸ Ҿ༻ݩɿIUUQTXDHJUIVCJPQQXFCUSBOTQPSU 11
    7FSTJPO
      
12. 8FC5SBOTQPSUͱ͸
    ·ͱΊɻ 
    8FC5SBOTQPSUͱ͸ 8$
    8% ˠ·ͩ࢓༷ࡦఆத͕ͩɺ৽͍͠௿Ϩϕϧτϥϯεϙʔτ"1*ɻΒ͍͠ɻ 
 ˠ೥݄ݱࡏී௨ʹར༻Ͱ͖Δͷ͸
    8FC5SBOTQPSU
    PWFS
    )551ͷΈɻ
    ɹ!GBJMTDPNQPSOFOUXFCUSBOTQPSU
    ͕
    PWFS
    )551
    ༻ͷQPMZ fi MM
    
    TFSWFS࣮૷Λެ։͍ͯ͠Δɻ͍͢͝ɻ 6%1 5$1 )551 )551 8FC5SBOTQPSU 
 PWFS
    )551 8FC5SBOTQPSU 
 PWFS
    )551 8FC5SBOTQPSU 
 GPS
    11 4BGBSJҎ֎ͷϒϥ΢βରԠ ·ͩͲͷϒϥ΢β΋ະରԠ ·ͩͲͷϒϥ΢β΋ະରԠ 5-4
    26*$ 5-4
13. 8FC5SBOTQPSUͱ͸
    ·ͱΊɻ 
    8FC5SBOTQPSUͱ͸ ࡶ͗ͯ͢ɺϚαΧϦͱΜͰ͖ͦ͏͚ͩͲɺ͍͍ͩͨ͜Μͳײͩ͡ͱࢥ͏ɻ )551
    GFUDI
     
 9)3 8FC4PDLFU 8FC35$ 8FC5SBOTQPSU 
 PWFS
    )551 ৴པੑ ˓ ˓ º
    NFEJBTUSFBN 
 ˚ʙ˓
    EBUBDI ˚
    4USFBN 
 º
    %BUBHSBN ϦΞϧλΠϜੑೳ º º ˓ ˚
    4USFBN 
 ˓
    %BUBHSBN ηΩϡϦςΟ ˓
    44-ͷ৔߹ 
 º
    ඇ44-ͷ৔߹ ˓
    44-ͷ৔߹ 
 º
    ඇ44-ͷ৔߹ ˓ ˓ ࠓ࢖͑Δ͔ʁ ˓ ˓ ˓ º
    4BGBSJ଴ͪ ௨৴ํ޲ $ˠ4ͷΈ $⁶4
    ૒ํ޲ جຊతʹ$ˠ$ 
 ͷٕज़ $⁶4
    ૒ํ޲ ࢖͍ॴ σʔλ"1*ɺ 
 ίϯςϯπऔಘ νϟοτ 
 ૒ํ޲"1* 
 αʔόʔΠϕϯτ ϝσΟΞ௨৴ 
 11ڞ༗ ήʔϜ 
 ϦΞϧλΠϜಉظ 
 .P2
14. WebTransport ϛχϛχϋϯζΦϯ 
    ͩ͜·ɹͻͰΏ͖ Teams!"#ˠ IUUQTHJTUHJUIVCDPNUBEGNBDFEFEDCFEB ࣄલ४උ
15. ΍Δ͜ͱ֓ཁ 8FC5SBOTQPSU͸௿Ϩϕϧͳ"1*ઃܭͳͷͰɺΞϓϦέʔγϣϯ͔Β௚઀ѻ͏ͷ͸গʑࠎ͕ંΕ·͢ɻ ɾී௨ʹίʔσΟϯά͕ΊΜͲ͍͘͞ʢԼهࢀরʣ 
 ɾূ໌ॻ͕͍Ζ͍ΖΊΜͲ͍͘͞ʢ)551ͷੑʣ 
 ɾͦ΋ͦ΋OPEFKT
    ·ͩ
    )551ʹରԠͯ͠ͳ͍͔Β͍Ζ͍Ζ޻෉͕ඞཁ͚ͩͲɺԿΛ͢Ε͹͍͍͔ʁ
    ɹௐ΂Δ͚ͩͰେมʢݹ͍৘ใʹ࿭Θ͞ΕΔʣ ͜ΕΛղܾ͢ΔͨΊʹɺ4FSWFS
    
    $MJFOU
    ͷςετ؀ڥΛ؆୯ʹ্ཱͪ͛ΒΕΔϥούʔϥΠϒϥϦΛ 
 ࢖ͬͨαϯϓϧΛͭ͘Γ·ͨ͠ɻ 
 ͷͰɺ͜ΕΛ࢖ͬͯര଎
    XFCUSBOTQPSU
    ؀ڥͷߏஙΛࢼ͢ɻͱ͍͏ϋϯζΦϯͰ͢ɻ 8FC4PDLFUड৴ॲཧͷྫ const ws = new WebSocket(url); 
 ws.onmessage = (e)=>{ // onmessageॲཧ; 
 } 8FC5SBOTQPSUड৴ॲཧͷྫʢTUSFBNʣ const wt = new WebTransport(url); 
 const st = wt.incomingUnidirectionalStreams; 
 const reader = st.getReader(); while (true) { const { done, value } = await reader.read(); if (done) { break; } await readData(value); } async function readData(receiveStream) { const reader = receiveStream.getReader(); while (true) { const { done, value } = await reader.read(); if (done) { break; } // ड৴ॲཧ } }
16. Լه63-΁ΞΫηεʂ Teams!"#ˠ IUUQTHJUIVCDPNUBEGNBDQPXUFYBNQMF μ΢ϯϩʔυऴΘͬͨΒɺ೔ຊޠϖʔδ΁ʂ ࠷ॳʹ[JQΛμ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ[JQղౚޙɺϑΥϧμ໊ΛʮQPXUFYBNQMFʯʹมߋ
17. 
    NLDFSU
    Πϯετʔϧ NBD
    ʮλʔϛφϧʯىಈ brew install mkcert XJO؅ཧऀϞʔυͰQPXFSTIFMMىಈ choco install mkcert cd powt-example1/cert 
 mkcert --install 
 mkcert localhost 
    MPDBMIPTUূ໌ॻΠϯετʔϧ cd .. 
 npm i 
 node ./app.mjs 
    OQN
    J
    
    ΞϓϦىಈ chrome://flags#webtransport-developer-mode 
    ϒϥ΢β fl BHมߋ DISPNFΛىಈ͠ɺΞυϨεόʔʹԼهೖྗ <FOBCMFE>ʹมߋ͠ϒϥ΢β࠶ىಈ 
    ΫϥΠΞϯτ΁ΞΫηε https://localhost:4445 DISPNFΛىಈ͠ɺΞυϨεόʔʹԼهೖྗ
18. Thanks! Teams!"#ˠ