【JavaScript】js的websocket封装调用

news2025/4/7 2:35:11

WebSocket 是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 WebSocket 通信协议于 2011 年被 IETF 定为标准 RFC 6455，WebSocketAPI 被 W3C 定为标准。

在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

在这里插入图片描述
现在，很多网站为了实现即时通讯 (real-time)，所用的技术都是轮询 (polling)。轮询是在特定的的时间间隔 (time interval)（如每 1 秒），由浏览器对服务器发出 HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的 HTTP request d 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求 (request)，然而 HTTP request 的 header 是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。

而最比较新的技术去做轮询的效果是 Comet – 用了 AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求 (reuqest)。

在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此 WebSocket 协议中，为我们实现即使服务带来了两大好处：

  1. Header
    互相沟通的 Header 是很小的 - 大概只有 2 Bytes

  2. Server Push
    服务器可以主动传送数据给客户端

1，建立webscoket.js，进行封装

import store from '../store/index.js'// 不引用一下的话，vuex存储会报错
let webpackIp = 'ws://1111111111111111'
let wsConnectionOrder = {
  $wsOrder: null,
  lockReturn: false,
  timeout: 60 * 1000 * 5,
  timeoutObj: null,
  timeoutNum: null,
  // 初始化webSocket长连接
  initWebSocket: function () {
    let user_id = JSON.parse(localStorage.getItem('user_id'))
    console.log('webpackid有了么----' + user_id)
    let wsuri = webpackIp + '?channel=' + user_id
    this.$wsOrder = new WebSocket(wsuri)
    this.$wsOrder.onopen = this.wsOpen
    this.$wsOrder.onclose = this.wsClose
    this.$wsOrder.onmessage = this.wsMsg
    this.$wsOrder.onerror = this.wsError
  },
  // 打开websocket
  wsOpen: function (e) {
    // 开始websocket心跳
    console.log('-----------------------------建立ghzchcgsdjkcgsdku-----------------------------------')
    wsConnectionOrder.startWsHeartbeat()
    console.log('orderws success')
  },
  wsClose: function (e) {
    wsConnectionOrder.reconnect()
  },
  wsMsg: function (e) {
    console.log('----------------------接收ghzchcgsdjkcgsdku------------------------')
    console.log(e)
    // 服务端发送来的消息存到vuex（先存储消息再重置心跳）
    store.commit('scoketData', {
      scoket: e.data
    })
    // 每次接收到服务端消息后 重置websocket心跳
    wsConnectionOrder.resetHeartbeat()
  },
  wsError: function (e) {
    wsConnectionOrder.reconnect()
  },
  // 重启websocket
  reconnect: function () {
    console.log('重启函数')
    let _this = this
    if (_this.lockReturn) {
      return
    }
    _this.lockReturn = true
    _this.timeoutNum && clearTimeout(_this.timeoutNum)
    _this.timeoutNum = setTimeout(function () {
      _this.initWebSocket()
      _this.lockReturn = false
    }, 1000)
  },
  // 开启websocket
  startWsHeartbeat: function () {
    let _this = this
    _this.timeoutObj && clearInterval(_this.timeoutObj)
    _this.timeoutObj = setInterval(function () {
      // 发送消息给服务端
      _this.$wsOrder.send('')
      // 判断websocket当前状态
      if (_this.$wsOrder.readyState !== 1) {
        _this.reconnect()
      }
    }, _this.timeout)
  },
  // 重置websocket心跳
  resetHeartbeat: function () {
    let _this = this
    clearInterval(_this.timeoutObj)
    _this.startWsHeartbeat()
  }
}
// 抛出websocket对象
export default {
  wsConnectionOrder
}

