简单了解一下 websocket
以下是创建一个新的webSocket对象的API:
var Socket = new WebSocket(url, [protocal] );
webSocket属性:
属性 | 说明 |
---|
Socket.readyState | readyState的代表的ReadOnly属性的连接状态。 它可以有以下值: 一个0 值表示该连接尚未建立。 值为1 表示连接建立和沟通是可能的。 值为2 表示连接是通过将结束握手。 值为3 表示连接已关闭或无法打开。 |
Socket.bufferedAmount | 读属性的bufferedAmount代表文本的字节数,utf - 8的排队使用send()方法。 |
webSocket事件:
事件 | 处理程序 | 说明 |
---|
open | Socket.onopen | 此事件发生在套接字建立连接。 |
message | Socket.onmessage | 此事件发生时,客户端收到来自服务器的数据。 |
error | Socket.onerror | 此事件发生时有任何通信错误。 |
close | Socket.onclose | 此事件发生在连接关闭。 |
webSocket方法:
方法 | 说明 |
---|
Socket.send() | send(data)方法用来连接传输数据。 |
Socket.close() | close()方法将被用于终止任何现有的连接。 |
简单例子
<template>
<div class="test">
</div>
</template>
<script>
export default {
name : 'test',
data() {
return {
websock: null,
}
},
created() {
this.initWebSocket();
},
destroyed() {
this.websock.close()
},
methods: {
initWebSocket(){
const wsuri = "ws://127.0.0.1:8080";
this.websock = new WebSocket(wsuri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen(){
let actions = {"test":"12345"};
this.websocketsend(JSON.stringify(actions));
},
websocketonerror(){
this.initWebSocket();
},
websocketonmessage(e){
const redata = JSON.parse(e.data);
},
websocketsend(Data){
this.websock.send(Data);
},
websocketclose(e){
console.log('断开连接',e);
},
},
}
</script>
<style lang='less'>
</style>
封装 websocke
let Socket = ''
let setIntervalWesocketPush = null
export const createSocket = url => {
Socket && Socket.close()
if (!Socket) {
console.log('建立websocket连接')
Socket = new WebSocket(url)
Socket.onopen = onopenWS
Socket.onmessage = onmessageWS
Socket.onerror = onerrorWS
Socket.onclose = oncloseWS
} else {
console.log('websocket已连接')
}
}
const onopenWS = () => {
sendPing()
}
const onerrorWS = () => {
Socket.close()
clearInterval(setIntervalWesocketPush)
console.log('连接失败重连中')
if (Socket.readyState !== 3) {
Socket = null
createSocket()
}
}
const onmessageWS = e => {
window.dispatchEvent(new CustomEvent('onmessageWS', {
detail: {
data: e.data
}
}))
}
const connecting = message => {
setTimeout(() => {
if (Socket.readyState === 0) {
connecting(message)
} else {
Socket.send(JSON.stringify(message))
}
}, 1000)
}
export const sendWSPush = message => {
if (Socket !== null && Socket.readyState === 3) {
Socket.close()
createSocket()
} 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
createSocket()
}
}
export const sendPing = (time = 5000, ping = 'ping') => {
clearInterval(setIntervalWesocketPush)
Socket.send(ping)
setIntervalWesocketPush = setInterval(() => {
Socket.send(ping)
}, time)
}
websocket 使用
npm install @sven0706/websocket -S
import { createSocket } from '@sven0706/websocket'
createSocket('wss://api.baidu.com')
import { sendWSPush } from '@sven0706/websocket'
sendWSPush(data)
const getsocketData = e => {
const data = e && e.detail.data
console.log(data)
}
window.addEventListener('onmessageWS', getsocketData)
window.removeEventListener('onmessageWS', getsocketData)
API
createSocket(url)
sendWSPush(message)
sendPing()