vue 封装webSocket

1.创建 webSocket.js文件

getSocket(url, params, callback) => {
    let socket;

    if (typeof (WebSocket) === 'undefined') {
        console.log('您的浏览器不支持WebSocket');
    } else {
        console.log('您的浏览器支持WebSocket');

        // 初始化 WebSocket 对象，指定要连接的服务器地址与端口建立连接
        socket = new WebSocket(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
};

2.调用webSocket.js

<script>
import { getSocket } from './webSocket'
export default {
data(){
   return{
     // webscok
      wsData: [], // 保存 websocket 数据对象
      form: {
        // 表单
        name: '',
        age: ''
      }
},
created() {
    this.getSocketData() // 开启webSocket
},
    destroyed() {
         this.wsData.close(); // 关闭 websocket
     },
methods: {
获取数据
getSocketData() {
    let params = this.form;
    getSocket(
        `ws://192.168.2.115:8004/webSocket/${window.sessionStorage.getItem("currentId")}`,
        // `ws://121.40.165.18:8800`,
        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>