技术标签: webview vue.js javascript
版本号:4.1.2
1、目录结构:(link.js、emit.js、on.js、methods.js)
(1)、link.js(连接)
import io from 'socket.io-client'
import {socket_on} from './on.js'
/**
* @enter socket信息
* @callback 回调
*/
//socket建立链接
export const link_socket = (enter, callback = () => {}) => {
if(!window.$socket_arr) window.$socket_arr = []//初始化socket集合
var obj = {
url: enter.url,
socket: null,
success: false // 是否链接成功
}
let timer = null//链接超时
//这里是避免多个socket链接
window.$socket_arr.forEach(item => {
if(enter.url === item.url){
obj = item
if(item.success) {
if(timer) clearTimeout(timer)//清空超时
callback({code:1, data:'已连接'})
}else{
setTimeout(() => {
link_socket(enter, callback)
},1000)
}
}
});
if(obj.socket && !obj.success) return
if( !obj.socket ){
obj.socket = io.connect(enter.url, {
reconnection: true,// 是否自动重连
reconnectionDelay: 500,// 重连间隔时间
reconnectionAttempts: 1000000000000,// 尝试重连次数
reconnectionDelayMax: 5000,// 重连间隔时间上限,即最长的重连间隔时间
...enter.data
})
window.$socket_arr.push(obj)
}
//链接成功
obj.socket.on('connect', (data) => {
if(timer) clearTimeout(timer)
obj.success = true
callback({code:1, data:'连接成功'})
console.log(obj.socket)
socket_on('public', obj.socket) // 开启public监听
socket_on('public2', obj.socket) // 开启public2监听
});
//断开链接
obj.socket.on('disconnect', (Reason) => {
obj.success = false
if(Reason === 'transport close') console.log('断开链接:连接被关闭(例如:用户失去连接,或者网络由WiFi切换到4G)')
else if(Reason === 'io server disconnect') console.log('断开链接:服务器使用socket.disconnect()强制断开了套接字。')
else if(Reason === 'io client disconnect') console.log('断开链接:使用socket.disconnect()手动断开socket。')
else if(Reason === 'ping timeout') console.log('断开链接:服务器没有在pingInterval + pingTimeout范围内发送PING')
else if(Reason === 'transport error') console.log('断开链接:连接遇到错误(例如:服务器在HTTP长轮询周期期间被杀死)')
else console.log('断开链接:', Reason)
});
obj.socket.on('connect_error', (data) => {
console.log(`连接错误,重连中:${data}`)
});
// 首次连接超时处理(5s)
timer=setTimeout(() => {
if(!obj.success){
obj.socket.close()
window.$socket_arr = window.$socket_arr.filter(item => {
return item.url! = obj.url
})
callback({code:0, data:'连接超时,检查服务'})
}
},5000)
}
(2)、emit.js(发送)
//发送事件
/**
* @emitName 发送方法名
* @enter 发送内容
*/
export const socket_emit = async (emitName='Public', enter ) => {
return new Promise(async resolve => {
var res = await getsocket(enter)
if(res.code ===0) resolve(res)
else{
res.data.emit(emitName,enter)
resolve({code:1, data:'发送成功'})
}
})
}
//获取 socket 对象
export const getsocket = (enter) => {
var obj = {url:enter.url, socket:null, success:false} //success:是否链接成功
window.$socket_arr.forEach(item => {
if(enter.url === item.url) obj=item
});
if(!obj.socket) return {code:0, data:'没查到socket连接'}
if(!obj.success) return {code:0, data:'socket未正常连接'}
return {code:1, data:obj.socket}
}
(3)、on.js(监听)
import Methods from './methods.js'
//监听事件
export const socket_on = async (onName = 'public', socket) => {
//是否存在监听,避免重复监听
let isOn = socket._callbacks[`$${onName}`]
if(isOn) return
socket.on(onName, async (data, callback) => {
// data 收到的内容
// callback 给服务端回调消息
//执行相对应的方法
if(Methods[onName]) Methods[onName](data, callback)
});
}
(4)、methods.js
// 监听事件相对应执行的方法
const public = async(data, callback) => {
console.log('执行public命令')
callback('回调给服务端,执行public命令成功')
}
const public2 = async(data, callback) => {
console.log('执行public2命令')
callback('回调给服务端,执行public2命令成功')
}
const methods={
public,
public2
}
export default methods;
使用方法:
// 1、连接
import {link_socket} from './socket/link.js'
let socket_enter = {
url:'http://127.0.0.1:3001',
data:{
// path:'/ws/socket.io', //url路由
// extraHeaders:{} // socket连接携带请求头
}
}
link_socket(socket_enter, res => {
console.log('连接回调', res)
})
// 2、发送消息
import {socket_emit} from './socket/emit.js'
socket_emit('方法名', ...发送内容)
// 3、监听消息(socket对象可以在emit.js文件里getsocket方法获取)
import {socket_on} from './socket/on.js'
socket_on('方法名', socket对象)
# 官方文档:https://socket.io/docs/v4/client-api/#flag-volatile
第一次发文章,用的上麻烦点个心~,后面会持续分享一些开发经验
文章浏览阅读1.4k次。以下是从网上多方面收集而来。 qsort函数是ANSI C标准中提供的,其声明在stdlib.h文件中,是根据二分发写的,其时间复杂度为n*log(n),其结构为:void qsort(void *base,size_t nelem,size_t width,int (*Comp)(const void *,const void *));其中:*base 为_qsort函数受类型限制
文章浏览阅读1.6k次。/*****题目描述妈妈每天都要出去买菜,但是回来后,兜里的钱也懒得数一数,到底花了多少钱真是一笔糊涂帐。现在好了,作为好儿子(女儿)的你可以给她用程序算一下了,呵呵。输入输入含有一些数据组,每组数据包括菜种(不含空格的字串),数量w(计量单位不论,一律为double型数)和单价p(double型数,表示人民币元数),因此,每组数据的菜价就是数量乘上单价啊。菜种、数量和单价之间都有空格隔开..._c语言 菜价计算
文章浏览阅读1.1k次,点赞2次,收藏6次。vue动态修改伪元素的样式和属性,vue绑定样式,vue计算属性,vue监视属性,CSS的动态修改_vue修改伪元素样式
文章浏览阅读1.4k次,点赞21次,收藏23次。更新至2023年各省环境规制数据合集(七种测算方法)_环境规制数据
文章浏览阅读366次。光热电站的结构如图 2-2 所示。与传统的火电机组发电原理类似,光热电站的热循环系统通过传热流体传递和交换热量,产生高温蒸汽驱动汽轮机,实现热能到电能的能量转换。由于光热电站的热循环系统和储热装置的配置与传统火电机组类似,使得光热发电具有与传统火电机组相当的调节特性,可以促进可再生能源的并网消纳。在“碳中和,碳达峰”的背景下,为挖掘光热电站的供能潜力,提高能源系统的能源利用效率以及降低系统的碳排放总量,本文提出将光热电站引入综合能源系统中,研究光热电站的不同供能模式及其对综合能源系统优化调度的影响。_含综合能源的电网优化调度仿真
文章浏览阅读3.8k次。基于HTML5的可预览多图片Ajax上传by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1923一、关于图片上传什么什么的在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张。要一次上传多图,做法是借助于flash。例如s
文章浏览阅读2.8k次。背景知识:1. 水晶报表主要用于设计和产生报表, 很多企业级系统都可以拿来集成,使得系统数据展示给客户2. 水晶报表的模板是rpt文件,其中包含了一些数据源,以及具体的展示内容,rpt文件需要用Crytal软件创建编辑本文记录一下水晶报表的数据源配置(1,2,3)ReportClientDocument clientDoc = new ReportClientDocumen_水晶报表数据源
文章浏览阅读7.5k次,点赞11次,收藏47次。文章目录一、PMW3901传感器介绍1. 主要特性2. 主要参数3. 封装和引脚图4. Power States & Sequence二、ATK-PMW3901模块说明1. 主要特性&参数2. 硬件连接图3. 原理图三、一、PMW3901传感器介绍PMW3901 是 PixArt 公司最新的高精度低功耗光学追踪模组,可直接获取 xy 方向运动信 息 , 对地高度 8cm ..._pmw3901
文章浏览阅读121次。本页面旨在介绍如何创建站点地图并将其提供给 Google。如果您刚开始接触站点地图,请。Google 支持由定义的站点地图格式。每种站点地图都有各自的优势和不足之处;请选择最适合您的网站和设置的站点地图格式(Google 没有偏好)。XML 站点地图是用途最广的站点地图格式。该格式易于扩展,可用于提供关于和内容的其他数据,以及。RSS、mRSS 和 Atom 1.0 站点地图在结构上与 XML 站点地图类似,但它们通常最容易提供,因为 CMS 会自动创建这些站点地图。_google站点地图怎么创建
文章浏览阅读539次。ACS应该发送多次UDP Connection Request消息,以减少消息丢失的可能性,由于UDP消息不可靠性, ACS发送给同一CPE的多个UDP Connection Request消息的内容(包括消息ID,时间戳和cnonce等)必须完全相同。)消息通知ACS(HeMS)基站设备在NAT之后,并在SOAP报文中携带CPE在公网的IP&Port。ACS获取到CPE公网IP&Port后,在ACS主动连接CPE场景时通过发送。后,延续TR-069协议的原有流程,发送Inform(_tr069中stun报文交互
文章浏览阅读2.4k次。Java Rest-assured 是使用代码来实现接口的请求,封装业务流程,对于公司的业务支持比较高,灵活度很强,可以通过代码的方式打造自己公司的接口自动化框架,上手有点难度,需要有Java 编程基础,才可以使用。_接口自动化测试框架
文章浏览阅读1.7w次,点赞14次,收藏33次。这是java语言程序设计的一道考题。_java统计字符串中字母,数字及其他字符的个数