// import { store } from '../store/index.js'
// let webpackIp = 'ws://10.31.0.184:5679'
// // let webpackIp = 'ws://10.31.0.21:5678'
// let scoket = {
//   reconnect () { // 重新连接
//     var that = this
//     if (that.lockReconnect) {
//       return
//     }
//     that.lockReconnect = true
//     // 没连接上会一直重连，设置延迟避免请求过多
//     that.timeoutnum && clearTimeout(that.timeoutnum)
//     that.timeoutnum = setTimeout(function () {
//       // 新连接
//       that.initWebSocket()
//       that.lockReconnect = false
//     }, 5000)
//   },
//   initWebSocket () { // 初始化weosocket
//     let wsuri = ''
//     let user_id = JSON.parse(localStorage.getItem('user_id'))
//     console.log('webpackid有了么----' + user_id)
//     wsuri = webpackIp + '?channel=' + user_id
//     console.log(wsuri)
//     this.websock = new WebSocket(wsuri)
//     this.websock.onopen = this.websocketonopen
//     this.websock.onmessage = this.websocketonmessage
//     this.websock.onerror = this.websocketonerror
//   },
//   websocketonopen () { // 连接建立之后执行send方法发送数据
//     console.log('-----------------------------建立ghzchcgsdjkcgsdku-----------------------------------')
//     // 开启心跳
//     // this.start()
//     // let user_id = JSON.parse(localStorage.getItem('user_id'))
//     // this.websocketsend(JSON.stringify(user_id))
//   },
//   websocketonerror () { // 连接建立失败重连
//     this.initWebSocket()
//     // 重连
//     // this.reconnect()
//   },
//   websocketonmessage (e) { // 数据接收
//     console.log(this)
//     let that = this
//     console.log(that)
//     console.log('-----------------------------接收ghzchcgsdjkcgsdku-----------------------------------')
//     console.log(e)
//     store.commit('scoketData', {
//       scoket: e
//     })
//   },
//   websocketsend (Data) { // 数据发送
//     console.log('-----------------------------发送ghzchcgsdjkcgsdku-----------------------------------')
//     this.websock.send(Data)
//   },
//   websocketclose (e) { // 关闭
//     console.log('断开连接', e)
//   },
//   start () {
//     // console.log('开启心跳');
//     const self = this
//     let _num = 3
//     self.timeoutObj && clearTimeout(self.timeoutObj)
//     self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
//     self.timeoutObj = setTimeout(function () {
//       // 这里发送一个心跳，后端收到后，返回一个心跳消息，
//       if (self.websock.readyState === 1) { // 如果连接正常
//         // console.log(self.websock);
//         self.websock.send(heartCheck)
//       } else { // 否则重连
//         self.reconnect()
//       }
//       self.serverTimeoutObj = setTimeout(function () {
//         // 超时关闭
//         _num--
//         // 计算答复的超时次数
//         if (_num === 0) {
//           self.websocketclose()
//         }
//       }, self.timeout)
//     }, self.timeout)
//   },
//   reset () {
//     // console.log('重置心跳');
//     var that = this
//     // 清除时间
//     clearTimeout(that.timeoutObj)
//     clearTimeout(that.serverTimeoutObj)
//     // 重启心跳
//     that.start()
//   }
// }
// export default {
//   scoket
// }

// import { store } from '../store/index.js'
// import store from '../store/index.js'
// let Socket = ''
// let setIntervalWesocketPush = null
// /**
//  * 建立websocket连接
//  * @param {string} url ws地址
//  */
// const initWebSocket = url => {
//   Socket && Socket.close()
//   if (!Socket) {
//     console.log('建立websocket连接')
//     let webpackIp = 'ws://10.31.0.184:5679'
//     let user_id = JSON.parse(localStorage.getItem('user_id'))
//     let url = webpackIp + '?channel=' + user_id
//     Socket = new WebSocket(url)
//     Socket.onopen = onopenWS
//     Socket.onmessage = onmessageWS
//     Socket.onerror = onerrorWS
//     Socket.onclose = oncloseWS
//   } else {
//     console.log('websocket已连接')
//   }
// }

// /** 打开WS之后发送心跳 */
// const onopenWS = () => {
//   console.log('-----------------------------建立ghzchcgsdjkcgsdku-----------------------------------')
//   sendPing()
// }

