首页 > 其他分享 >vue3之 websocket

vue3之 websocket

时间:2023-01-09 16:24:22浏览次数:37  
标签:function console log getAlarmData vue3 websocket data

前提:vue3+ts 项目使用websocket

一、在utils文件夹中创建websocket.ts文件

/**
 * websocket
 */

// const wsUrl = `ws://`+window.location.host+`/emergency/webSocket`; // websocket 默认连接地址
let websocket: any; // 用于存储实例化后websocket
let isConnect = false; // 连接标识 避免重复连接
let rec: any; // 断线重连后,延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
let parameter = '';

// 创建websocket
function creatWebSocket(getAlarmData:Function) {
  console.log("websocket==================");
  // 判断当前浏览器是否支持WebSocket
  if ("WebSocket" in window) {
    console.log("当前浏览器 windows");
  } else if ("MozWebSocket" in window) {
    console.log("当前浏览器 windows");
  } else {
    console.log("当前浏览器 Not support websocket");
  }

  try {
    initWebSocket(getAlarmData); // 初始化websocket连接
  } catch (e) {
    console.log("尝试创建连接失败");
    reConnect(getAlarmData); // 如果无法连接上 webSocket 那么重新连接!可能会因为服务器重新部署,或者短暂断网等导致无法创建连接
  }
}
// 初始化websocket
function initWebSocket(getAlarmData:Function) {
  console.log('parameter',parameter)
  if(parameter){
    websocket = new WebSocket(`${wsUrl}?id=${parameter}`);
  }else{
    websocket = new WebSocket(wsUrl);
  }
  console.log("websocket:", websocket);

  websocket.onopen = function (e: any) {
    websocketOpen(e);
  };
  // 接收
  websocket.onmessage = function (e: any) {
    // 回传给页面
    console.log('消息推送')
    getAlarmData(e);
  };

  // 连接发生错误
  websocket.onerror = function () {
    console.log("WebSocket连接发生错误");
    isConnect = false; // 连接断开修改标识
    reConnect(getAlarmData); // 连接错误 需要重连
  };

  websocket.onclose = function (e: any) {
    websocketclose(e);
  };
}

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

// 创建连接
function websocketOpen(e: any) {
  console.log("连接成功");
  sendWebSocket
}
// 数据接收
function websocketonmessage(e: any) {
  console.log("数据接收", e.data);
  // let data = JSON.parse(decodeUnicode(e.data))
}
// 关闭
function websocketclose(e: any) {
  console.log(e);
  isConnect = false; // 断开后修改标识
  console.log("connection closed (" + e.code + ")");
}

// 数据发送
function websocketsend(data: any) {
  console.log("发送的数据", data,JSON.stringify(data));
  websocket.send(JSON.stringify(data));
}

// 实际调用的方法==============

// 发送
function sendWebSocket(data: any,getAlarmData:Function) {
  //发送数据
  parameter = data;
  if (websocket&& websocket.readyState === websocket.OPEN) { // 开启状态
    websocketsend(data);
  } else { // 若 未开启 / 正在开启 状态 ,则等待1s后重新调用
    setTimeout(function () {
      creatWebSocket(getAlarmData);
    }, 1000);
  }
}

// 关闭
let closeWebSocket = () => {
  websocket.close();
};
//导出方法
export {
  creatWebSocket,
  sendWebSocket,
  closeWebSocket,
};

二、在需要使用websocket的页面引用

import { closeWebSocket,sendWebSocket } from '/@/utils/websocket';
components: { closeWebSocket,sendWebSocket },

//获取到返回的数据
const getAlarmData = (data:any)=>{
  formLogin.value = JSON.parse(data.data)
}
// 页面加载时
onMounted(() => {
 //yearDay.value发送的数据
  sendWebSocket(yearDay.value,getAlarmData)
});
// 销毁websocket
onUnmounted(()=>{
  closeWebSocket()
})

标签:function,console,log,getAlarmData,vue3,websocket,data
From: https://www.cnblogs.com/cyapi/p/17037361.html

相关文章

  • vue3+vite2 vite.config.js 配置
    vite配置官方文档:https://cn.vitejs.dev/config/shared-options.html#base 开发服务器选项-serverserver:{//host:指定服务器应该监听哪个ip地址。如果设置为......
  • 解决Vue3中定时器自动销毁问题
    解决Vue3中定时器自动销毁问题1.前言在近期的一个Vue项目中使用到了定时器,由于本人没有系统学习过前端,对前端项目的水平仅限于能够使用,一些细节上可能存在问题,比如定时器......
  • Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
     一、 provide和inject1:在父级组件中提供数据     语法:provide('提供给子组件的变量名',提供给子组件的数据)   2:在子级组件中获取收据  ......
  • VUE3.0+Vite 多页面应用配置
    目录VUE3.0+Vite多页面应用配置核心原理多页面应用模式(核心)Vue路由配置(示例)vite.config.js(示例)多页面跳转构建流程代码结构构建流程源码链接VUE3.0+Vite多页面应用配置......
  • vue2,vue3同时监听多个数据变化
    我是使用vue计算属性(computed)将需要监听的数据拼接在一起,再通过watch进行监听1.vue普通写法<template><divid="app"><el-inputv-model.number="valu......
  • 客服系统即时通讯IM开发(一)基于WebSocket实现实时获取消息【唯一客服】网站在线客服系
    我在实现在客服系统的时候,前端是基于WebSocket来实时收取服务端消息的,详细的解释下 即时通讯一种常用的方法是使用WebSocket。WebSocket是一种通信协议,它允许浏览器和......
  • Vue3单击新增添加新的input
     效果图: 代码:<template><div><inputtype="text"v-for="(item,i)ofitems"v-model="items[i]":key="i"@input="inp"><button@click="onAdd">......
  • Vue3 中的响应式api
    一、setup文件的认识 特点1:script中间的内容就是一个对象特点2:script在第一层定义的方法或者变量=>就是这个对象属性 =>顶层的绑定回被暴露给模板(模......
  • Vue2和Vue3实现响应式原理
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>Document</title> </head> <body> <scripttype="text/javascript"> //源数据 letpers......
  • vue3+vite配置多页面
    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度。比如我们有很多H5页面,并且相互独立,比如报修,购卡,计价规则等等,那我们如......