【前端】websocket 讲解与项目中的使用

简介: 【前端】websocket 讲解与项目中的使用


1、SSE(Server-sent Events)

SSE(Server-sent Events)是 WebSocket 的一种轻量代替方案,使用 HTTP 协议。 => Server-Sent Events 教程

2、stomp 介绍

3、MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议

MQTT JavaScript 客户端库

MQTT 入门介绍

4、课外阅读:[WebSocket 是什么原理?为什么可以实现持久连接?

]( )

源代码

==================================================================
import { EventLsbridge } from ‘@/common/eventLsbridge’
import { loadFromSession } from ‘@/common/session-storage’
import { Message } from ‘element-ui’
const timer = {
reconnectObj: null,
wsTimeoutObj: null,
serverTimeoutObj: null,
// 重连时间间隔(s)
reconnectTime: 3
}
const state = {
ws: null,
// 心跳时间(s)
wsTimeout: 20,
// 等待心跳响应时间(s),等待心跳的响应时间要大于心跳时间4s以上
waitHeartTime: 24
}
const mutations = {
set_reconnectObj: (state, val) => {
state.reconnectObj = val
},
}
const actions = {
// 心跳重置
wsHearReset({ dispatch }) {
clearTimeout(timer.serverTimeoutObj)
clearTimeout(timer.wsTimeoutObj)
dispatch(‘wsHeartStart’)
},
// 开启心跳
wsHeartStart({ state, dispatch }) {
timer.wsTimeoutObj = setTimeout(() => {
if(state.ws && state.ws.readyState == 1) {
state.ws.send(‘’)
} else {
dispatch(‘handlerWSError’)
}
}, state.wsTimeout * 1000)
timer.serverTimeoutObj = setTimeout(() => {
console.log(‘接收心跳异常!’)
dispatch(‘handlerWSError’)
}, state.waitHeartTime * 1000)
},
// 初始化ws连接
initWebsocket({ dispatch, state }) {
if (state.ws) {
return
} else {
return new Promise(resolve => {
let url = ${process.env['VUE_APP_WEBSOCKET']}/websocket
state.ws = new WebSocket(url)
state.ws.addEventListener(‘open’, e => {
console.log(‘长连接连接成功’)
clearTimeout(timer.reconnectObj)
dispatch(‘wsHeartStart’)
})
state.ws.addEventListener(‘message’, e => {
dispatch(‘wsHearReset’)
dispatch(‘handlerWSMessage’, e)
})
state.ws.addEventListener(‘close’, e => {
console.log(‘ws close’)
dispatch(‘handlerWSClose’, e)
})
state.ws.addEventListener(‘error’, e => {
console.log(‘ws error’)
dispatch(‘handlerWSError’, e)
})
})
}
},
handlerSend({state}, id = -1) {
if(!state.ws) {
return
}
if(state.ws.readyState == 1) {
state.ws.send(
JSON.stringify({
id
})
)
}
},
handlerWSClose({ state }, e) {
state.ws?.close()
},
handlerWSError({state, dispatch}, e) {
console.log(‘ws-error’)
state.ws?.close()
state.ws = null
dispatch(‘reconnect’)
},
reconnect({state, commit, dispatch}) {
console.log(‘ws-重连’)
clearTimeout(timer.wsTimeoutObj)
clearTimeout(timer.serverTimeoutObj)
clearTimeout(timer.reconnectObj)
if (loadFromSession(‘userInfo’)?.userId) {
Message.warning(‘网络出现异常,请检查网络后尝试刷新页面’)
}
timer.reconnectObj = window.setTimeout(() => {
dispatch(‘initWebsocket’)
timer.reconnectTime += 4
if(timer.reconnectTime > 60) {
timer.reconnectTime = 20
}
}, timer.reconnectTime * 1000)
},
// ws回调
handlerWSMessage({state}, e) {
let respData = {}
try {
respData = JSON.parse(e.data)
} catch (e) {
// not todo
}
if (respData?.data) {
EventLsbridge.vueEmit(EventLsbridge.eventName.wsData, respData)
}
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
相关文章
|
1月前
|
前端开发 JavaScript
前端项目公共组件封装思想
该文介绍了如何封装通用组件,如表单搜索、表格展示和分页器。首先,通过抽离出公共部分,创建`TableContainer`组件,利用具名插槽插入`navbar`和`table`,并通过props传递标题。然后在父组件中使用具名插槽和子组件实现具体功能。文中还展示了更复杂的组件封装示例,通过props实现数据双向绑定,以`el-pagination`为例,利用`sync`修饰符和`computed`属性监听并更新父组件状态,实现分页功能。文章最后提到了内容来源于哪。
|
1月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
1月前
|
资源调度 前端开发
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
88 0
|
1天前
|
前端开发 Shell 容器
前端练习小项目——视觉冲击卡片
前端练习小项目——视觉冲击卡片
|
11天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
29 3
|
10天前
|
Web App开发 运维 前端开发
从0开始搭建一个前端项目的架子
从0开始搭建一个前端项目的架子
12 1
|
18天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
26天前
|
前端开发 JavaScript
前端综合练手小项目
前端综合练手小项目
|
10天前
|
JavaScript 前端开发 Java
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
18 0
|
1月前
|
JSON JavaScript 前端开发
web前端 第一阶段面试题,2024年最新Web前端面试项目经验
web前端 第一阶段面试题,2024年最新Web前端面试项目经验