Vue.js VUEJ仅在一个vue组件中创建websocket连接

我只想在一个特定组件中实例化与服务器的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 }));

在我的comenpont.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>

.....
导出默认值{
数据（）{
返回{….}
},
方法：{
... 
//很好
ping（）{this.$socket.emit（'pingServer'，'hey'）}
...
},
//要侦听来自我正在使用的服务器的消息，请执行以下操作：
插座：{
消息（数据）{console.log（数据）；}，
serverResp（数据）{console.log（数据）；}，
}
...
}

要在单个组件中使用websocket，我尝试了以下方法：

/组件.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>

.....
//导入库
从“socket.io客户端”导入socketio；
从“vue socket.io”导入VueSocketIO；
导出默认值{
数据（）{
返回{
套接字：null，
...
}
},
创建（）{
this.s=socketio（'http://localhost:8080');
this.socket=new-VueSocketIO（{“debug”：true，“connection”：s}）；
....
},
方法：{
//发射数据确实有效
ping（）{this.socket.emit（'pingServer'，'hey'）}
},
//不再可用
插座：{
消息（数据）{}
}
}

根据上述代码的状态，我可以使用

this.sock.emit（）

将数据发送到服务器，但我不知道如何侦听来自服务器的消息

提前感谢您的帮助

项目的github链接：

在created（）方法中，该组件位于/frontend/src/views/Editor.vue下（我不确定哪个在使用socket.io客户端），但您可以这样做

//example msg event
this.s.on("msg", (data) => { console.log("joined", data); }

我实现了类似的东西，虽然我使用了mixin，但您可以很容易地将其转移到单个组件。我的代码摘录（在客户端，我只是在使用npm库'socket.io client'））

const io = require("socket.io-client")
export default{
    data() {
        return {
            socket: undefined
        }
    },//end data
    created() {
        let chatUrl = "http://localhost:3000";

        this.socket = io(chatUrl, {        
        //force websockets only - it's optional
        transports: ["websocket"]
        });

        //socket io events
        this.socket.on("join", data => {
            console.log("joined ", data);
        });
    },//end created
    methods: {
        //e.g. sending a chat message
        send_chat: function(message) {
           this.socket.emit("chat", message);
        },
    },//end methods
}