// /** 连接失败重连 */
// const onerrorWS = () => {
//   Socket.close()
//   clearInterval(setIntervalWesocketPush)
//   console.log('连接失败重连中')
//   if (Socket.readyState !== 3) {
//     Socket = null
//     initWebSocket()
//   }
// }

// /** WS数据接收统一处理 */
// const onmessageWS = e => {
//   console.log('-----------------------------接收ghzchcgsdjkcgsdku-----------------------------------')
//   console.log(this)
//   console.log(e)
//   store.commit('scoketData', {
//     scoket: e.data
//   })
// }

// /**
//  * 发送数据但连接未建立时进行处理等待重发
//  * @param {any} message 需要发送的数据
//  */
// const connecting = message => {
//   setTimeout(() => {
//     if (Socket.readyState === 0) {
//       connecting(message)
//     } else {
//       Socket.send(JSON.stringify(message))
//     }
//   }, 1000)
// }

// /**
//  * 发送数据
//  * @param {any} message 需要发送的数据
//  */
// const sendWSPush = message => {
//   if (Socket !== null && Socket.readyState === 3) {
//     Socket.close()
//     initWebSocket()
//   } else if (Socket.readyState === 1) {
//     Socket.send(JSON.stringify(message))
//   } else if (Socket.readyState === 0) {
//     connecting(message)
//   }
// }

// /** 断开重连 */
// const oncloseWS = () => {
//   clearInterval(setIntervalWesocketPush)
//   console.log('websocket已断开....正在尝试重连')
//   if (Socket.readyState !== 2) {
//     Socket = null
//     initWebSocket()
//   }
// }
// /** 发送心跳
//  * @param {number} time 心跳间隔毫秒 默认5000
//  * @param {string} ping 心跳名称 默认字符串ping
//  */
// const sendPing = (time = 5000, ping = 'ping') => {
//   clearInterval(setIntervalWesocketPush)
//   Socket.send(ping)
//   setIntervalWesocketPush = setInterval(() => {
//     Socket.send(ping)
//   }, time)
// }
// export default {
//   initWebSocket
// }

2，main.js中引入

import wsConnectionOrder from './api/webscoket'
Vue.prototype.$scoket = wsConnectionOrder

3，在需要使用的页面，需要调用哪个方法，直接调用

this.$scoket.wsConnectionOrder.initWebSocket()

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

4.triton c++使用

4.triton c++使用

4.1 tritonclient c使用 4.2 triton c使用 4.3依赖安装 1.安装minconda Minconda是一个Anaconda的轻量级替代，默认只安装了python和conda，但可以通过pip和conda来安装所需要的包 1)下载 官网下载符合自己系统的版本Miniconda — conda documentation …
阅读更多...
SpringBoot：模块探究之spring-boot-devtools

SpringBoot：模块探究之spring-boot-devtools

Spring Boot 使我们能够快速设置和运行服务。为了进一步增强开发体验，Spring 发布了 spring-boot-devtools 工具——作为 Spring Boot-1.3 的一部分 spring-boot-devtools 是 Spring Boot 提供的一组开发工具，可以提高开发者的工作效率，开发者…
阅读更多...
软件设计中最关键的“开闭原则”，究竟指什么呢？

软件设计中最关键的“开闭原则”，究竟指什么呢？

前言 软件设计原则中有一条很关键的原则是开闭原则，就是所谓的对扩展开放，对修改关闭。个人觉得这条原则是非常重要的，直接关系到你的设计是否具备良好的扩展性，但也是相对比较难以理解和掌握的，究竟怎样的代码改动才…
阅读更多...
js实现匹配到文字设置为红色

js实现匹配到文字设置为红色

html <div class"search-text"> <el-input placeholder"请输入关键字" v-model"searchInput" class"searchinput"> <el-button type"primary" slot"append" icon"el-icon-search" clic…
阅读更多...
软考网络工程师怎么学习，用那些书籍？

软考网络工程师怎么学习，用那些书籍？

网工考试内容考试内容范围十分广&#xff0c;涉及到学科众多&#xff0c;既要考察基础理论&#xff0c;又要考察实践应用经验。如果你学习效率不高又追求效率的话最好报个培训班&#xff0c;有那么长的时间摸索不如几千块报个班。 比如计算机系统基础、网络操作系统、计算机应…
阅读更多...
Blazor组件自做十四 : Blazor FileViewer 文件预览 组件

