首页 文章

Vue套接字io不起作用（无法触发连接事件）

提问于
浏览 次
0

我正在尝试使用客户端 - 服务器模型构建多人游戏 . 我正在使用nodejs和vuejs（版本2.5）项目 . 但是，我似乎无法获得连接（使用socket.io-client和vue-socket.io） .

在'main.js'中，我有以下代码：

import Vue from 'vue';
import App from './App.vue';
import io from 'socket.io-client';
import VueSocketio from 'vue-socket.io';

export const socket = io('http://localhost:8080');

socket.on('connection', function() {
  console.log('connected!');
});
Vue.use(VueSocketio, socket);

console.log('imports done...');

Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  sockets: {
    connect() {
      console.log('socket connected...');
    },
    disconnect() {
      console.log('socket disconnected...');
    }
  }
}).$mount('#app')

当我在浏览器中打开页面时，我确实在控制台中看到“导入完成...”，但是当我使用localhost：8080打开或关闭其他浏览器选项卡时，我在新窗口或第一个窗口中看不到任何消息我用localhost打开了：8080 .

我也尝试将套接字语法放在App.vue文件中，但这也没有用 . 我看到消息“App.vue脚本测试” . 出现在控制台中，但控制台中没有出现连接或断开连接的消息 .

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

console.log('App.vue script test.');

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  sockets: {
    connect() {
      console.log('App.vue: client connected...');
    },
    disconnect() {
      console.log('App.vue: client disconnected...');
    }
  }
}
</script>

有谁知道如何解决这个问题？提前致谢 .

javascript vue.js socket.io

1 回答

  • 0

    据我所知，你错过了socket io的服务器部分 .

    不幸的是，我不知道你的服务器是如何设置的，所以我创建了一个独立于其他服务器运行的socket io服务器 . 您想了解如何将其集成到您的服务器中 .

    我设置了一个简单的套接字io服务器，我称之为server.js，它可以使用 node server.js 启动

    var http = require('http');
var socketio = require('socket.io')

function server(req, res) {
    // you should probably include something like express if you want to return responses.
    res.write("basic response");
}

let app = http.createServer(server);

var io = socketio(app);

io.on('connection', function(socket){
    console.log('a user connected');
    socket.on("share", (message) => {
        io.emit("update", message)
    })
});

app.listen(3000)

    我试图设置一个类似于客户端的项目（main.js）

    import Vue from 'vue'
import App from './App.vue'
import io from 'socket.io-client'
import VueSocketIo from 'vue-socket.io'

export const socket = io("http://localhost:3000")

socket.on('connection', () => {
  console.log("connected");
})

Vue.use(VueSocketIo, socket)

console.log("imports done...");


new Vue({
  el: '#app',
  render: h => h(App),
  sockets:{
    connect() {
      console.log("socket connected...")
    },
    disconnected() {
      console.log("socket disconnected...")
    }
  }
})

    我没有对App.vue做任何事情（我把它包括在内为完整版）

    <template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
    回复于

相关问题