Как подключиться к socket.io из компонента Vue.js?

Question

Я использую шаблон веб-пакета Vue-cli для создания проекта чата с socket.io.

Я протестировал его на простом примере, когда я нажимаю кнопку, клиентская сторона передает параметры серверной стороне. Но на стороне сервера ничего не было, когда я нажал кнопку.

Может кто-нибудь сказать мне, что случилось с моим кодированием? Как я могу сделать, чтобы решить это?

Большое спасибо!

Вот клиентская сторона

<template>
 <div id="app">
 <input type='button' value='button' @click='clickButton()'>
</div>
</template>

<script>
  import Vue from 'vue'
  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

  export default {
    name: 'app',
    data() {
      return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  sockets: {
    connect: function() {
     console.log('socket connected')
  },
  customEmit: function(val) {
     console.log('this method was fired by the socket server. eg: 
     io.emit("customEmit", data)')
    }
  },
  methods: {
     clickButton: function(val) {
     // $socket is socket.io-client instance
     this.$socket.emit('a', 12, 5);
  }
  }
  }
  </script>

Вот сервер

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io');

server.listen(8070);

const ws = io.listen(server);

ws.on('connection',(sock)=>{
  sock.on('a',(num1,num2)=>{
    console.log(`${num1},${num2}`)
  })
})

Answer 1

import socketio from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
export const SocketInstance = socketio('http://localhost:8081');
 Vue.use(VueSocketIO, SocketInstance)

Answer 2

После импорта пакета vue-socket.io в main.js может потребоваться создать его экземпляр как новый класс

import io from 'socket.io-client'
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({ 
  connection: io('localhost') 
}))

за документы https://www.npmjs.com/package/vue-socket.io

Answer 3

  import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://localhost:8070/');

Это нужно сделать только один раз перед созданием экземпляра Vue. Не в компоненте.

Поскольку вы используете веб-пакет Vue-cli, это должно быть сделано в main.js до new Vue({})