Vue中websocket的使用方法
2023-02-18 16:30:14 时间
初始化WebSocket以及其他可能用到的方法
//初始化WebSocket
initWs() {
if(typeOf(WebSocket) === "undefined") {
//浏览器不支持WebSocket
return false
} else {
this.socket = new WebSocket() //括号中填写后端提供的路径
this.socket.onopen = this.open
this.socket.onerror = this.error
this.socket.onmessage = this.getMessage
}
},
//监听socket连接
open() {},
//监听socket连接
error() {},
//接收数据
getMessage(data) {}, //data为后端发过来的数据
//发送数据
send() {
this.socket.send(data)
},
//监听socket连接关闭
close() {}
在data中初始化变量 mounted生命周期中调用初始化方法
data() {
return {
socket: ""
}
},
mounted() {
this.initWs()
},
destoryed() {
this.socket.onclose = this.close
}
具体内容可参考如下链接
WebSocket文档
解决WebSocket兼容性可参考如下链接
解决WebSocket兼容性
相关文章
- 复杂排序---希尔排序
- 复杂排序---归并排序
- 检索算法---顺序查找
- 检索算法---二分查找
- 最小编辑距离
- Antd源码浅析(一)Icon组件
- Antd源码浅析(二)InputNumber组件 一
- Antd源码浅析(三)InputNumber组件 二
- 背包问题
- 动态规划
- 二叉树遍历
- Babel 配置实验报告
- 前端脚手架构建实践
- PostCSS原理解析
- 前端代码风格自动化系列(一)之Husky
- 前端代码风格自动化系列(二)之Commitlint
- 前端代码风格自动化系列(三)之Lint-staged
- 前端代码风格自动化系列(四)之Prettier
- 前端代码风格自动化系列(五)之共同出击
- 说说Loading这件小事