前端技术周刊 2018-11-26：WebSocket

好久不见，小编终于从双11项目室放出来啦，周刊恢复每周更新。一边写 Bug 一边买买买的时候，可别忘记了点个关注或订阅哦。

前端快爆

• WebKit 推出新的着色语言 WHLSL，它对 HLSL 进行了扩展，变得更安全、更可靠。?
• 最新的 Safari 技术预览版让 a 标签默认开启 noopener 模式，此前当 a 标签使用 target="_blank" 在新标签打开页面时，可以使用 window.opener 控制链接所在的页面。Firefox 也即将默认开启该功能。?

• 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 服务器之间低延迟、全双工、跨域的通讯通道。

---

本期编辑：@壹丝；审阅：@承虎；专题供稿：@付英军。