技術週刊（2018-11-26 WebSocket）

前端快爆

• WebKit 推出新的着色語言 WHLSL，它對 HLSL 進行了擴展，變得更安全、更可靠。🔗
• 最新的 Safari 技術預覽版讓 a 標籤默認開啓 noopener 模式，此前當 a 標籤使用 target="_blank"在新標籤打開頁面時，能夠使用 window.opener 控制連接所在的頁面。Firefox 也即將默認開啓該功能。🔗

• C- CSSWG 最近討論將 :matches() 選擇器更名爲 :is()，以便更好的與 :not() 對應。Chrome 很快完成了更名，比較麻煩的是，Safari 9 以前已經發布了該選擇器 。🔗
• Chrome Chrome Dev Summit 2018 已完成舉行，會中發佈了更多的 PWA 支持，上線了 web.dev 以瀏覽更多 PWA 項目，並提供了 PWA 和 WebAssembly 的樣板項目 sqoosh，發佈了 Visbug 項目用於視覺進行快速網頁設計等等。🔗
• Safari 技術預覽版正式啓用<input type="color">，至此全部主流瀏覽器都已經支持該特性。🔗
• Node.js 10 正式發佈，同時，npm 6 也隨之發佈。據瞭解，今年 10 月，Node.js 10.x 將成爲長期支持版本，該版本搭載 V8 6.6 引擎，也是第一個支持 OpenSSL 1.1.0 的版本。該版本專一於穩定性、擴展支持以及爲各種應用提供一個可靠穩定的平臺。🔗

優秀 Demo

• 使用 Vue.js 建立交互式圖表

• CSS 文字 loading 動畫

專題：WebSocket

簡單的說，WebSocket 是基於 TCP 協議的上層協議，client 在 HTTP 第一次請求包頭中加入 Upgrade 字段告訴 server 須要升級到 WebSocket 協議，server 返回狀態碼 101 告訴客戶端協議升級成功，此後雙方通訊基於 WebSocket 協議，該鏈接擁有雙向通訊的能力，server 也能夠主動發消息給 client。

介紹

• 構建實時Web應用相關方案
• 協議標準 RFC 6455
• 維基百科:WebSocket
• API

進階

• 抓包分析WebSocket

相關應用

• 使用 WebSocket 和 CSS3 創造魔法
• websocket與爬蟲 實例講解如何抓取 WebSocket 數據
• 製做【你畫我猜】小遊戲
• WebSocket 實現多屏互動
• 多屏互動貪吃蛇

工具/資源

• SocketCluster WebSocket服務集羣解決方案
• WebSocket-Node 大部分使用 JavaScript，性能關鍵部分使用 C++ node-gyp 實現的庫，兼容性不錯。
• uWebSockets 是純 C++ 實現的 WebSocket 庫，以高性能著稱。
• socket.io 將數據傳輸部分獨立出來造成 engine.io，engine.io 對 WebSocket 和 AJAX 輪詢進行了封裝，造成了一套API，屏蔽了細節差別和兼容性問題，實現了跨瀏覽器/跨設備進行雙向數據通訊。
• Sockjs 是一個瀏覽器上運行的 JavaScript 庫,若是瀏覽器不支持 WebSocket，該庫能夠模擬對 WebSocket 的支持，實現瀏覽器和 Web 服務器之間低延遲、全雙工、跨域的通信通道。

---

本期編輯： @一絲；審閱： @humphry huang；專題供稿：@付英軍。 首發地址：zhuanlan.zhihu.com/mm-fe