WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
实现代码如下
<template>
<div>
<!-- 想要渲染的数据 -->
</div>
</template>
<script>
export default {
data() {
return {
webSock: null,
lockReconnect: false, //避免重复连接
}
},
created() {
},
mounted() {
},
destroyed() {
<!-- 离开页面时销毁socket服务 -->
this.webSocketClose()
},
methods: {
// 发送websockwt请求
initWebSocket() {
let websocketUrl = 'ws://172.16.40.1:8083/ws'
// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
this.webSock = new WebSocket(websocketUrl)
this.webSock.onopen = this.webSocketOnOpen
this.webSock.onerror = this.webSocketOnError
this.webSock.onmessage = this.webSocketOnMessage
this.webSock.onclose = this.webSocketClose
},
webSocketOnOpen() {
console.log('WebSocket连接成功')
// 传递参数 不需要传参就不传(参数根据后端需要的参数形式传递就行)
let address = { action: 'sub', ch: `depth_${this.$route.query.exchange_id}_${this.$route.query.symbol}` }
this.webSocketSend(address)
},
webSocketOnMessage(e) {
//接收数据
// console.log('WebSocket 接受数据')
// 将接收的数据转为json格式
var jsonObj = JSON.parse(e.data)
// console.log('接受的数据',jsonObj)
//根据socekt返回的数据判断需要哪个字段里面的数据(根据后端需要的数据判断即可)
if(jsonObj.name === 'trade_1_USDT'){
this.tableData3 = jsonObj.data
}
},
webSocketClose(e) {
console.log('断开连接')
this.lockReconnect = false
this.webSock.close()
// this.reconnect()
},
webSocketOnError(e) {
console.log('报错信息', e)
},
webSocketSend(Data) {
console.log(Data);
//发送数据发送
this.webSock.send(JSON.stringify(Data))
},
// 断开重连操作
reconnect() {
if (this.lockReconnect) return
this.lockReconnect = true
let _this = this
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
this.initWebSocket()
this.lockReconnect = false
// _this.isOne = 1;
}, 2000)
},
},
}
</script>
<style lang='scss' scoped>
}</style>