# 简记---前端使用 WebSocket 接口

最近项目进入优化阶段，要求把之前的定时轮询（心跳）修改为 WebSocket。网上有很多 WebSocket协议 优秀的文章，从原理到请求头各个参数解读，但是前端详细的使用文章比较少。此篇笔记也主要是记录 WebSocket 接口的基本用法，不涉及太多原理。

WebSocket协议 是什么

WebSocket协议是一种在单个TCP连接上进行全双工通信的协议。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，开发者可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

WebSocket 协议基本概念

在浏览器的Network查看ws接口详情，我们可以看到基本 WebSocket 请求头如下：

	Upgrade: websocket
	Connection: Upgrade
	Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
	Sec-WebSocket-Version: 13
	Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
	Origin: localhost:8080

其中：

• Connection这个核心字段通知服务器当前使用的是WebSocket 协议
• Upgrade 表示要升级到 WebSocket 协议
• Sec-WebSocket-Key 是一个 Base64 encode 的值，与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接。
• Sec-WebSocket-Version: 13表示websocket的版本。这也是由于早期各个浏览器使用的版本都不同，所以后期进行了统一
• Sec-WebSocket-Extensions表示协议扩展类型。某类协议可能支持多个扩展，通过它可以实现协议增强
• Origin用于防止未授权的跨域脚本攻击，服务器可以从Origin决定是否接受该WebSocket连接，如果请求来自浏览器必须包含Origin属性名

而 ws 接口的响应包也是可以对应的上：

   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
   Origin: localhost:8080 

在相应包中，存在和请求头一一对应的字段，而在其中：

-Sec-WebSocket-Accept值是将请求包“Sec-WebSocket-Key”的值，与”258EAFA5-E914-47DA-95CA-C5AB0DC85B11″这个字符串进行拼接，然后对拼接后的字符串进行sha-1运算，再进行base64编码，就是“Sec-WebSocket-Accept”的值；

WebSocket 接口前端用法

1. 初始化 WebSocket 实例，WebSocket()构造函器会返回一个 WebSocket 对象。WebSocket()包含两个参数：url–要连接的URL（必填）、protocols–单协议字符串或者包含协议字符串的数组（可选）。

2. 常用属性赋值：
   –WebSocket.onopen 属性定义一个事件处理程序，当WebSocket 的连接状态readyState变为“OPEN”时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 事件（建立连接时）触发。可以在此处使用WebSocket.send()方法传递参数
   –WebSocket.onclose 属性返回一个事件监听器，这个事件监听器将在 WebSocket 连接的readyState 变为 CLOSED时被调用，它接收一个名字为“close”的 CloseEvent 事件。
   – WebSocket.onerror 属性返回一个事件监听器，你可以定义一个发生错误时执行的回调函数，此事件的事件命名为"error"。
   – WebSocket.onmessage 属性是一个当收到来自服务器的消息时被调用的 EventHandler。它由一个