vue封装和使用websocket

这篇具有很好参考价值的文章主要介绍了vue封装和使用websocket。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近做了一个数据大屏的项目,使用了websocket来实现数据实时更新的需求,简单记录分享一下。

什么是websocket?

1、WebSocket协议是基于TCP的一种新的网络协议,允许服务端主动向客户端推送数据,实现全双工通信。
2、在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

1、封装websocket代码

websocket的请求地址是以‘ws:// ’或 ‘wss:// ’开头的。

// websocket实例
let wsObj = null;
// ws连接地址
let wsUrl = null;
// let userId = null;
// 是否执行重连 true/不执行 ; false/执行
let lockReconnect = false;
// 重连定时器
let wsCreateHandler = null;
// 连接成功,执行回调函数
let messageCallback = null;
// 连接失败,执行回调函数
let errorCallback = null;
// 发送给后台的数据
let sendDatas = {};

/**
 * 发起websocket请求函数
 * @param {string} url ws连接地址
 * @param {Object} agentData 传给后台的参数
 * @param {function} successCallback 接收到ws数据,对数据进行处理的回调函数
 * @param {function} errCallback ws连接错误的回调函数
 */
export const connectWebsocket = (
  url,
  agentData,
  successCallback,
  errCallback
) => {
  wsUrl = url;
  createWebSoket();
  messageCallback = successCallback;
  errorCallback = errCallback;
  sendDatas = agentData;
  console.log(sendDatas);
};

// 手动关闭websocket (这里手动关闭会执行onclose事件)
export const closeWebsocket = () => {
  if (wsObj) {
    writeToScreen("手动关闭websocket");
    wsObj.close(); // 关闭websocket
    // wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
    // 关闭重连
    lockReconnect = true;
    wsCreateHandler && clearTimeout(wsCreateHandler);
    // 关闭心跳检查
    heartCheck.stop();
  }
};

// 创建ws函数
const createWebSoket = () => {
  if (typeof WebSocket === "undefined") {
    writeToScreen("您的浏览器不支持WebSocket,无法获取数据");
    return false;
  }
  // wsUrl = "ws://" + host + "/websoket" + userId;
  // your_params:你要传给后端的参数
  try {
    wsObj = new WebSocket(wsUrl, your_params);
    initWsEventHandle();
  } catch (e) {
    writeToScreen("连接异常,开始重连");
    reconnect();
  }
};

const initWsEventHandle = () => {
  try {
    // 连接成功
    wsObj.onopen = (event) => {
      console.log("连接成功");
      onWsOpen(event);
      heartCheck.start();
    };

    // 监听服务器端返回的信息
    wsObj.onmessage = (event) => {
      console.log("监听服务器端返回的信息");
      onWsMessage(event);
      heartCheck.start();
    };

    wsObj.onclose = (event) => {
      writeToScreen("onclose执行关闭事件");
      onWsClose(event);
    };

    wsObj.onerror = (event) => {
      writeToScreen("onerror执行error事件,开始重连");
      onWsError(event);
      reconnect();
    };
  } catch (err) {
    writeToScreen("绑定事件没有成功,开始重连");
    reconnect();
  }
};

const onWsOpen = (event) => {
  writeToScreen("CONNECT");
  // // 客户端与服务器端通信
  // wsObj.send('我发送消息给服务端');
  // 添加状态判断,当为OPEN时,发送消息
  if (wsObj.readyState === wsObj.OPEN) {
    // wsObj.OPEN = 1
    // 发给后端的数据需要字符串化
    wsObj.send(JSON.stringify(sendDatas));
  }
  if (wsObj.readyState === wsObj.CLOSED) {
    // wsObj.CLOSED = 3
    writeToScreen("wsObj.readyState=3, ws连接异常,开始重连");
    reconnect();
    errorCallback();
  }
};
const onWsMessage = (event) => {
  const jsonStr = event.data;
  writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
  messageCallback(jsonStr);
};
const onWsClose = (event) => {
  writeToScreen("DISCONNECT");
  // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
  // e.code !== 1000  表示非正常关闭。
  console.log("onclose event: ", event);
  if (event && event.code !== 1000) {
    writeToScreen("非正常关闭");
    errorCallback();
    // 如果不是手动关闭,这里的重连会执行;如果调用了手动关闭函数,这里重连不会执行
    reconnect();
  }
};
const onWsError = (event) => {
  writeToScreen("onWsError: ", event.data);
  errorCallback();
};

const writeToScreen = (massage) => {
  console.log(massage);
};

// 重连函数
const reconnect = () => {
  if (lockReconnect) {
    return;
  }
  writeToScreen("3秒后重连");
  lockReconnect = true;
  // 没连接上会一直重连,设置延迟避免请求过多
  wsCreateHandler && clearTimeout(wsCreateHandler);
  wsCreateHandler = setTimeout(() => {
    writeToScreen("重连..." + wsUrl);
    createWebSoket();
    lockReconnect = false;
    writeToScreen("重连完成");
  }, 3000);
};

// 从浏览器地址中获取对应参数
const GetQueryString = (name) => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  // 获取url中 ? 符后的字符串并正则匹配
  let r = window.location.search.substr(1).match(reg);
  let context = "";
  r && (context = r[2]);
  reg = null;
  r = null;
  return context;
};

