reactjs 未进行套接字IO连接

a6b3iqyw  于 2023-04-20  发布在  React
关注(0)|答案(3)|浏览(135)

所有安装的socket.io和socket.io-client版本在我的mern应用程序中都是一样的。
下面是我的服务器代码:

const app = express();

mongoose.connect(MONGOOSE_URL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
}).then(() => {
  console.log(`MongoDB connected successfully`);
}).catch((error) => console.log(`${error} did not connect`));

const server = http.createServer(app);

const io = new Server(server,  console.log('io is being called'));

io.on('connection', (socket) => {
  console.log(socket.id)
})

server.listen(3005, () => {
  console.log(`Server is listening on PORT 3005`);
});

下面是我的客户端代码:

import io from 'socket.io-client';

const socket = io('http://localhost:3005'); 
socket.on('connect', () => {
    console.log('you connected!')
})

为什么当我npm启动我的客户端和服务器时,它不显示套接字io连接?
在我的服务器端,它控制台记录:

  1. IO被调用,
    1.服务器正在侦听端口3005,
  2. MongoDB连接成功
    有谁知道我错过了什么吗?
xuo3flqw

xuo3flqw1#

试试看

const express = require('express')
const app = express()
const http = require('http');
const socket = require('socket.io');
const cors = require('cors');
const server = http.createServer(app);

app.use(cors({
    origin: ['http://localhost:3000'],
    credentials: true
}))

const io = socket(server, {
    cors: {
        origin: '*',
        credentials: true
    }
})

io.on('connection', (socket) => {
  console.log(socket.id)
})
cld4siwp

cld4siwp2#

1.您的代码没有问题。console.log('you connected!')不会显示在服务器端日志中,因为它是 * 客户端代码 *。
1.您必须在打开客户端的浏览器中查看客户端日志才能查看you connected!。例如,在Google Chrome中,Dev Tools的快捷方式是F-12。

ngynwnxp

ngynwnxp3#

它没有被创建的原因是因为我的socket.io-client代码被放在一个单独的js文件中。
为了让它运行,它需要在App.js中呈现的客户端组件中。
一旦我这样做了,就在服务器和客户端之间建立了连接。

相关问题