Vuejs создает соединение через websocket только в одном компоненте vue - PullRequest
0 голосов
/ 14 января 2019

Я хочу создать экземпляр соединения websocket с сервером, только в одном конкретном компоненте. Я использую Vuecli, socket.io, socket.io-client и vue-socket.io

Погуглив, я смог создать глобальное соединение и затем использовать его, как в следующем примере:

/ main.js

[...]

import socketio from 'socket.io-client';
import VueSocketIO from 'vue-socket.io';

[...]

export const SocketInstance = socketio('http://localhost:8080');
Vue.use( new VueSocketIO( {"debug":true, "connection":SocketInstance }));

и в моем Comenponent.vue я могу использовать this.$socket. для ссылки на экземпляр websocket.

<template>
.....
</template>
<script>
export default {
   data(){
    return { .... }
   },
   methods:{
      ... 
      // works fine
      ping(){ this.$socket.emit('pingServer','hey') }
      ...
   },
   // to listen for messages from the server i'm using:
   sockets: {
     message(data){  console.log(data); },
     serverResp(data){  console.log(data); },
   }
   ...
}
</script>

Чтобы веб-сокет был в одном компоненте, я попробовал следующее:

/ Component.vue

<template>
.....
</template>
<script>
//import lib
import socketio from 'socket.io-client';
import VueSocketIO from 'vue-socket.io';

export default {
   data(){
     return {
        socket: null,
        ...
     }
   },
   created(){
      this.s = socketio('http://localhost:8080');
      this.socket = new VueSocketIO( {"debug":true, "connection":s });

      ....
   },
   methods: {
      // emit data does work 
      ping(){ this.socket.emit('pingServer','hey') }

   },

   // not available anymore  
   sockets:{
      message(data){}
   }


}

</script>

В соответствии с приведенным выше кодом, я могу отправлять данные на сервер с помощью this.sock.emit(), но не могу понять, как прослушать сообщение, поступающее с сервера.

Заранее спасибо за любую помощь.

github ссылка проекта: https://github.com/anatolieGhebea/simpleDocBuilder

компонент находится в /frontend/src/views/Editor.vue

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...