// 心跳检查(看看websocket是否还在正常连接中)
let heartCheck = {
  timeout: 15000,
  timeoutObj: null,
  serverTimeoutObj: null,
  // 重启
  reset() {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
    this.start();
  },
  // 停止
  stop() {
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
  },
  // 开启定时器
  start() {
    this.timeoutObj && clearTimeout(this.timeoutObj);
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    // 15s之内如果没有收到后台的消息,则认为是连接断开了,需要重连
    this.timeoutObj = setTimeout(() => {
      writeToScreen("心跳检查,发送ping到后台");
      try {
        const sendData = { active: "heart" };
        wsObj.send(JSON.stringify(sendData));
      } catch (err) {
        writeToScreen("发送ping异常");
      }
      console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
      // 内嵌定时器
      this.serverTimeoutObj = setTimeout(() => {
        writeToScreen("没有收到后台的数据,重新连接");
        reconnect();
      }, this.timeout);
    }, this.timeout);
  },
};

2、页面使用:

先引入:

import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";

这是一个数据大屏的项目因为只有一个页面,我就把建立链接的方法放在了首页的mounted里面,你们可以放到main.js。

mounted() {
    connectWebsocket(
      // 地址
      "ws://后端提供的地址",
      // 传递给后台的数据
      {},
      // 成功拿到后台返回的数据的回调函数
      (res) => {
        let datas = JSON.parse(res); 
        let result = datas.data.data;
 		console.log(result,'返回结果,拿到之后该干啥干啥吧!')
      },
      // websocket连接失败的回调函数
      () => {
        console.log("失败的回调函数");
      }
    );
  },

http://t.csdn.cn/fiAsF文章来源地址https://www.toymoban.com/news/detail-741211.html

到了这里,关于vue封装和使用websocket的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2 封装 webSocket 开箱即用

    第一步:    下载 webSocket  第二步:   需要在 main.js 中 引入  第三步:     封装相关的连接和断开    相关代码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  第四步:  引入使用 到这步接收信息已经OK了(记得和后端配合)    使用

    2024年02月14日
    浏览(39)
  • 基于Vue3封装一个好用的Websocket

    在Vue3中使用Websocket可以让我们轻松地实现实时数据传输。为了方便使用,我们可以封装一个好用的Websocket类。 首先我们需要安装 ws 库来处理Websocket连接,使用以下命令进行安装: 我们可以新建一个 websocket.js 文件,在其中定义一个 Websocket 类,代码如下: 以上代码中,我们

    2024年02月04日
    浏览(92)
  • 在vue项目中webSocket封装(传token)

            在websocket中,目前未提供修改请求头字段的方法,参考其他的一些文章,依照他们的写法依然未能实现传递token,所有我和后端另辟蹊径,把token传在路径里面。         这样写就可以长久的建立链接。

    2024年04月29日
    浏览(29)
  • vue3+nodejs(websocket)实现监控拉rtsp流,使用flv.js+ffmpeg包(主要建立websocket是为了转码传流)

    关于拉取监控摄像头的流,我个人去查了很多资料,也是因为之前没有接触过这一模块,加上目前公司也没有后端去写接口,所以我直接用node去写websocket,与前端建立起通信,能够进行后续转码、传流,能够实现实时播放监控画面。 这里的rtsp流是要事先知道的,监控的这个

    2024年02月20日
    浏览(49)
  • vue2 封装 webSocket 开箱即用(或 uni.connectSocket)

    第一步:    下载 webSocket  第二步:   需要在 main.js 中 引入  第三步:     封装相关的连接和断开    相关代码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  第四步:  引入使用 到这步接收信息已经OK了(记得和后端配合)    使用

    2024年02月09日
    浏览(47)
  • Vue3封装全局WebSocket;全局可监听、可发送、心跳处理等;

    操作如下 可以在多个页面多个组件中进行监听/发送 代码简介 方便; 首先安装 tools-javascript 以及 tools-vue3 根据你的业务需求初始化 ws 在你的任何文件中直接调用即可 附加篇(也可不读 直接看文档 )

    2024年02月11日
    浏览(42)
  • ai问答:vue3+pinia+WebSocket 封装断线重连(实战)

    把 Socket 实例 挂载到全局 为方便梳理,请忽略 typescript ,一切尽在注释中 Socket封装(断线重连) 这个 WebSocket 类封装了 WebSocket 的连接、重连、发送数据等方法。 在 connect 方法中,它会连接 WebSocket ,并绑定相关事件监听。 在 onclose 事件中,它会调用 reconnect 方法进行重连。 recon

    2024年02月03日
    浏览(55)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(59)
  • Websocket的基本认识、使用与封装

    目录 一、Websocket是什么 二、Websocket的基本使用 使用介绍 第一步 第二步 第三步 第四步 常用API介绍  WebSocket(url[, protocols]) WebSocket.readyState  WebSocket.send(data) WebSocket.close([code[, reason]]) WebSocket.bufferedAmount WebSocket.extensions WebSocket.binaryType 三、Websocket的封装 vue代码 react代码     

    2024年02月03日
    浏览(31)
  • uniapp websocket的使用和封装

    在uniapp中socket分为两种形式,第一种适用于只有一个socket链接,第二种适用于多个socket链接。传送门 这里以socketTask为列子封装 在utils新建一个文件 在你要使用的页面引入,我这是聊天那种,所以我在拿到用户信息之后连接socket。 直接上源码 我这里是找了其他人的,然后改

    2024年02月19日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包