![](/img/trans.png)
[英]vue-socket.io Uncaught TypeError: Cannot read property of undefined
[英]Uncaught TypeError: Cannot call a class as a function 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>
我從這里得到了解決方案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
}));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.