JavaScript面试考点之Websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如 浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式 对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便。

WebSocket就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。

特点：1）建立在 TCP 协议之上，服务器端的实现比较容易。

2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

3）数据格式比较轻量，性能开销小，通信高效。

4）可以发送文本和二进制数据。

5）没有同源限制，客户端可以与任意服务器通信。

6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 WebSocket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

1）WebSocket属性

2）WebSocket事件

事件

3）WebSocket方法

2、Websocket 握手原理

Websocket的握手原理大致可分为以下步骤：

第一步：客户端发起HTTP请求连接

第二步：服务端从请求头中取出Sec-WebSocket-Key的值

第三步：给Sec-WebSocket-Key值拼接一个magic_string的到一个新的value

第四步：给新的value先做sha1加密再做base64加密

第五步：拼接一个响应头

第六步：服务器将拼好的响应头发送给客户端

第七步：客户端解密Sec-WebSocket-Accept得到Sec-WebSocket-Key判断是否握手成功

3、WS和WSS区别

a、WS（WebSocket ）是不安全的 ，容易被窃听，因为任何人只要知道你的ip和端口，任何人都可以去连接通讯。WSS（Web Socket Secure）是WebSocket的加密版本。

b、WS一般默认是80端口，而WSS默认是443端口；WS和WSS的体现形式分别是TCP+WS AS WS ，TCP+TLS+WS AS WS。

其实浏览器并没有严格的限制http下一定使用ws，而不能使用wss，经过测试http协议下同样可以使用wss协议链接。

4、websocket 心跳检测和断线重连

websocket是实现前后端交互的长连接，前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性，websocket心跳重连就应运而生。

如果设备网络断开，不会立刻触发websocket的任何事件，前端也就无法得知当前连接是否已经断开。后端websocket服务也可能出现异常，造成连接断开，这时前端也并没有收到断开通知。

因此需要以前端作为主动方，前端定时发送心跳消息ping，后端收到ping类型的消息，立马返回pong消息，告知前端连接正常。如果一定时间没收到pong消息，就说明连接不正常，前端便会执行重连。