NodeJS 无法在VueJS 3和www.example.com之间建立连接Socket.io

kqhtkvqz  于 2022-11-22  发布在  Node.js
关注(0)|答案(2)|浏览(162)

我对Socket.IO和后端技术都很陌生。但是,我有使用Vue的经验,我正在尝试创建一个简单的多人游戏。
但是我在第一步就卡住了...连接vueJS和socketIO。
下面是服务器:

const app = express()
const http = require("http");
const server = http.createServer(app)

const io = require('socket.io')(8000);

io.on('connection', function(socket) {
  console.log('new connection');

  socket.on('updateUsers', function(data) {
    console.log('event received');
  });
})

这是主目录。

import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"

import "./assets/main.css";

const app = createApp(App);

app.use(router, new VueSocketIO({
    debug: true,
    connection: SocketIO('http://localhost:5173/'), 
    }));

app.mount("#app");

和主页。vue:

import io from 'socket.io-client';
data() {
    return {
      socket: io()
    }
  },
methods: {
    startGame() {this.socket.emit('updateUsers', "someUser")
    },
}

因此,无论是来自服务器的“新连接”在终端中呈现,还是前端都无法发送事件(没有错误,但也没有发生任何事情)。您发现什么问题了吗?可能是路由器的问题,还是因为我向应用程序传递了两个参数?

app.use(router, new VueSocketIO...)
bmp9r5qi

bmp9r5qi1#

您能否添加此快速中间件代码以允许Socket IO服务器中的跨源请求。

app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  next()
})
1yjd4xko

1yjd4xko2#

发现了这个问题,它几乎是愚蠢的。套接字库不支持VueJS 3,它只支持vueJS 2。所以有两个替代品来让它工作,第一个是Vue-3-Socket.io,第二个是Vue-Socket.io-Extended的alpha版本。我去了第二个,它完成了工作。

相关问题