未捕获的TypeError:无法将类作为函数vue-socket.io调用

Question

我有一个vue chrome扩展，在那里我试图实现不使用vue-socket.io的web套接字。我已经遵循了如何在heroku上使用express和socket.io部署节点服务器的基本说明，但我无法连接。我得到了一个Uncaught TypeError: Cannot call a class as a function。我该怎么解决这个问题呢？我希望用户加入一个独特的渠道，在这种情况下可以是对等id本身，但我需要如何让事情更好地首先。下面是服务器/客户端代码的一个片段。我的chrome扩展将打开一个新的标签，我想在其中运行所有的逻辑。

server.js

'use strict';

const express = require('express');
const socketIO = require('socket.io');

const PORT = process.env.PORT || 3000;
const INDEX = '/index.html';

const server = express()
  .use((req, res) => res.sendFile(INDEX, { root: __dirname }))
  .listen(PORT, () => console.log(`Listening on ${PORT}`));

const io = socketIO(server);

io.on('connect', (socket) => { 
  socket.on('PingServer', (data) => {
    io.emit('massageChannel', socket.id);
  });
});

// client code (the vue.js chrome extension app)

import Vue from 'vue'
import App from './App'
import router from './router'
import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"

// the u is the dedicated channel that I want to set for the users who open a new connection. to permit the comunication between clients in provate I want that the url for the socket is similar to https://my-heroku.herokuapp.com/u/uniqueid <-- peerid
export const SocketInstance = SocketIO('https://myheroku-url.herokuapp.com/u/');

// This is the main vue instance

Vue.use(VueSocketIO, SocketInstance)

/* eslint-disable no-new */
new Vue({
  el: '#inbox',
  data: {
    reg: false,
    u: null
  },
  router,
  render: h => h(App),
  watch: {
    $route(to, from ){
      console.log(to, from);
    }
  },
  created() {
      this.$router.push({ path: 'inbox' });
  },
  mounted() {
    console.log('mounted');
  }
})

// the component 
<template>
  <div class="container">

    <div class="row" v-if="isRegistered !== true">
      <div class="col-sm-12 col-md-12 col-md-12 mt-5 p-5">
        <h1>Benevnuto.</h1>
        <p class="lead">Inserisci un username per registrare un numero temporaneo IHM</p>
          <div class="input-group mt-5">
            <input type="text" class="form-control" name="username" v-model="user" placeholder="username" />
            <div class="input-group-append">
            <button class="btn btn-primary" v-on:click.stop="setUsername" >CONNETTI</button>
            </div>
          </div>
      </div>
    </div>

    <div class="row" v-if="isRegistered === true">
      <div class="col-12 mt-5 mb-5 p-5">
        <h1 class="" v-if="user">Ciao {{ user }}</h1>
        <p class="text-muted">Il tuo link IHM è 312b1knq </p> 
        <p>Condividilo con gli amici per ricevere messaggi</p>
        <small class="text-success" v-if="isConnected">We're connected to the server! Message from server: "{{socketMessage}}" <a class="text-decoration-none" @click="pingServer()">Ping Server</a></small> 
      </div>    
    </div>

      <div class="col-sm-12 col-md-12 col-lg-12 p-5">
        <div class="input-group">
            <input type="text" class="form-control" name="message" v-model="message">
          <div class="input-group-append">
            <button class="btn btn-primary"><i class="fas fa-airplane"></i>INVIA</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      isRegistered: false,
      user: '',
      message: '',
      pagerNumber: '',
      socketMessage: ''
    }
  },
  socket: {
    connect() {
      // Fired when the socket connects.
      this.isConnected = true;
    },
    disconnect() {
      this.isConnected = false;
    },
    messageChannel(data) {
      // Fired when the server sends something on the "messageChannel" channel.
      this.socketMessage = data
    }
  },
  methods: {
    setUsername(){
      console.log('click');
      if( this.reg === false){
        this.user = this.user;
        this.reg = true;
        console.log(this.reg);
        console.log(this.user);
      }
      return this.user;
    },
    pingServer() {
      // Send the "pingServer" event to the server.
      this.$socket.emit('pingServer', 'PING!')
    },
    getAssignedNumber(){

    }
  }
}
</script>

<style scoped>

p {
  font-size: 20px;
}

</style>

Answer 1

我从这里得到了解决方案https://github.com/MetinSeylan/Vue-Socket.io/issues/174#issuecomment-460021715

 const SocketInstance = socketio.connect('http://localhost:3000', {
    query: {
        token: window.localStorage.getItem('auth')
    }
});

Vue.use(new VueSocketIO({
    debug: true,
    connection: SocketInstance
}));