webSocket 前端配置

前言

      最近项目用到webSocket 来实时获取大屏数据 这里根据网上案例总结一下用法，注释很全，简单易懂。

 

 mounted() {

        this.init()

    },

    beforeDestroy() {

        this.websocket.close()

        // 组件销毁时关闭

    },

    methods: {

        init() {

            this.websocket = new WebSocket('ws://xxx.xxx.xxx.xxx:xxxx/serverName');

            // 这里配置 ws 还是 wss 看后端配置

            // serverName 同样看后端命名

            // serverName 后还可以携带参数

            this.websocket.onopen = this.onOpen;

            this.websocket.onmessage = this.onMessage;

            this.websocket.onclose = this.onClose;

            this.websocket.onerror = this.onError

        },

        onOpen() {

            this.websocket.send('hellow world')

            // 这里尝试向后端发送数据

        },

        onMessage(event) {

            console.log(event.data, 'onMessage');

            /**

             * 个人理解：

             * webSocket 实际是对事件的监听处理

             * 每当期待数据发生改变时，

             * 就会触发回调 返回一个event对象

            */

        },

        onClose() {

            console.log('断开连接 onClose');

        },

        onError() {

            console.log('webSocket通信失败，尝试重新连接 onError');

            //连接出错后尝试自动重新连接

            this.init()

        }

    },