Vue中使用websocket的正确姿势

小鱼儿 2022-12-03 01:38 214阅读 0赞

### 文章目录 ###

*  1：首先谈谈websocket是什么？
 *  2: vue中怎么使用
 *  3:websocket的属性讲解
 *   *   *  WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例
         *  readyState返回当前websocket的链接状态，共有4种。可根据具体项目的需求来利用此状态，写对应的需求。
 *  4:手动关闭websocket

# 1：首先谈谈websocket是什么？ #

1.  WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。  
    WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

# 2: vue中怎么使用 #

1.  实例代码

1.  手动关闭websocket

this.websock.close()

1.  websocket链接地址，配置在index.html页面

# 3:websocket的属性讲解 #

1.  创建WebSocket 实例
    
    ### WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例 ###

this.websock = new WebSocket(url);

1.  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的绝对路径。

1.  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)