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