手摸手教你使用WebSocket[其实WebSocket也不难]

时间 2019-11-07

标签使用 websocket 其实不难繁體版

原文原文链接

前言

在本篇文章以前，WebSocket不少人据说过，没见过，没用过，觉得是个很高大上的技术，实际上这个技术并不神秘，能够说是个很容易就能掌握的技术，但愿在看完本文以后，立刻把文中的栗子拿出来本身试一试，实践出真知。html

游泳、健身了解一下：博客、前端积累文档、公众号、GitHub前端

`WebSocket`解决了什么问题：

客户端(浏览器)和服务器端进行通讯，只能由客户端发起ajax请求，才能进行通讯，服务器端没法主动向客户端推送信息。git

当出现相似体育赛事、聊天室、实时位置之类的场景时，客户端要获取服务器端的变化，就只能经过轮询(定时请求)来了解服务器端有没有新的信息变化。github

轮询效率低，很是浪费资源(须要不断发送请求，不停连接服务器)web

WebSocket的出现，让服务器端能够主动向客户端发送信息，使得浏览器具有了实时双向通讯的能力,这就是WebSocket解决的问题ajax

一个超简单的栗子：

新建一个html文件，将本栗子找个地方跑一下试试，便可轻松入门WebSocket：canvas

function socketConnect(url) {
    // 客户端与服务器进行链接
    let ws = new WebSocket(url); // 返回`WebSocket`对象，赋值给变量ws
    // 链接成功回调
    ws.onopen = e => {
        console.log('链接成功', e)
        ws.send('我发送消息给服务端'); // 客户端与服务器端通讯
    }
    // 监听服务器端返回的信息
    ws.onmessage = e => {
        console.log('服务器端返回：', e.data)
        // do something
    }
    return ws; // 返回websocket对象
}
let wsValue = socketConnect('ws://121.40.165.18:8800'); // websocket对象
复制代码

上述栗子中WebSocket的接口地址出自：WebSocket 在线测试，在开发的时候也能够用于测试后端给的地址是否可用。后端

webSocket的class类：

当项目中不少地方使用WebSocket，把它封成一个class类，是更好的选择。浏览器

下面的栗子，作了很是详细的注释，建个html文件也可直接使用，websocket的经常使用API都放进去了。服务器

下方注释的代码，先不用管，涉及到心跳机制，用于保持WebSocket链接的

class WebSocketClass {
    /** * @description: 初始化实例属性，保存参数 * @param {String} url ws的接口 * @param {Function} msgCallback 服务器信息的回调传数据给函数 * @param {String} name 可选值 用于区分ws，用于debugger */
    constructor(url, msgCallback, name = 'default') {
        this.url = url;
        this.msgCallback = msgCallback;
        this.name = name;
        this.ws = null;  // websocket对象
        this.status = null; // websocket是否关闭
    }
    /** * @description: 初始化 链接websocket或重连webSocket时调用 * @param {*} 可选值 要传的数据 */
    connect(data) {
        // 新建 WebSocket 实例
        this.ws = new WebSocket(this.url);
        this.ws.onopen = e => {
            // 链接ws成功回调
            this.status = 'open';
            console.log(`${this.name}链接成功`, e)
            // this.heartCheck();
            if (data !== undefined) {
                // 有要传的数据,就发给后端
                return this.ws.send(data);
            }
        }
        // 监听服务器端返回的信息
        this.ws.onmessage = e => {
            // 把数据传给回调函数，并执行回调
            // if (e.data === 'pong') {
            // this.pingPong = 'pong'; // 服务器端返回pong,修改pingPong的状态
            // }
            return this.msgCallback(e.data);
        }
        // ws关闭回调
        this.ws.onclose = e => {
            this.closeHandle(e); // 判断是否关闭
        }
        // ws出错回调
        this.onerror = e => {
            this.closeHandle(e); // 判断是否关闭
        }
    }
    // heartCheck() {
    // // 心跳机制的时间能够本身与后端约定
    // this.pingPong = 'ping'; // ws的心跳机制状态值
    // this.pingInterval = setInterval(() => {
    // if (this.ws.readyState === 1) {
    // // 检查ws为连接状态 才可发送
    // this.ws.send('ping'); // 客户端发送ping
    // }
    // }, 10000)
    // this.pongInterval = setInterval(() => {
    // this.pingPong = false;
    // if (this.pingPong === 'ping') {
    // this.closeHandle('pingPong没有改变为pong'); // 没有返回pong 重启webSocket
    // }
    // // 重置为ping 若下一次 ping 发送失败 或者pong返回失败(pingPong不会改为pong)，将重启
    // console.log('返回pong')
    // this.pingPong = 'ping'
    // }, 20000)
    // }
    // 发送信息给服务器
    sendHandle(data) {
        console.log(`${this.name}发送消息给服务器:`, data)
        return this.ws.send(data);
    }
    closeHandle(e = 'err') {
        // 由于webSocket并不稳定，规定只能手动关闭(调closeMyself方法)，不然就重连
        if (this.status !== 'close') {
            console.log(`${this.name}断开，重连websocket`, e)
            // if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
            // // 清除定时器
            // clearInterval(this.pingInterval);
            // clearInterval(this.pongInterval);
            // }
            this.connect(); // 重连
        } else {
            console.log(`${this.name}websocket手动关闭`)
        }
    }
    // 手动关闭WebSocket
    closeMyself() {
        console.log(`关闭${this.name}`)
        this.status = 'close';
        return this.ws.close();
    }
}
function someFn(data) {
    console.log('接收服务器消息的回调：', data);
}
// const wsValue = new WebSocketClass('ws://121.40.165.18:8800', someFn, 'wsName'); // 这个连接一天只能发送消息50次
const wsValue = new WebSocketClass('wss://echo.websocket.org', someFn, 'wsName'); // 阮一峰老师教程连接
wsValue.connect('当即与服务器通讯'); // 链接服务器
// setTimeout(() => {
// wsValue.sendHandle('传消息给服务器')
// }, 1000);
// setTimeout(() => {
// wsValue.closeMyself(); // 关闭ws
// }, 10000)
复制代码

