关于前端:前端-H5新特性-websocket-封装

WebSocket 对象

let Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连贯的 URL。
第二个参数 protocol 是可选的，指定了可承受的子协定。

1、websocket事件；

let  socket = new WebSocket("//申请地址" ); // 定义socket 

socket.onopen           连贯建设时触发
socket.onmessage        接收数据时触发
socket.onerror          通信谬误时触发
socket.onclose          连贯敞开时触发 

2、websocket状态码（socket.readyState，示意连贯状态，能够是以下值）

 0：未连贯（正在建设连贯连贯，还没有实现）
 1：连贯已建设（连贯胜利建设，能够进行通信）
 2：连贯正在敞开（连贯正在进行敞开握手，行将敞开）
 3：连贯已敞开或打不开连贯（ 连贯曾经敞开或者基本没有建设）

3、websocket办法；

 socket.send()； 向服务器发送数据
 socket.close();  敞开连贯

封装

webSocket.js

/**
 * websocket相干办法类
 * websocket相干属性（仅供参考）：
 * 在此新增、编辑、删除、获取websocket
 * 应用时间接应用 send办法即可，而后依据须要调用其余的办法
 * */
class WebsocketApi {
    constructor() {
        this.websocket = new Map(); //初始化websocket容器
        this.baseUrl = baseUrl; //默认URL，在config.js中配置，在main.js中注入
        this.isOpen = false; // 开启标识，连贯标识 防止反复连贯
        this.heartbeatInterval = 60000; //心跳发送频率,每段时间发送一次心跳包 这里设置为60s,不同于重连频率
        this.heartbeatData = null; // 心跳发送的数据内容
        this.heartbeatTimer = null; // 心跳timer
        this.heartbeat = null; //延时发送音讯对象（启动心跳新建这个对象，收到音讯后重置对象）
        this.isReconnect = true; // 是否主动重连
        this.reconnectInterval = 3000; // 重连频率，不同于心跳包发送工夫距离
        this.reconnectCount = 3; // 重连次数
        this.reconnectCurrent = 0; // 已发动重连次数
        this.reconnectTimer = null; // 重连timer
    }
    /**
     * 初始化websocket
     * @param url
     * websocket地址，默认为 this.baseUrl
     * @param callback
     * 初始化过程中的回调函数
     * 如果是一般字符串，则视为拼接到websocketURL前面的参数
     * @param callback：回调函数，用于获取onmessage事件返回的数据
     * @returns 无返回值
     */
    init(_url, callback) {
        const url = _url ? _url : this.baseUrl;
        if (!('WebSocket' in window)) {
            console.warn('浏览器不反对WebSocket');
            return;
        }

        // 曾经创立过连贯不再反复创立
        if (this.websocket) {
            return this.websocket;
        }

        this.websocket = new WebSocket(url);

        // 连贯胜利
        this.websocket.onopen = () => {
            console.log('连贯胜利');
            this.isOpen = true;
            this.isReconnect = true;
            // 开启心跳
            this.heartbeat();
        };

        this.websocket.onmessage = res => {
            this.getMessage(res, callback);
        };

        // 连贯产生谬误
        this.websocket.onerror = function (e) {
            console.error('WebSocket连贯产生谬误');
            if (!this.isOpen) {
                this.reconnect(url); //重连
            }
        };

        // 敞开连贯
        this.websocket.onclose = e => {
            console.log(`连贯已断开 (${e.code})`);
            clearInterval(this.heartbeatInterval);
            this.isOpen = false;

            // 须要从新连贯
            if (this.isReconnect) {
                this.reconnectTimer = setTimeout(() => {
                    // 超过重连次数
                    if (this.reconnectCurrent > this.reconnectCount) {
                        clearTimeout(this.reconnectTimer);
                        return;
                    }

                    // 记录重连次数
                    this.reconnectCurrent += 1;
                    this.reconnect(url);
                }, this.reconnectInterval);
            }
        };
    }
    /**
     * 心跳办法，定时唤起连贯
     * @returns 没有返回值
     */
    heartbeat() {
        this.heartbeat = setInterval(() => {
            if (this.isOpen) {
                this.send(this.heartbeatData);
            } else {
                this.clear();
            }
        }, this.heartbeatInterval);

        if (this.heartbeatTimer) {
            clearInterval(this.heartbeatTimer);
        }
        this.heartbeatTimer = setInterval(() => {
            this.send(this.heartbeatData);
        }, this.heartbeatInterval);
    }
    /**
     * 发送音讯办法
     * @param data 要发送的数据内容
     * @param callback 发送之后的回调函数
     * @returns websocket实例或者undefined
     */
    send(data, callback) {
        // 开启状态间接发送
        if (this.websocket.readyState === this.websocket.OPEN) {
            this.websocket.send(JSON.stringify(data)); //在这里依据本人的须要转换数据格式

            if (callback) {
                callback();
            }

            // 正在开启状态，则期待1s后从新调用
        } else if (this.websocket.readyState === this.websocket.CONNECTING) {
            setTimeout(() => {
                this.send(data, callback);
            }, 1000);

            // 未开启，则期待1s后从新调用
        } else {
            this.init();
            setTimeout(() => {
                this.send(data, callback);
            }, 1000);
        }
    }
    /**
     * 接管音讯办法
     * @param cb 接管到的音讯后的回调函数
     * @returns websocket实例或者undefined
     */
    getMessage(cb) {
        this.websocket.onmessage = message => {
            try {
                const params = JSON.parse(message.data);
                if (params !== null && cb) {
                    return cb(params);
                } else {
                    return params;
                }
            } catch (error) {
                console.error(error);
            }
        };
    }
    /**
     * 从新连贯的办法
     * @returns 没有返回值
     */
    reconnect(_url) {
        const url = _url ? _url : this.baseUrl;
        console.log('发动从新连贯', this.reconnectCurrent);
        if (this.websocket && this.isOpen) {
            this.clear();
        }
        this.websocket = null;
        this.init(url);
    }
    /**
     * 清理websocket容器中连贯曾经敞开或者关上链接失败的websocket
     */
    clear() {
        this.websocket.close();
        this.heartbeat = null;
        this.heartbeatTimer = null;
    }
}
const websocketApi = new WebsocketApi();
export default websocketApi;

利用

例子1

<script src="./webSocket.js"></script>
<script type="text/javascript">

websocketApi.init();
websocketApi.clear();
websocketApi.getMessage(res => {
    console.log(JSON.parse(res.data));
});
websocketApi.send('1234');

</script>