创建websocket实例
const ws = new WebSocket("WebSocket地址")
1.实例对象的onmessage
属性,用于指定收到服务器数据后的回调函数。
ws.onmessage = function(evt){
console.log('Received Message:'+evt.data)
}
2.实例对象的send()
方法用于向服务器发送数据。
webSocket.send()
ws.send('your message')
3.实例对象的bufferedAmount
属性,表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。
webSocket.bufferedAmount
var data = new ArrayBuffer(10000000);
socket.send(data);
if (socket.bufferedAmount === 0) {
// 发送完毕
} else {
// 发送还没结束
}
4.实例对象的onerror
属性,用于指定报错时的回调函数。
webSocket.onerror
5.实例对象的onopen
属性,用于指定连接成功后的回调函数。
webSocket.onopen
ws.onopen = function(){ ws.send('hello Server!') }
6.如果要指定多个回调函数,可以使用addEventListener
方法。
webSocket.addEventListener
ws.addEventListener("open",function(event){
ws.send("Hello Server!")
}
7.
onclose 当websocket关闭时执行回调函数(可用于监听websocket关闭之后重启)
webSocket.onclose
ws.onclose = function(){
console.log('handle close event')
}
Vue项目实例:
Vue.prototype.WebSocketip = function() {
const ws = new WebSocket(‘WebSocket地址’)
ws.onmessage = function(res) {
let data = JSON.parse(res.data)
if (data.code == 'USER_UPDATE') {
let users = data.msg;
}
//当WebSocket断开连接时,自动重新链接5s一次
ws.onclose = function() {
setTimeout(function() { Vue.prototype.WebSocketip() }, 5000);
};
}