简单记录WebSocket

最近由于一个功能需求了解了 WebSocket ，刚好也想记录一下自己前端学习的过程，就记录一下

websocket 文档传送门： https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

简单的了解一下 websocket

很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。
在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

上面是百度得到的，文字比较多，按照我的理解就是：前端想得到数据，就得向后端请求数据的接口，不去请求接口，前端拿不到需要的数据，当前端想得到数据但又不想频繁的去请求接口的时候 WebSocket 就能凸显出它的特点， 服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。

代码（以下用的地址参数为举例）

<template>
        <div>
              <div>
                <biaoqing @send="contentChange" :value="commentvalue" />
              </div>
         </div>
</template>

<script>
import biaoqing from './components/biaoqing/biaoqing.vue'

export default {
     components: {
        biaoqing
    },
    data () {
        return {
            commentData：[],
            commentvalue: '',
            socket: ""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
    contentChange(value) {
        if (value) {
          let obj = {
            a: "1",
            b: "2",
            c: "3"，
            d: "4",
            e: "5"
          }
          this.socket.send(JSON.stringify(obj));
        } else {
          this.$message.error('不能发送空消息');
        }

      },
        init() {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
               
                let url = "ws://localhost:8080"
               // 实例化socket   wss:https， ws:http
                this.socket = new WebSocket(url);
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
                 //监听socket关闭
                this.socket.onclose  = this.close
            }
        },
        open() {
            console.log("socket连接成功")
        },
        error() {
            console.log("连接错误")
            // 连接建立失败重连
             this.init()
        },
        getMessage(msg) {
            console.log(msg.data)
            var data = eval("(" + msg.data + ")");
            var type = data.type;
          //初始化发送需要的参数，我的项目里 这里的参数是后端那边设置的，前端把后端需要的传过去
            let obj = {
               a: "1",
               b: "2",
               c: "3"
               }
            switch (type) {
            case 'init':
               this.socket.send(JSON.stringify(obj));
               break;
            case 'message':
            //数据发送成功后返回的数据  取出需要的数据加入显示的数据里
               var obj = {
                 a: data.a,
                 b: data.b,
                 c: data.c,
                 d: data.d,
                 e: data.e,
                }
               this.commentData.push(obj)
               break;
            case 'bind':
               console.log('绑定成功',data);
               break;
          case 'save':
              //这里可以写需要请求的接口
               $.ajax({
                        type:"POST",
                        url:"http://xxx.xxx",
                        dataType:"json",
                        data:你要传的参数,
                        success:function(result){
                            // console.log(result,msg);
                        }
                    });
                break;
             }
        },
        send() {
            this.socket.send(params)
        },
        close() {
            console.log("socket已经关闭")
        }
    },
    unmounted() {
      this.socket.close() //离开路由之后断开websocket连接
    },
}
</script>

以上是我写的示例，如果有不足之处，可以指出来哦 ！！！