Blazor组件自做十四 : Blazor FileViewer 文件预览 组件

Blazor FileViewer 文件预览 组件 目前支支持 Excel(.docx) 和 Word(.xlsx) 格式 示例: https://www.blazor.zone/fileViewers https://blazor.app1.es/fileViewers 使用方法: 1.nuget包 BootstrapBlazor.FileViewer 2._Imports.razor 文件 或者页面添加 添加组件库引用…
阅读更多...
U-net

U-net

文章目录1、U-net 简介2、U-net网络详解2.1、U-net结构图2.2、U-net主要创新2.3、U-net网络优势3、目前常用方法U-net改动4、U-net网络程序代码1、U-net 简介 U-net 发表于 2015 年&#xff0c;属于 FCN 的一种变体 。Unet 的初衷是为了解决生物医学图像方面的问题&#xff0c…
阅读更多...
锁分实锤！B站三体动画评分只有…好文！拆解追溯GPT-3.5各项能力起源；餐饮店后厨AI解决方案PreciTaste… | ShowMeAI资讯日报

锁分实锤！B站三体动画评分只有…好文！拆解追溯GPT-3.5各项能力起源；餐饮店后厨AI解决方案PreciTaste… | ShowMeAI资讯日报

&#x1f440;日报合辑 | &#x1f3a1;AI应用与工具大全 | &#x1f514;公众号资料下载 | &#x1f369;韩信子 &#x1f4e2; 分析了三体动画近万条评分数据&#xff0c;扒下B站最后一块遮羞布… https://www.bilibili.com/video/BV1JM411m7HU/ 命运多舛的《三体》动画终于…
阅读更多...
DBCO-PEG-FA二苯基环辛炔-聚乙二醇-叶酸；DBCO-PEG叶酸是一种无需任何催化剂即可进行化学反应的叶酸PEG衍生物

DBCO-PEG-FA二苯基环辛炔-聚乙二醇-叶酸；DBCO-PEG叶酸是一种无需任何催化剂即可进行化学反应的叶酸PEG衍生物

结构式&#xff1a; 英文名称&#xff1a;DBCO-PEG-Folic acid DBCO-PEG-FA 中文名称&#xff1a;二苯基环辛炔-聚乙二醇-叶酸 分子量&#xff1a;1k&#xff0c;2k&#xff0c;3.4k&#xff0c;5k 存储条件&#xff1a;-20C&#xff0c;避光干燥 用 途&#xff1a;仅…
阅读更多...
让人恶心的多线程代码，性能怎么优化

让人恶心的多线程代码，性能怎么优化

Java 中最烦人的&#xff0c;就是多线程&#xff0c;一不小心&#xff0c;代码写的比单线程还慢&#xff0c;这就让人非常尴尬。 通常情况下&#xff0c;我们会使用 ThreadLocal 实现线程封闭&#xff0c;比如避免 SimpleDateFormat 在并发环境下所引起的一些不一致情况。其实…
阅读更多...
转行学编程的人，都是怎么找到第一份程序员工作的？

转行学编程的人，都是怎么找到第一份程序员工作的？

对于我们打工人来说&#xff0c;薪资福利待遇好的公司可谓是人人争抢的香饽饽。 优秀的企业也越来越注重以薪酬福利吸引人才和留住人才。这一点&#xff0c;互联网大厂做的尤为出色。前有#OPPO给应届生开出40w&#xff0b;待遇#&#xff0c;今有#雷军给员工发放上亿股权激励#。…
阅读更多...
VSCode连GitHub的代理服务器配置和获取历史版本命令

VSCode连GitHub的代理服务器配置和获取历史版本命令

1. 在VSCode中配置代理&#xff1a; 在设置中查找“Proxy”直接编辑配置文件。或者在如下菜单中点击打开配置文件 在配置文件中添加如下两条。注意http和https的代理都要配置上 "http.proxy": "http://192.168.8.*:8080", "https.proxy": &qu…
阅读更多...
算法leetcode｜25. K 个一组翻转链表（rust重拳出击）

