GOFLY在线客服-使用reconnect-websocket.js实现断线自动重连机制-GO语言实现开源独立部署客服系统
2023-02-18 15:36:30 时间
开发websocket应用,最难处理的就是断线后的自动重连
现在GOFLY在线客服使用reconnect-websocket.js就可以非常简单轻松的实现断线重连
reconnect-websocket.js的机制是,当连接websocket服务的过程中,如果连不上,会自动进行指定次数的重试
如果连接成功后回调onOpen方法以后,会把重试次数清空,因此如果是连接已经成功,但是后端主动关闭连接,这个库会不断的进行连接
这个问题也一并处理了下
核心代码在下面,是cdn引入的vue以及element-ui ,GOFLY也是这样的前端架构
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- Import style --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" /> <!-- Import Vue 3 --> <script src="https://cdn.jsdelivr.net/npm/vue@next"></script> <!-- Import component library --> <script src="https://cdn.jsdelivr.net/npm/element-plus"></script> </head> <body> <div id="app"> <el-button>${ message }</el-button> </div> <script src="../../js/reconnect-websocket.js"></script> <script> const App = { compilerOptions: { delimiters: ['${', '}'], comments: true }, data() { return { message: "Hello Element Plus", apiHost:"ws://gofly.sopans.com/ws_visitor?visitor_id=efccd385-cdfe-41ed-8dfd-ab1faa732996&to_id=taoshihan", websocket:null, websocketOpenNum:0, websocketMaxOpenNum:20, websocketClosed:true, }; }, methods: { //初始化websocket连接 initWebsocketConn() { this.websocket = new ReconnectingWebSocket(this.apiHost,null,{ debug:true });//创建Socket实例 this.websocket.onmessage = this.onMessage; this.websocket.onopen = this.onOpen; this.websocket.onerror = this.onError; this.websocket.onclose = this.onClose; }, onOpen(){ console.log("ws:onOpen"); if(this.websocketOpenNum>=this.websocketMaxOpenNum){ this.websocket.close(); } this.websocketOpenNum++; this.websocketClosed=false; this.ping(); }, onMessage(){ console.log("ws:onMessage"); }, onError(){ console.log("ws:onError"); }, onClose(){ console.log("ws:onClose"); this.websocketClosed=true; }, //心跳包 ping(){ var _this=this; setInterval(function () { if(!_this.websocketClosed){ _this.websocket.send("ping"); } },10000); }, }, //属性初始化 created(){ this.initWebsocketConn(); } }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
相关文章
- C++如何简单快速去除容器中的重复元素
- 让devc++使用c++11标准
- git常用指令
- 纯C++实现字符版坦克大战
- c++中类的数据成员初始化次序
- 纯C++实现字符版推箱子
- git下载子模块失败问题解决办法
- 基于Jekyll与Github Pages搭建博客
- HTML5项目笔记3:使用Canvas设计离线系统的Logo
- linux系统开mc服务器
- 红队技术-Cobaltstrike之Linux上线
- 权限维持-Linux后门
- 万万没想到,go的数据库操作,也能像php一样溜了
- Typora+PicGo+GitHub实现图片快速上传
- Linux计划任务服务程序
- 2022 如何在 GitHub 上搭建个人网站(github.io)
- 虚拟机安装linux无法访问外网解决办法
- 用过 mongodb 吧, 这三个大坑踩过吗?
- 教你配置windows上的windbg,linux上的lldb,打入clr内部这一篇就够了
- MongoDB 在评论中台的实践