vue3之 websoket发送消息

在这里插入图片描述

1.封装websoket

var ws = null; //建立的连接
var lockReconnect = false;//是否真正建立连接
var timeout = 6 * 1000 * 5;//30秒一次心跳
var timeoutObj = null;//心跳心跳倒计时
var serverTimeoutObj = null;//心跳倒计时
var timeoutnum = null;//断开 重连倒计时
var global_callback = null; //监听服务端消息
var openId = localStorage.getItem('openId')
// uri: 长链接地址<br>// jwt: 前后端连接凭证, 按需添加<br>// callback: 服务端消息回调函数
export function createWebscoket(uri, callback) {global_callback = callbackws = new WebSocket(uri)ws.onopen = () => {lockReconnect = truews.send(JSON.stringify({ "userId": openId, "toUserId": openId, "msgType": 0 }));//开启连接心跳start()}ws.onmessage = onMessagews.onerror = onError// ws.onclose = onClosews.onsend = onSend
}//发送消息
export function onSend(message) {console.log(`发送消息: ${message}`)console.log(ws.readyState)if (ws.readyState != 1) {reset()// reconnect()// ws.send(message)} else {ws.send(message)}}//接受服务端消息
// export function onMessage(res) {
//     let msgData = res ? res.data : {}
//     console.log(msgData)
//     if (typeof msgData != 'object') {
//         // var data = msgData.replace(/\ufeff/g, "");
//         var message = JSON.parse(msgData);
//         if (message.code == 0) {
//             return 
//         } else {
//             //重置心跳
//             reset()
//         }
//         //服务端消息回掉
//         // ws.onmessage()
//         global_callback(message)
//         // console.log(   ws.onmessage())
//     }
// }
export function onMessage(res){let msgData = res ? res.data : {}if (typeof msgData != 'object' && msgData != 'Connect success') {var data = msgData.replace(/\ufeff/g, "");var message = JSON.parse(data)//服务端消息回掉global_callback(message)//重置心跳reset()}}//连接失败
export function onError() {console.log('连接失败')ws.close()ws = nulllockReconnect = false
}//连接关闭
export function onClose() {console.log('连接关闭')
}
//断开关闭
export function closeWs() {if (lockReconnect) {ws.close()ws = nulllockReconnect = false}
}// 发送心跳
export function start() {timeoutObj && clearTimeout(timeoutObj);serverTimeoutObj && clearTimeout(serverTimeoutObj);timeoutObj = setTimeout(function () {//这里发送一个心跳,后端收到后,返回一个心跳消息if (ws.readyState == 1) { //如果连接正常ws.send(JSON.stringify({ "userId": openId, "toUserId": openId, "msgType": 0 }));// ws.send(data)} else {  //否则重连reconnect()}serverTimeoutObj = setTimeout(function () {//超时关闭ws.close();}, timeout);}, timeout + 3000)
}
//重置心跳
export function reset() {var that = this;//清除时间clearTimeout(timeoutObj);//清除时间clearTimeout(serverTimeoutObj);start(); //重启心跳
}//重新连接
export function reconnect() {if (lockReconnect) {return;};lockReconnect = true;//没连接上会一直重连,设置延迟避免请求过多timeoutnum && clearTimeout(timeoutnum);timeoutnum = setTimeout(function () {createWebscoket();//新连接lockReconnect = false;}, 5000);
}

2.页面调用

import { createWebscoket, onSend, closeWs, start } from '@/utils/socket.js'
onMounted(() => {let host = process.env.VUE_APP_WS_HOST //ws地址createWebscoket(host + token.value, messagesCallBack)})//新消息监听
const messagesCallBack = (msg) => {console.log(msg)
}//断开socket
const closeWsTxt = () => {closeWs()
}//发送socket消息到服务器
const sendMessagext = (data) => {onSend(JSON.stringify(data))
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646712.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DA14531平台secondary_bootloade工程修改笔记

DA14531平台secondary_bootloade工程修改笔记 1.支持在线仿真 初始时加入syscntl_load_debugger_cfg(); 表示可以重复Jlink连接调试仿真 2.支持串口烧录&#xff0c;和支持单线线写 utilities\secondary_bootloader\includes\bootloader.h /************** 2-wire UART supp…

Siamese network 孪生神经网络--一个简单神奇的结构

1.名字的由来 Siamese和Chinese有点像。Siam是古时候泰国的称呼&#xff0c;中文译作暹罗。Siamese也就是“暹罗”人或“泰国”人。Siamese在英语中是“孪生”、“连体”的意思&#xff0c;这是为什么呢&#xff1f; 十九世纪泰国出生了一对连体婴儿&#xff0c;当时的医学技术…

点赞!HashData连续三年获评数据猿“最具投资价值企业奖”

近日&#xff0c;由上海市经济和信息化委员会、上海市科学技术委员会指导&#xff0c;数据猿和上海大数据联盟共同主办的“第六届金猿季&魔方论坛——大数据产业发展论坛”在上海举行。本次活动以“小趋势大未来”为主题&#xff0c;展示了大数据与人工智能、云计算、5G等新…

【jetson笔记】ubuntu设置代理解决访问github问题

目录 手机开启热点jetson设置代理查询手机ip地址设置反向代理设置全局代理仅设置github全局代理 手机开启热点 手机开启热点并打开clashclash中设置-覆写-启用允许来自互联网的连接确保手机可以访问githubjetson设备连接手机热点 jetson设置代理 查询手机ip地址 设置-我的设…

python csv柱状图统计

import os import pandas as pd import numpy as np import matplotlib.pyplot as plt# 获取当前工作目录 current_directory os.getcwd()# 构建文件路径 file_name cliff.csv file_path os.path.join(current_directory, file_name)# 从CSV文件中读取数据 df pd.read_csv(…

仰暮计划|“她已跨过了八旬的门槛,一个人见证了时光洪流的智慧年代”

倾听与关爱 2023年7月4日中午&#xff0c;我跟随“羽翼”社会实践服务队、党员服务小组一起到柏桥村完成我们本次三下乡的调研任务&#xff0c;通过走访当地居民并与当地党群服务中心干部进行交谈了解当地乡村振兴落实情况。 在走往柏桥村的路上&#xff0c;我有幸遇到了教师…

【操作系统】实验六 分析源代码

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

在React中使用React.createRef:更优雅的DOM引用方式

在React中使用React.createRef&#xff1a;更优雅的DOM引用方式 React提供了多种方式来引用DOM元素&#xff0c;其中React.createRef()是一种更为现代、更优雅的方式。在这篇博客中&#xff0c;我们将深入了解React.createRef()的应用&#xff0c;以及它为开发者带来的便利。 …

Vulnhub-FUNBOX: GAOKAO渗透

文章目录 前言1、靶机ip配置2、渗透目标3、渗透概括 开始实战一、信息获取二、爆破FTP服务三、GetShell四、提权 前言 由于在做靶机的时候&#xff0c;涉及到的渗透思路是非常的广泛&#xff0c;所以在写文章的时候都是挑重点来写&#xff0c;尽量的不饶弯路。具体有不不懂都的…

仰暮计划|“他说,他是出生于两个时代的人”

凌保庆老爷爷&#xff0c;1942年10月4日出生&#xff0c;今年82岁&#xff0c;家住在河南省登封市唐庄乡磨沟村。7月28日&#xff0c;我作为仰暮计划小队的一员去拜访了这位老人&#xff0c;听凌爷爷讲述了他的故事。 走进这户人家的时候&#xff0c;凌爷爷正在书房里。虽然家…

Spring第三天

今日目标 能够理解AOP的作用 能够完成AOP的入门案例 能够理解AOP的工作流程 能够说出AOP的五种通知类型 能够完成"测量业务层接口万次执行效率"案例 能够掌握Spring事务配置 一、AOP 1 AOP简介 问题导入 问题1&#xff1a;AOP的作用是什么&#xff1f; 问题2&am…

✨JavaScript 第十一章(深入理解null与undefined)

在JavaScript的世界里&#xff0c;null和undefined是两个表示“没有值”的概念&#xff0c;但它们之间有着微妙的差别。undefined是当一个变量被声明了&#xff0c;但没有被赋值时&#xff0c;它的默认值。这是JavaScript引擎的工作&#xff0c;我们通常不会手动设置一个变量为…

【MySQL实践】一个隐蔽的问题导致 Field ‘xxx‘ doesn‘t have a default value

文章目录 1.背景2.问题处理3.思考与总结 1.背景 最后在公司的后台系统上遇到了一个线上问题&#xff0c;是在插入某个表数据的时候出现了数据库的插入异常&#xff0c;即&#xff1a;java.sql.SQLException: Field xxx doesnt have a default value&#xff0c;这其实是一个比…

javaweb-js-vue基础知识(持续更新中)

sshu 双向数据绑定 ---------------------------------------------------------- 注意淘宝镜像最新网址发生变化&#xff0c;记得改&#xff0c;不是老师现在用的那个&#xff0c;不然会下载出错&#xff01;&#xff01;&#xff01; 没有的&#xff1a;ctrlshiftp&#xff…

apipost和curl收不到服务器响应的HTTP/1.1 404 Not Found

windows的apipost发送请求后&#xff0c;服务器响应了HTTP/1.1 404 Not Found&#xff0c;但是apipost一直显示发送中。 linux上的curl也一样。 使用wireshark抓包发现收到了响应&#xff0c;但是wireshark识别不了&#xff08;图中是回应404后关闭了连接&#xff09;&#xff…

fsx 简介:适用于 JavaScript 的现代文件系统 API

JavaScript 运行时中的文件系统 API 已经很久没有这么好了&#xff0c;这是我试图做出一个更好的文件系统 API 的尝试。 我们今天拥有的 JavaScript API 比十年前要好得多。考虑一下从 XMLHttpRequest 到 fetch() 的转变&#xff1a;开发者体验显著改善&#xff0c;允许我们编…

Chatgpt的崛起之路

Chatgpt的崛起之路 背景与发展历程背景发展历程 技术原理第一阶段&#xff1a;训练监督策略模型第二阶段&#xff1a;训练奖励模型第三阶段&#xff1a;采用强化学习来增强模型的能力。 国内使用情况及应用的领域面临的数据安全挑战与建议ChatGPT获取数据产生的问题数据泄露问题…

@Scheduled笔记240124

Scheduled的参数 常用的Scheduled注解属性&#xff1a; fixedRate属性&#xff1a;根据固定的频率执行任务。 Scheduled(fixedRate 5000) // 每隔5秒执行一次fixedDelay属性&#xff1a;任务完成后&#xff0c;等待一段固定的时间再执行下一次。 Scheduled(fixedDelay 5000…

HJ12 字符串反转【C语言】

【华为机试题 HJ12】字符串反转 描述输入描述:输出描述:示例1参考代码1描述 接受一个只包含小写字母的字符串,然后输出该字符串反转后的字符串。(字符串长度不超过1000) 输入描述: 输入一行,为一个只包含小写字母的字符串。 输出描述: 输出该字符串反转后的字符串…

Unity串口通信教程:基础知识和实践指南

概述 Unity在游戏开发和实时应用中广泛使用。除了图形渲染和游戏逻辑&#xff0c;Unity还能与外部硬件设备进行串口通信。本文将介绍如何在Unity中实现串口通信&#xff0c;包括基础设置、数据读写、数据校验和异或操作。 基础设置 引入命名空间 首先&#xff0c;需要引入Syste…