Vue中使用websocket的正确使用方法

首先写一个公共方法 socket.js

functiongetSocket(url, params, callback) {

  let socket;

  if(typeof(WebSocket) === 'undefined') {

    console.log('您的浏览器不支持WebSocket');

  } else{

    console.log('您的浏览器支持WebSocket');

    // 初始化 WebSocket 对象，指定要连接的服务器地址与端口建立连接

    socket = newWebSocket(url);

    // 打开事件

    socket.onopen = function() {

      console.log('Socket 已打开');

      socket.send(params);

    };

    // 获得消息事件

    socket.onmessage = function(msg) {

      // 发现消息进入, 开始处理前端触发逻辑

      callback(msg, socket);

    };

    // 关闭事件

    socket.onclose = function() {

      console.log('Socket 已关闭');

    };

    // 发生了错误事件

    socket.onerror = function() {

      console.log('Socket 发生了错误,请刷新页面');

      // 此时可以尝试刷新页面

    };

  }

}

export {

  getSocket

};

使用

test.vue

<script>

import {getSocket} from '@/utils/socket.js';

export default{

  data() {

    return{

      wsData: {}, // 保存 websocket 数据对象

      form: { // 表单

        name: '',

        age: ''

      }

    }

  },

  beforeDestroy() {

    this.wsData.close(); // 关闭 websocket

  },

  created() {

    this.getSocketData();

  },

  methods: {

    // 获取数据

    getSocketData() {

      let params = this.form;

      getSocket(

        `ws://path`,

        JSON.stringify(params),

        (data, ws) => {

          console.log(data, ws);

          // 保存数据对象, 以便发送消息

          this.wsData = ws;

        }

      );

    },

    // 发送数据

    sendSocketData() {

      let params = this.form;

      params.name = 'xx';

      params.age= '18';

      this.wsData.send(JSON.stringify(params));

    }

  }

}

</script>