本文共 2582 字,大约阅读时间需要 8 分钟。
首先,解答本题, http 通过判断 header 中是否包含 Connection: Upgrade
与 Upgrade: websocket
来判断当前协议是否要升级到 websocket ,下面我们了解一下 WebSocket 协议与由来
WebSocket 之前,如果需要在客户端和服务之间双向通信,需要通过 HTTP 轮询来实现, HTTP 轮询分为轮询与长轮询:
其中,轮询是指浏览器通过 JavaScript 启动一个定时器,然后以固定的间隔给服务器发请求,询问服务器有没有新消息,缺点:
长轮询是指浏览器发送一个请求时,服务器先拖一段时间,等到有消息了再回复。这个机制暂时地解决了实时性问题,但是它带来了新的问题:
因此,HTML5 新增了 WebSocket 协议,能够在浏览器和服务器之间建立一个不受限的双向通信的通道。
为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢?
实际上HTTP协议是建立在TCP协议之上的,TCP协议本身就实现了全双工通信,但是HTTP协议的请求-应答机制限制了全双工通信。WebSocket连接建立以后,其实只是简单规定了一下:接下来,咱们通信就不使用HTTP协议了,直接互相发数据吧。
WebSocket 的优点:
WebSocket 使用 ws
或 wss
的统一资源标志符(URI),其中 wss
表示使用了 TLS 的 WebSocket。
ws://
数据不是加密的,对于任何中间人来说其数据都是可见的。
wss://
是基于 TLS 的 WebSocket,类似于 HTTPS 是基于 TLS 的 HTTP),传输安全层在发送方对数据进行了加密,在接收方进行解密
http 通过判断 header 中是否包含 Connection: Upgrade
与 Upgrade: websocket
来判断当前是否需要升级到 websocket 协议,除此之外,还有其它 header:
Sec-WebSocket-Key
:浏览器随机生成的安全密钥Sec-WebSocket-Version
:WebSocket 协议版本Sec-WebSocket-Extensions
:用于协商本次连接要使用的 WebSocket 扩展Sec-WebSocket-Protocol
:协议当服务器同意进行 WebSocket 连接时,返回响应码 101
测试地址:
一旦 socket 被建立,我们就应该监听 socket 上的事件。一共有 4 个事件:
如果我们想发送消息,可以使用 socket.send(data)
let socket = new WebSocket("wss://echo.websocket.org")socket.onopen = function(e) { console.log("[open] Connection established") // 发送消息 socket.send("My name is an")}socket.onmessage = function(event) { console.log(`[message] Data received from server: ${event.data}`)}socket.onclose = function(event) { // ...}socket.onerror = function(error) { console.log(`[error] ${error.message}`)}
WebSocket 使用 ws
或 wss
的统一资源标志符,通过判断 header 中是否包含 Connection: Upgrade
与 Upgrade: websocket
来判断当前是否需要升级到 websocket 协议,除此之外,它还包含 Sec-WebSocket-Key
、 Sec-WebSocket-Version
等header,当服务器同意 WebSocket 连接时,返回响应码 101
,它的 API 很简单。
方法:
socket.send(data)
socket.close([code], [reason])
事件:
open
message
error
close
本文首发自「三分钟学前端」,回复「交流」自动加入前端三分钟进阶群,每日一道编程算法面试题(含解答),助力你成为更优秀的前端开发! 号内回复「网络」,自动获取三分钟学前端网络篇小书(90+页) 号内回复「JS」,自动获取三分钟学前端 JS 篇小书(120+页) 号内回复「算法」,自动获取 github 2.9k+ 的前端算法小书 号内回复「面试」,自动获取 github 23.2k+ 的前端面试小书 号内回复「简历」,自动获取程序员系列的 120 套模版 最近开源了一个github仓库:百问百答,在工作中很难做到对社群问题进行立即解答,所以可以将问题提交至 ,我会在每晚花费 1 个小时左右进行处理,更多的是鼓励与欢迎更多人一起参与探讨与解答🌹
转载地址:http://bjbsi.baihongyu.com/