文章目录
- 1:首先谈谈websocket是什么?
- 2: vue中怎么使用
- 3:websocket的属性讲解
- WebSocket 对象作为一个构造函数,用于新建 WebSocket 实例
- readyState返回当前websocket的链接状态,共有4种。可根据具体项目的需求来利用此状态,写对应的需求。
- 4:手动关闭websocket
1:首先谈谈websocket是什么?
- WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
2: vue中怎么使用
- 实例代码
<script>
import store from '@/store/'
export default {
name: "HeaderNotice",
components: {
},
data () {
return {
websock: null,
}
},
computed:{
},
created() {
this.initWebSocket();
},
mounted() {
//this.initWebSocket();
},
destroyed: function () { // 离开页面生命周期函数
this.websocketclose();
},
methods: {
initWebSocket: function () {
// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
console.log("调用了链接websock ,获取的用户id为 :"+store.getters.userInfo.id)
var userId = store.getters.userInfo.id;
var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
console.log(url);
this.websock = new WebSocket(url);
this.websock.onopen = this.websocketOnopen;
this.websock.onerror = this.websocketOnerror;
this.websock.onmessage = this.websocketOnmessage;
this.websock.onclose = this.websocketOnclose;
},
websocketOnopen: function () {
console.log("WebSocket连接成功");
//心跳检测重置
//this.heartCheck.reset().start();
},
websocketOnerror: function (e) {
console.log("WebSocket连接发生错误");
this.reconnect();
},
websocketOnmessage: function (e) {
console.log('监听关闭' + e)
console.log("-----接收消息-------",e.data);
var data = eval("(" + e.data + ")"); //解析对象
},
websocketOnclose: function (e) {
console.log("connection closed (" + e.code + ")");
this.reconnect();
},
websocketSend(text) { // 数据发送
try {
this.websock.send(text);
} catch (err) {
console.log("send failed (" + err.code + ")");
}
},
reconnect() {
var that = this;
if(that.lockReconnect) return;
that.lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
console.info("尝试重连...");
that.initWebSocket();
that.lockReconnect = false;
}, 5000);
},
}
}
</script>
- 手动关闭websocket
this.websock.close()
- websocket链接地址,配置在index.html页面
<script>
window._CONFIG['IP'] = '127.0.0.1';
//后台接口访问
window._CONFIG['domianURL'] = 'http://' + window._CONFIG['IP'] + ':9036/csp';
</script>
3:websocket的属性讲解
- 创建WebSocket 实例
WebSocket 对象作为一个构造函数,用于新建 WebSocket 实例
this.websock = new WebSocket(url);
- websocket属性
binaryType: "blob" //返回websocket连接所传输二进制数据的类型,如果传输的是Blob类型的数据,则为"blob",如果传输的是Arraybuffer类型的数据,则为"arraybuffer"
bufferedAmount: 0 //为只读属性,用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。
extensions: ""
onclose: ƒ () //连接关闭时触发
onerror: ƒ () //通信发生错误时触发
onmessage: ƒ (e) //客户端接收服务端数据时触发,e为接受的数据对象
onopen: ƒ () //连接建立时触发
protocol: "" //用于返回服务器端选中的子协议的名字;这是一个在创建websocket对象时,在参数protocols中指定的字符串。
readyState: 1 //返回值为当前websocket的链接状态
url: "ws://1xx.xxx.xxx.xxx:8080/ws" //返回值为当构造函数创建WebSocket实例对象时URL的绝对路径。
- websocket属性之readyState
readyState返回当前websocket的链接状态,共有4种。可根据具体项目的需求来利用此状态,写对应的需求。
CONNECTING:值为0,表示正在连接。
OPEN: 值为1,表示连接成功,可以通信了。
CLOSING: 值为2,表示连接正在关闭。
CLOSED: 值为3,表示连接已经关闭,或者打开连接失败。
4:手动关闭websocket
this.websock.close()
websocketOnclose方法打印信息
监听关闭[object CloseEvent]
GlobalHeader.vue?70ef:647 connection closed (1005)