Vue 配置 websocket

配置

• socket.js

function 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
};

使用

• 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>