websocket
          過去現在..未來?
              By Fillano




12年4月27日星期五
自我介紹
              • 卑微的IT工程師
              • Javascript技術狂熱者
              • 喜歡探索新技術
              • 渾名:fillano

12年4月27日星期五
websocket經驗
              • 2010年ITHelp鐵人賽後
              • GTUG HTML5 Hackathon
              • 以node.js實作過簡單的Hixie-76 Draft版
               本的websocket伺服器

              • 其實不多XD

12年4月27日星期五
Hixie 76
              • 時間:2010年
              • socket.io剛出現
              • handshake大不同
              • data frame大不同
              • 只能傳送utf-8字串

12年4月27日星期五
RFC 6455
              • 2011年底
              • handshake比較簡單
              • data frame大不同
              • 可傳送binary資料及utf-8字串
              • ping/pong frame

12年4月27日星期五
到底什麼是websocket
              • ⼀一套client side API(HTML5)
              • ⼀一個與HTTP相容的通訊協定(ex.
               hixie-76, hybi-10, RFC6455)

              • 提供client/server間雙向資料傳輸的機制
              • 除非⼀一方關閉連結,否則連結就是持續
               不斷的。關閉後需要從頭開始...



12年4月27日星期五
websocket life cycle
                  request / handshake
                  response / handshake
  時 客                                    伺
                        frames
  間 戶                                    服
    端                     ping           器
                         pong
                        frames
                         close

12年4月27日星期五
與http相容的特性
              • 類似⼀一個keep alive的request/response
              • client會送出request header
              • server會回覆response header
              • ⼀一些header資訊也可以同時利用,例如
                cookie
              • 也支援https的傳輸加密,wss://*

12年4月27日星期五
跟http不同的地方
              • header中許多欄位跟⼀一般http不同,用來
               傳遞特定資訊,或是做handshake

              • 連結是keep alive的,不會重複送出header
              • 資料傳送是雙向的
              • 資料傳送有特定的binary格式

12年4月27日星期五
client端的使用方式
              • 利用WebSocket這個constructor建立連結
               的instance

               • ex. new WebSocket(‘ws://localhost:8080,
                 [‘echo-protocol’,‘chat’])
              • 利用send()方法送資料
              • 利用message事件接收資料

12年4月27日星期五
server端的使用方式
              • 以node.js來說,就看你用哪個module
              • 目前支援比較好的是websocket-node
               (npm install -g websocket)
              • socket.io用的不⼀一定是websocket,它會
               優先使用flash做傳輸(請看他網站上的
               faq說明),所以我才選上面這個module
               來做測試


12年4月27日星期五
展示:多人共享白板



12年4月27日星期五
未來?
              • WebSocket與RFC6455本身應該不會有大
               變動

              • WebRTC目前制定的規格,還很難跟
               websocket直接整合,而且效能...

              • Microsoft提案Stream API,利用它可以把
               資料append到blob,這樣就有機會利用
               websocket轉送blob來播放audio/video


12年4月27日星期五
Q&A



12年4月27日星期五
參考資料
              • http://tools.ietf.org/html/rfc6455
              • http://www.whatwg.org/specs/web-apps/
                current-work/#network
              • http://dev.w3.org/html5/websockets/
              • http://www.w3.org/TR/FileAPI/
              • https://github.com/Worlize/WebSocket-
                Node/wiki/Documentation


12年4月27日星期五

Websocket talk in nodejs.tw

  • 1.
    websocket 過去現在..未來? By Fillano 12年4月27日星期五
  • 2.
    自我介紹 • 卑微的IT工程師 • Javascript技術狂熱者 • 喜歡探索新技術 • 渾名:fillano 12年4月27日星期五
  • 3.
    websocket經驗 • 2010年ITHelp鐵人賽後 • GTUG HTML5 Hackathon • 以node.js實作過簡單的Hixie-76 Draft版 本的websocket伺服器 • 其實不多XD 12年4月27日星期五
  • 4.
    Hixie 76 • 時間:2010年 • socket.io剛出現 • handshake大不同 • data frame大不同 • 只能傳送utf-8字串 12年4月27日星期五
  • 5.
    RFC 6455 • 2011年底 • handshake比較簡單 • data frame大不同 • 可傳送binary資料及utf-8字串 • ping/pong frame 12年4月27日星期五
  • 6.
    到底什麼是websocket • ⼀一套client side API(HTML5) • ⼀一個與HTTP相容的通訊協定(ex. hixie-76, hybi-10, RFC6455) • 提供client/server間雙向資料傳輸的機制 • 除非⼀一方關閉連結,否則連結就是持續 不斷的。關閉後需要從頭開始... 12年4月27日星期五
  • 7.
    websocket life cycle request / handshake response / handshake 時 客 伺 frames 間 戶 服 端 ping 器 pong frames close 12年4月27日星期五
  • 8.
    與http相容的特性 • 類似⼀一個keep alive的request/response • client會送出request header • server會回覆response header • ⼀一些header資訊也可以同時利用,例如 cookie • 也支援https的傳輸加密,wss://* 12年4月27日星期五
  • 9.
    跟http不同的地方 • header中許多欄位跟⼀一般http不同,用來 傳遞特定資訊,或是做handshake • 連結是keep alive的,不會重複送出header • 資料傳送是雙向的 • 資料傳送有特定的binary格式 12年4月27日星期五
  • 10.
    client端的使用方式 • 利用WebSocket這個constructor建立連結 的instance • ex. new WebSocket(‘ws://localhost:8080, [‘echo-protocol’,‘chat’]) • 利用send()方法送資料 • 利用message事件接收資料 12年4月27日星期五
  • 11.
    server端的使用方式 • 以node.js來說,就看你用哪個module • 目前支援比較好的是websocket-node (npm install -g websocket) • socket.io用的不⼀一定是websocket,它會 優先使用flash做傳輸(請看他網站上的 faq說明),所以我才選上面這個module 來做測試 12年4月27日星期五
  • 12.
  • 13.
    未來? • WebSocket與RFC6455本身應該不會有大 變動 • WebRTC目前制定的規格,還很難跟 websocket直接整合,而且效能... • Microsoft提案Stream API,利用它可以把 資料append到blob,這樣就有機會利用 websocket轉送blob來播放audio/video 12年4月27日星期五
  • 14.
  • 15.
    參考資料 • http://tools.ietf.org/html/rfc6455 • http://www.whatwg.org/specs/web-apps/ current-work/#network • http://dev.w3.org/html5/websockets/ • http://www.w3.org/TR/FileAPI/ • https://github.com/Worlize/WebSocket- Node/wiki/Documentation 12年4月27日星期五