算法leetcode｜25. K 个一组翻转链表（rust重拳出击）

文章目录25. K 个一组翻转链表&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a;进阶&#xff1a;分析&#xff1a;题解&#xff1a;rustgoccpythonjava25. K 个一组翻转链表&#xff1a; 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#x…
阅读更多...
是谣传还是真强？GitHub一战封神的“SQL优化手册”获赞过百万

是谣传还是真强？GitHub一战封神的“SQL优化手册”获赞过百万

这份“SQL优化本质手册”的口碑之所以能够火爆&#xff0c;完全是因为这部作品本身就是作者付诸于自己的多年开发经验之作的原因&#xff0c;所以只要走进书中&#xff0c;看过之后的人都知道&#xff0c;你很难不把自己代入其中与作者一起产生深深地共鸣。 收获&#xff0c;不…
阅读更多...
DFS——剪枝优化迭代加深

DFS——剪枝优化迭代加深

文章目录概述优化搜索顺序排除等效冗余可行性剪枝最优性剪枝例题小猫爬山木棒迭代加深概述加成序列总结概述 优化搜索顺序 不同的搜索顺序会产生不同的搜索树形态&#xff0c;与可行性剪枝结合&#xff0c;去除非法状态&#xff0c;按照一定顺序可使规模大幅度减小。 例&#…
阅读更多...
新能源电池进入高速发展阶段，数商云S2B2C商城赋能企业分销渠道管理更便捷

新能源电池进入高速发展阶段，数商云S2B2C商城赋能企业分销渠道管理更便捷

在国家政策扶持下&#xff0c;我国新能源汽车市场飞速发展&#xff0c;产品供给不断丰富、企业创新活力竞相迸发、使用环境日臻完善以及消费者认可度日益提高&#xff0c;近年来更是产销两旺&#xff0c;新能源汽车产销量屡创新高&#xff0c;作为新能源车的核心部件——电池&a…
阅读更多...
面试官问我 ，try catch 应该在for循环里面还是外面？

面试官问我 ，try catch 应该在for循环里面还是外面？

前言 有个老哥昨天被面试官欺负了&#xff0c;但是是被这个问题&#xff08;标题&#xff09;欺负的&#xff1f; 其实是个比较基础的问题&#xff0c;只要有了解过&#xff0c;叙述是非常简单OK的。 只要有初学者觉得有疑惑&#xff0c;那么我相信不止是他一个。 所以&#…
阅读更多...
青少年等级考试【Python通关干货】（一级）

青少年等级考试【Python通关干货】（一级）

青少年等级考试【Python通关干货】&#xff08;一级&#xff09; 1. 编程模式 1&#xff09;交互式编程 在交互式环境的提示符>>>下&#xff0c;直接输入代码&#xff0c;按回车&#xff0c;就可以立刻得到代码执行结果。 交互式编程缺憾是没有保存下来&#xff0c;下…
阅读更多...
2023 目标，与君共勉

2023 目标，与君共勉

新的一年&#xff0c;立一些目标&#xff0c;与君共勉 技术相关目标 csdn申请专业领域创作认证通过、博客专家认证通过掘金创作等级可以达到LV6等级掘金发表两个小册&#xff0c;有50人以上订阅csdn原先的进阶专栏&#xff0c;增加到100篇文章&#xff0c;有50人以上订阅csdn…
阅读更多...
2021地理设计组一等奖：面向游客的旅游路线优化设计——以丹霞山景区为例

2021地理设计组一等奖：面向游客的旅游路线优化设计——以丹霞山景区为例

作品简介 一、背景与意义 随着旅游业的快速发展与人们对旅行质量要求的提升&#xff0c;旅游者对旅游服务的内容要求也越来越高&#xff0c;其中的旅游导航便是一项需求率极高的服务。然而传统的导航服务多是基于时间或距离成本进行网络分析而提供的路径设计&#xff0c;极少考…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023