Vue.js websocket плагин?

Question

[TinyZerg]

Всем привет. Написал плагин для работы с библиотекой SockJS на стороне клиента.

import SockJS from 'sockjs-client';

export default {
    install(Vue, connection) {
        let socket;

        if (!connection) throw new Error("[websocket plugin] cannot locate connection")

        if (typeof connection == 'string') {
            socket = new SockJS(connection);
        } else {
            socket = connection;
        }

        Vue.prototype.$socket = socket;

        Vue.mixin({
            beforeCreated() {
                if (this.$options["socket"]) {
                    let conf = this.$options.socket;
                    Object.keys(conf).forEach((key) => {
                        switch(key)
                        {
                            case 'onopen':
                                this.$socket.onopen = conf[key].bind(this);
                                break;
                            case 'onclose':
                                this.$socket.onclose = conf[key].bind(this);
                                break;
                            case 'onerror':
                                this.$socket.onerror = conf[key].bind(this);
                                break;
                            case 'onmessage':
                                this.$socket.onmessage = conf[key].bind(this);
                                break;
                        }
                    });
                }
            },
            beforeDestroy() {

            }
        });
    }
}

теперь в компоненте App.vue юзаю свойство socket и в нем определяю функции onopen, onmessage и т.д:

export default {
    name: 'app',
    socket: {
      onopen() {
        console.log('OPEN');
      },
      onmessage(msg) {
        console.log(msg);
      },
      onclose(e) {
        console.log(e);
      },
      onerror(e) {
        console.log(e)
      }
    }
  }

Все бы ничего, все работает, когда устанавливается соединение получаю в консоли сообщение OPEN, когда приходит сообщение с сервера, в консоли получаю текст сообщения.
Но столкнулся с проблемой. В определенном компоненте (chat.vue) захотел отправить сообщение в хуке created(). Написал примерно так:

created() {
            this.$socket.send("Hello");
        },

Получаю ошибку, что соединение еще не установлено на момент вызова send(). И действительно, created() в компоненте вызывается раньше, чем в корневом компоненте вызывается связывание функции onopen() в свойстве socket: {}.
Вопрос: это я неверно реализовываю работу плагина или как то по другому нужно работать с сокетами в vue?

Comments

[Сергей Сергей]

на mounted можно

[TinyZerg]

Сергей Сергей, А это вообще нормальная практика так делать, как я. Ну в смысле реализация работы с сокетами хоть напоминает верную?

[TinyZerg]

Сергей Сергей, Хотя тоже не сработало, сначала created компонента вызывается, затем mounted, а только после этого происходит связывание функции onopen в плагине... как заставить связывать onopen с функцией в родительском компоненте пока не догоняю..

[Сергей Сергей]

Ну, после вдумчивого прочтения кода, возможно с неверным пониманием, мне показалось, что надо писать в компоненте чата что-то типа

//...
data: { /*что там нужно в чате*/ },
socket: {
  onopen() {
    console.log('Привет из компонента чата');
    this.$socket.send("Hello");
    /* тут можно выставлять какие-то разрешения на работу чат-методов*/
  }
}

Полагаю, этот компонент будет единственным на странице.