简介

WebTransport 是什么？

WebTransport是浏览器提供的一套基于QUIC协议的 API 接口，方便浏览器和服务器之间进行实时数据传输，它填补了 Web 平台中的一些空白：

• 缺少类似 UDP 的网络 API
• 缺少类似于 WebSocket 但不受队头阻塞影响（Head of Line Blocking）的 API

WebTransport 特性

Webtransport 基于 QUIC 协议，其底层是 UDP。虽然是 UDP 是不可靠的传输协议，但是 QUIC 在 UDP 的基础上融合了 TCP、TLS、HTTP/2 等协议的特性，使得 QUIC 成为一种低时延、安全可靠的传输协议。可以简单理解 QUIC 把 TCP+TLS 的功能基于 UDP 重新实现了一遍。

WebTransport 提供了如下功能特性：

• 传输可靠数据流 （类似 TCP）
• 传输不可靠数据流（类似 UDP）
• 数据加密和拥塞控制（congestion control）
• 基于 Origin 的安全模型（校验请求方是否在白名单内，类似于 CORS 的Access-Control-Allow-Origin）
• 支持多路复用（类似于 HTTP2 的 Stream）

Docker 是什么？

定义

Docker 是一个基于Go语言开发的应用容器引擎，它遵循了Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的Linux服务器，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口（类iPhone的app），并且容器开销极其低。

同类技术

开源的VirtualBox、QEMU(quick emulator)、KVM, 商业VMware、 Parallels desktop

优缺点

Docker容器可以在Mac/Windows/Linux等主机上运行，并与其他容器共享主机的内核，它运行的一个独立的进程，不占用其他任何可执行文件的内存，非常轻量。Docker镜像一般都是MB级别。

虚拟机运行的是一个完成的操作系统，通过虚拟机管理程序对主机资源进行虚拟访问，相比之下需要的资源更多，虚拟机镜像都是GB级别。

当然虚拟机的隔离性更好 ，因为它完全虚拟了一个操作系统，在隔离性特别高的场景下，用虚拟机更为合适，比如一个我们买的VPS，都是一个虚拟机。

最近基于Electron开发了一个音视频应用，遇到了一些坑，特此记录下，希望可以帮助后续的同学。

Electron下载慢

安装electron时会自动最新的Electron二进制文件，由于文件比较大还容易墙，所以我们可以先配置好环境变量，再运行yarn或者npm install

1
2

export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
yarn install

ELECTRON_MIRROR表示Electron镜像地址，切换到国内淘宝源，速度会飞快

A complete, cross-platform solution to record, convert and stream audio and video.

FFmpeg是一个音视频流录制、转换的跨平台的完整开源解决方案

想利用WebAssembly来调用OpenSSL里面的MD5加密库，采用如下命令进行编译：

1

~ emcc md5.c -I /usr/local/Cellar/openssl@1.1/1.1.1d/include -L /usr/local/Cellar/openssl@1.1/1.1.1d/lib -lcrypto  -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap", "ccall"]' -o md5.js

编译时发现了如下问题：

1
2
3
4
5
6
7

shared:WARNING: object /var/folders/gk/_j9gq7sn6d19820tz77q5k600000gn/T/emscripten_temp_0ybodbu3_archive_contents/x86_64cpuid.o is not a valid object file for emscripten, cannot link
error: undefined symbol: MD5_Final
warning: To disable errors for undefined symbols use `-s ERROR_ON_UNDEFINED_SYMBOLS=0`
error: undefined symbol: MD5_Init
error: undefined symbol: MD5_Update
Error: Aborting compilation due to previous errors
shared:ERROR: '/usr/local/bin/node /usr/local/Cellar/emscripten/1.38.44/libexec/src/compiler.js /var/folders/gk/_j9gq7sn6d19820tz77q5k600000gn/T/tmpmptz1ty9.txt /usr/local/Cellar/emscripten/1.38.44/libexec/src/library_pthread_stub.js' failed (1)

WebAssembly是一个可移植、体积小、加载快并且兼容 Web 的全新二进制格式，其文件后缀名为wasm，是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。

在之前的在微信H5网页中获取用户基本信息一文中， 我们提到了如何在微信中获取用户信息，这一篇小文主要分析如何在新浪微博中获取用户信息，尤其是个人头像。

whistle(读音[ˈwɪsəl])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler和Mac上的Charles，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。

在前端，我们经常会用postMessage来实现页面间的点对点通信，对于一些需要广播（让所有页面知道）的消息，用postMessage无法满足需求。Broadcast Channel就用来解决这个问题

公众号推送

简介

微信公众号提供了接口方便进行消息推送。只要用户关注了对应的服务号， 就可以对其进行消息推送。推送的消息，支持打开网页或者打开小程序

限制： 公众号推送只针对服务号，普通个人公众号是不支持推送的。必须通过认证（花钱了）才可以调用推送接口