Question

我正在尝试调用send并在单击按钮时通过Web套接字向服务器发送消息：

// HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="send($event)">Send</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['socket'],
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    };
  },
  methods: {
    send: () => {
      this.socket.addEventListener('open', () => {
        this.socket.send('Hello Server!');
      });
    },
  },
};
</script>


// App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view :socket="ws"/>
  </div>
</template>

<script>
export default {
  name: 'app',

  created() {
    this.ws = new WebSocket('ws://localhost:3000/websocket');
  },
};
</script>

单击要发送的按钮时出现的错误是：

Uncaught TypeError: Cannot read property 'addEventListener' of undefined at VueComponent.send (HelloWorld.vue?cc3a:19) at Proxy.boundFn (vue.esm.js?efeb:190) at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-469af010","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/HelloWorld.vue (app.js:905), <anonymous>:13:17) at invoker (vue.esm.js?efeb:2004) at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1802)

Answer 1

尝试在全局窗口范围内创建套接字实例。它将在安装Vue应用程序之前创建，并且可以在您的应用程序中访问。

App.vue

<script>
 window.socket = new WebSocket('ws://localhost:3000/websocket');
 export default {
    name: 'app'
 };
</script>

HelloWorld.vue

methods: {
  send: () => {
    window.socket.addEventListener('open', () => {
      window.socket.send('Hello Server!');
    });
  },
},

如何将websocket实例传递给vue.js组件，然后对其调用send（）？

1 个答案: