vue项目使用webscoket

什么是webscoket?

websocket 是一种网络通信协议，一般用来进行实时通信会使用到,webscoket是html5开始提供的一种在TCP连接上的全双工通讯协议。 webscoket是的客户端和服务端之间交换数据变得更加简单。允许服务端主动向客户端推送数据。在webscoket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建永久性的连接，并且进行双向数据传输。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

为什么要使用webscoket

websocket 协议和 http 协议类似，http 协议有一个缺陷，只能由客户方端发起请求，服务端根据请求 url 和传过去的参数返回对应结果
websocket 是双向通信的，只要 websocket 连接建立起来，可以由客户端给服务端发送数据，也可以由服务端主动给客户端发送数据
websocket 适用场景：聊天室

vue中使用websockt

app.vue文件

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      socket:""
    };
  },
  mounted() {
    // 初始化webscoket
    this.init();
  },
  methods: {
    init: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket("webscoket地址");//ws://xxxxx
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
        //发送消息
        //let data {xxx: xxx}
        this.socket.onmessage = this.send(JSON.stringify(data))
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function () {
      console.log("socket连接错误");
    },
    getMessage: function (msg) {
      if(msg.data){
        console.log(msg.data);
        //this.warn_info = JSON.parse(msg.data)
      }
    },
    send: function (params) {
      this.socket.send(params);
    },
    close: function () {
      console.log("socket已经关闭");
    },
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  },
};
</script>