栗子里面我直接写在了一块儿，能够把class放在一个js文件里面,export出去，而后在须要用的地方再import进来，把参数传进去就能够用了。

WebSocket不稳定

WebSocket并不稳定，在使用一段时间后，可能会断开链接，貌似至今没有一个为什么会断开链接的公论，因此咱们须要让WebSocket保持链接状态，这里推荐两种方法。

WebSocket设置变量，判断是否手动关闭链接：

class类中就是用的这种方式:设置一个变量，在webSocket关闭/报错的回调中，判断是否是手动关闭的，若是不是的话，就从新链接，这样作的优缺点以下：

优势：请求较少(相对于心跳链接)，易设置。
缺点：可能会致使丢失数据,在断开重连的这段时间中，刚好双方正在通讯。

WebSocket心跳机制：

由于第一种方案的缺点，而且可能会有其余一些未知状况致使断开链接而没有触发Error或Close事件。这样就致使实际链接已经断开了，而客户端和服务端殊不知道，还在傻傻的等着消息来。

而后聪明的程序猿们想出了一种叫作心跳机制的解决方法：

客户端就像心跳同样每隔固定的时间发送一次ping，来告诉服务器，我还活着，而服务器也会返回pong，来告诉客户端，服务器还活着。

具体的实现方法，在上面class的注释中，将其打开，便可看到效果。

关于WebSocket

怕一开始就堆太多文字性的内容，把各位吓跑了，如今你们已经会用了，咱们再回头来看看WebSocket的其余知识点。

WebSocket的当前状态:`WebSocket.readyState`

下面是WebSocket.readyState的四个值(四种状态)：

0: 表示正在链接
1: 表示链接成功，能够通讯了
2: 表示链接正在关闭
3: 表示链接已经关闭，或者打开链接失败

咱们能够利用当前状态来作一些事情，好比上面栗子中当WebSocket连接成功后，才容许客户端发送ping。

if (this.ws.readyState === 1) {
    // 检查ws为连接状态 才可发送
    this.ws.send('ping'); // 客户端发送ping
}
复制代码

`WebSocket`还能够发送/接收二进制数据

这里我也没有试过，我是看阮一峰老师的WebSocket教程才知道有这么个东西，有兴趣的能够再去谷歌，你们知道一下就能够。

二进制数据包括：blob对象和Arraybuffer对象，因此咱们须要分开来处理。

// 接收数据
ws.onmessage = function(event){
    if(event.data instanceof ArrayBuffer){
        // 判断 ArrayBuffer 对象
    }
    
    if(event.data instanceof Blob){
        // 判断 Blob 对象
    }
}

// 发送 Blob 对象的例子
let file = document.querySelector('input[type="file"]').files[0];
ws.send(file);

// 发送 ArrayBuffer 对象的例子
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
    binary[i] = img.data[i];
}
ws.send(binary.buffer);
复制代码

若是你要发送的二进制数据很大的话，如何判断发送完毕：

webSocket.bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去：

var data = new ArrayBuffer(10000000);
socket.send(data);
if (socket.bufferedAmount === 0) {
    // 发送完毕
} else {
    // 发送还没结束
}
复制代码

上述栗子出自阮一峰老师的WebSocket教程

WebSocket的优势：

最后再吹一波WebSocket：

双向通讯(一开始说的，也是最重要的一点)。
数据格式比较轻量，性能开销小，通讯高效

协议控制的数据包头部较小，而HTTP协议每次通讯都须要携带完整的头部
更好的二进制支持
没有同源限制，客户端能够与任意服务器通讯
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，而且握手阶段采用 HTTP 协议，所以握手时不容易屏蔽，能经过各类 HTTP 代理服务器

结语

看了本文以后，若是仍是有点迷糊的话，必定要把文中的两个栗子，新建个html文件跑起来，本身鼓捣鼓捣一下。否则读多少博客/教程都没有用，实践才出真知，切勿纸上谈兵。

但愿看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。

博客、前端积累文档、公众号、GitHub

以上2018.10.22

参考资料：

WebSocket 教程

初探和实现websocket心跳重连

WebSocket协议：5分钟从入门到精通