javascript - 未捕获的类型错误：无法将类作为函数调用 vue-socket.io

问题描述

我有一个 vue chrome 扩展，我试图在其中实现 web sockets unsing vue-socket.io。我已经按照关于如何在 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>

标签： javascriptnode.jssocketsvue.js

javascript - 未捕获的类型错误：无法将类作为函数调用 vue-socket.io

问题描述

解决方案

推荐阅读