Как работать с websocket'ом во vuejs?

Question

[ezpy]

Здравствуйте, есть данная структура проекта

-components
--main
--Main.vue
-App.vue
-main.js

Я подключаюсь к сокет серверу в App.vue:

export default {
    data: function () {
      return {
        seenmoney: false,
        ws: null,
        onlinePlayers: 0,
      };
    },

    created: function() {
      var self = this;
      this.ws = new WebSocket('ws://localhost:8081/ws');
      this.ws.onopen = function() {
        console.log('WS подключенно')
      };
      this.ws.onclose = function(eventclose) {
        console.log('соеденение закрыто причина: ' + this.eventclose)
      }
      this.ws.onmessage = function(msg) {
        console.log('Сообщение ' + this.msg)
      }
    },

    methods: {
      sh: function () {
        if (this.seenmoney) {
          this.seenmoney = false;
        } else {
          this.seenmoney = true;
        }
      },
      sendmsg: function () {
        this.ws.send('тест сообщение');
      }
    }
  }

Теперь не совсем могу понять как отправлять сокет сообщение или принимать с других компонентов.
Подскажите пожалуйста, буду очень буду благодарен.

Comments

[Игорь Безлепкин]

У меня из твоего примера вообще WebSocket connection to 'ws://localhost:8081/ws' failed: Error during WebSocket handshake: Unexpected response code: 403

Answer 1

[Evgeny Kulakov]

Можно использовать обертку: https://github.com/MetinSeylan/Vue-Socket.io, с ней проще - можно юзать сокет в каждом компоненте. Если хотите сами реализовать, то рекомендую исходники посмотреть этой либы, т.к. все равно примерно тоже самое придется делать)

Comments

[ezpy]

Я не использую soket.io
---------------
golang gorilla/websocket

[Evgeny Kulakov]

Посмотрите, тогда все равно исходники либы, потому что делать придется примерно тоже.
1. Можно сделать vue плагин, зарегистрировать объект сокета и далее в каждом компоненте использовать этот объект.
2. Если используется vuex и предполагается весь обмен через него осуществлять, то можно сделать отдельную либу-клиента и в экшенах vuex ее использовать.

[Moe Green]

у меня этот плагин выдает CORS при попытке соединиться с wss://echo.websocket.org
сам не решил проблему. автор плагина молчит.

[Qwasaew]

Частично, тут в коде есть еще, некоторого рода, проблемы:
нигде не использована объявленная переменная self
при выводе в консоль выводятся не объявленные переменные this.msg и this.eventclose, которые подразумевают область видимости в data()