WebSocket+MSE——HTML5直播技术解析

WebSocket+MSE——HTML5直播技术解析

分享 | 刘博（又拍云多媒体开发工程师）

又小拍：

如何实现HTML5直播技术是直播创业团队一直想要攻克的难题。12月1日20:00，深度参与“又拍直播云”开发的工程师刘博就如何利用WebSocket+MSE实现HTML5直播在微信群里进行了分享。小拍马不停蹄将刘博的分享内容整理成了文字，并插入一些PPT便于大家了解。全文整理如下：

下面就是分享内容啦~

当前为了满足比较火热的移动Web端直播需求，一系列的HTML5直播技术迅速的发展起来。

常见的可用于HTML5的直播技术有HLS、WebSocket与WebRTC。今天我向大家介绍WebSocket与MSE相关的技术要点，并在最后通过一个实例来展示具体用法。

分享大纲

⊙WebSocket协议介绍

⊙WebSocket Client/Server API介绍

⊙MSE介绍

⊙fMP4介绍

⊙Demo展示

WebSocket

通常的Web应用都是围绕着HTTP的请求/响应模型构建的。所有的HTTP通信都通过客户端来控制，由客户端向服务器发出一个请求，服务器接收和处理完毕后再返回结果给客户端，客户端将数据展现出来。由于这种模式不能满足实时应用需求，于是出现了SSE、Comet等 "服务器推" 的长连接技术。

WebSocket是基于TCP连接之上的通信协议，可以在单个TCP连接上进行全双工的通信。WebSocket在2011年被IETF定为标准RFC 6455，并被RFC 7936补充规范，WebSocket API被W3C定为标准。

WebSocket是独立地创建在TCP上的协议，HTTP协议中的那些概念都和WebSocket没有关联，唯一关联的是使用HTTP协议的101状态码进行协议切换时，使用的TCP端口是80，可以绕过大多数防火墙的限制。

WebSocket握手

为了更方便地部署新协议，HTTP/1.1引入了Upgrade机制，使得客户端和服务端之间可以借助已有的HTTP语法升级到其它协议。这个机制在RFC7230的6.7 Upgrade一节中有详细描述。

要发起HTTP/1.1协议升级，客户端必须在请求头部中指定这两个字段 ▽

Connection: Upgrade

Upgrade: protocol-name[/protocol-version]

如果服务端同意升级，那么需要这样响应 ▽

HTTP/1.1 101 Switching Protocols

Connection: upgrade

Upgrade: protocol-name[/protocol-version]

[... data defined by new protocol ...]

可以看到，HTTP Upgrade响应的状态码是101，并且响应正文可以使用新协议定义的数据格式。

WebSocket握手就利用了这种HTTP Upgrade机制。一旦握手完成，后续数据传输直接在TCP上完成。

WebSocket JavaScript API

目前主流的浏览器提供了WebSocket的API接口，可以发送消息（文本或者二进制）给服务器，并且接收事件驱动的响应数据。

Step1. 检