Vuejs 仅在一个 vue 组件中创建 websocket 连接答案

【问题标题】：Vuejs create a websocket connection in only one vue componentVuejs 仅在一个 vue 组件中创建 websocket 连接
【发布时间】：2019-10-29 23:53:48
【问题描述】：

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

为了将 websocket 放在单个组件中，我尝试了以下方法：

/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 下

【问题讨论】：

标签： vue.js websocket

【解决方案1】：

在你的 created() 方法中（我不确定哪个正在使用 socket.io 客户端），但你可以这样做

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

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

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
}

【讨论】：