怎样在Vue中使用websocket传输数据

简介

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。



其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

如：
ws://example.com:80/some/path

属性、事件、方法：

webSocket.readyState
readyState属性返回实例对象的当前状态，共有四种。
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

简单示例：

   var ws = new WebSocket('ws://121.40.165.18:8800');
 
    // 建立 web socket 连接成功触发事件
    ws.onopen = function () {
        var json="{'a':'1','b':'2'}"
         ws.send(json);//可以给后台发送参数
    };
 
    //接收到消息的回调方法
    ws.onmessage = function (event) {
        alert('数据回来了额'+event.data)
        console.log(event.data);//后台不间断发送数据，持续接收。
    }
 
    //断开 web socket 连接成功触发事件
    ws.onclose = function () {
        alert("连接已关闭...");
    };

参考：
https://blog.csdn.net/qq_38215042/article/details/108336909
https://www.ruanyifeng.com/blog/2017/05/websocket.html
https://www.runoob.com/html/html5-websocket.html
https://www.cnblogs.com/yibadejiu/p/9962589.html