本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
Websocket 自推出以来，深受广大开发者喜爱。各种应用和后端框架也有很多开源的库，但是前端这方面，涉及的开源库并不多。很多技术人员需要手动的来实现这方面的代码。我这里分享了整理了所有的Websocket API。
实例化 Websocket
WebSocket WebSocket(String url,optional String | [] protocols);
接收两个参数：
- url 表示需要连接的地址，比如：ws://localhost:8080；
- protocols 可选参数，可以是一个字符串或者一个数组，用来表示子协议，这样做可以让一个服务器实现多种 WebSocket 子协议；
实例化对象提供两个方法：
- send 接收一个 String|ArrayBuffer|Blob 数据，作为数据发送到服务端；
- close 接收一个（可选）的 code（关闭状态号，默认为 1000） 与一个（可选）的字符串（表示断开原因），客户端主动断开连接；
连接状态：
-
WebSocket 类提供了一些常量表示连接状态：
- WebSocket.CONNECTING 0 连接还没开启；
- WebSocket.OPEN 1 连接已开启并准备好进行通信；
- WebSocket.CLOSING 3 连接正在关闭的过程中；
- WebSocket.CLOSED 4 连接已经关闭，或者连接无法建立；
- WebSocket 的实例对象中提供了 readyState 属性来判断当前状态；
实例化对象中可以监听到以下事件：
- open 连接打开的回调事件，这时 readyState 变为 OPEN；
- message 收到消息的回调事件，同时回调函数接收到一个 MessageEvent 数据；
- close 连接关闭的回调事件，这时 readyState 变为 CLOSED；
- error 建立与连接过程发生错误的回调事件；
以下是一个 Websocket 实例。
const ws = new WebSocket('ws://localhost:8080');
// 业余草
let sendTimmer = null;
let sendCount = 0;
ws.onopen = function () {
console.log('@open');
sendCount++;
ws.send('Hello Server!' + sendCount);
sendTimmer = setInterval(function () {
sendCount++;
ws.send('Hi Server!' + sendCount);
if (sendCount === 10) {
ws.close();
}
}, 2000);
};
ws.onmessage = function (e) {
console.log('@message');
console.log(e.data);
};
ws.onclose = function () {
console.log('@close');
sendTimmer && clearInterval(sendTimmer);
};
ws.onerror = function () {
console.log('@error');
};
对 WebSocket 实例监听事件有两种方式，这里以 message 事件为例：
-
对 onmessage 属性直接赋值，正如以上：
ws.onmessage = function () {};； -
使用 addEventListener 监听事件，如：
ws.addEventListener('message', function () {})；
在 message 回调函数中得到 MessageEvent 类型参数 e ，我们需要的数据可以通过 e.data 获取；
需要注意的一点是：不论服务端与客户端，其接受到的数据都是序列化后的字符串（当然也有 ArrayBuffer|Blob 类型数据），很多时候我们需要解析处理数据，比如 JSON.parse(e.data)；
连接稳定性
由于网络环境复杂，某些情况会出现断开连接或者连接出错，需要我们在 close 或者 error 事件中监听非正常断开并重连；
由于一些原因在 error 时浏览器并不会响应回调事件，因此稳妥的做法还需要在 open 之后开启一个定时任务去判断当前的连接状态 readyState ，在出现异常情况下尝试重连；
心跳
websocket规范定义了心跳机制，一方可以通过发送ping（opcode 0x9）消息给另一方，另一方收到ping后应该尽可能快的返回pong（0xA）。
心跳机制是用于检测连接的对方在线状态，因此如果没有心跳，那么无法判断一方还在连接状态中，一些网络层比如 nginx 或者浏览器层会主动断开连接，
在 JavaScript 中，WebSocket 并没有开放 ping/pong 的 API ，虽然浏览器自带了心跳处理，然而不同厂商的实现也不尽相同，因此需要在我们开发时候与服务端约定好一个自实现的心跳机制；
比如浏览器中，检测到 open 事件后，启动一个定时任务，每次发送数据 0x9 给服务端，而服务端返回 0xA 作为响应；
实践下来，心跳的定时任务一般是相隔 15-20 秒发送一次。
Websocket 是建立与 TCP 之上。Websocket 连接分为建连阶段与连接阶段，在建立连接阶段借助于 HTTP ，而在连接阶段则与 HTTP 无关。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » Websocket API 大全