前端WebSocket 封装

原创

已于 2023-02-18 11:16:08 修改 · 3k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #websocket

于 2023-02-18 11:04:29 首次发布

前端WebSocket 封装

前言

我封装的这是需要启动项目就立即连接，所以我在封装的js中自调用了连接函数，在main.js中引入该js文件，看你们需求再自己稍微变动一下吧

一、WebSocket是什么？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。只要记住用它可以前后端进行实时通信就行。

二、封装WebSoket.js及使用

1.封装WebSoket.js文件

代码如下：

var websock = null;
let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
let isConnect = false; //连接标识 避免重复连接
let checkMsg = "heartbeat"; //心跳发送/返回的信息 服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理

var globalCallback = function () {
   
    };

let createWebSocket = () => {
   
   
    try {
   
   

        initWebSocket(); //初始化websocket连接
    } catch (e) {
   
   
        console.log("尝试创建连接失败");
        reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
    }
};

//定义重连函数
let reConnect = () => {
   
   
    console.log("尝试重新连接");
    if (isConnect) return; //如果已经连上就不在重连了
    rec && clearTimeout(rec);
    rec = setTimeout(function () {
   
    // 延迟5秒重连  避免过多次过频繁请求重连
        createWebSocket();
    }, 5000);
};
//设置关闭连接
let closeWebSocket = ()