2023年6月27日发(作者：)

HTML5直播协议之WebSocket和MSE原⽂出处：当前为了满⾜⽐较⽕热的移动 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 协议中的那些概念都不复存在, 和 HTTP 的唯⼀关联是使⽤ HTTP 协议的 101 状态码进⾏协议切换, 使⽤的 TCP 端⼝是 80, 可以⽤于绕过⼤多数防⽕墙的限制.WebSocket 握⼿为了更⽅便地部署新协议，HTTP/1.1 引⼊了 Upgrade 机制, 它使得客户端和服务端之间可以借助已有的 HTTP 语法升级到其它协议. 这个机制在 RFC7230的) ⼀节中有详细描述.要发起 HTTP/1.1 协议升级，客户端必须在请求头部中指定这两个字段:Connection: UpgradeUpgrade: protocol-name[/protocol-version]如果服务端同意升级, 那么需要这样响应:HTTP/1.1 101 Switching ProtocolsConnection: upgradeUpgrade: protocol-name[/protocol-version][... data defined by new protocol ...]可以看到, HTTP Upgrade 响应的状态码是 101, 并且响应正⽂可以使⽤新协议定义的数据格式.WebSocket 握⼿就利⽤了这种 HTTP Upgrade 机制. ⼀旦握⼿完成，后续数据传输就直接在 TCP 上完成.WebSocket JavaScript API⽬前主流的浏览器提供了 WebSocket 的 API 接⼝, 可以发送消息(⽂本或者⼆进制)给服务器, 并且接收事件驱动的响应数据.Step1 检查浏览器是否⽀持 (ket) { // WebSocket代码}Step2 建⽴连接var ws = new WebSocket('ws://localhost:8327');Step3 注册回调函数以及收发数据分别注册 WebSocket 对象的 onopen, onclose, onerror 以及 onmessage 回调函数.通过 () 来进⾏发送数据, 这⾥不仅可以发送字符串, 也可以发送 Blob 或 ArrayBuffer 类型的数据.如果接收的是⼆进制数据，需要将连接对象的格式设为 blob 或 Type = 'arraybuffer';WebSocket Golang API服务器端 WebSocket 库我推荐使⽤ Google ⾃⼰的 , 可以⾮常⽅便的与 net/http ⼀起使⽤.可以将 websocket 的 handler function 通过 r 转换成r, 这样就可以跟 net/http 库⼀起使⽤了.然后通过 e 来接收数据, 通过 来发送数据.具体代码可以看下⾯的 Demo 部分.MSE在介绍 MSE 之前, 我们先看看 HTML5