reactjs 未进行套接字IO连接

a6b3iqyw 于 2023-04-20 发布在 React

关注(0)|答案(3)|浏览(134)

所有安装的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连接？
在我的服务器端，它控制台记录：

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

reactjs

来源：https://stackoverflow.com/questions/76031281/no-socket-io-connection-being-made

3条答案

按热度按时间

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)
})

赞(0）回复(0）举报 2023-04-20

cld4siwp2#

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

赞(0）回复(0）举报 2023-04-20

ngynwnxp3#

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

赞(0）回复(0）举报 2023-04-20