无法使用 SocketIO 从反应客户端连接到 nodejs 服务器
unable to connect to nodejs server from react client with SocketIO
我正在学习 socketIO
并且我设置了 运行 一个基本的 nodejs
服务器。我的问题是,当我尝试使用我的 nextJS
应用程序连接到服务器时,没有任何反应。没有出现错误,也没有出现我要在连接上打印的消息。
我的代码:
server.js
在后端文件夹中
const express = require('express');
const app = express();
const server = require('http').Server(app);
const { v4: uuidV4 } = require('uuid');
const cors = require('cors');
const io = require('socket.io')(server, {
cors: true,
origins:["http://localhost:3000"]
});
app.use(cors());
app.options('*', cors());
io.on('connection', socket => {
socket.on('test',()=>{
console.log(' i am a test') //does not appear
})
})
//I ALSO TRIED
//io.on('test',()=>{
//console.log('I am a test');
//})
server.listen(5000);
然后在 index.js
我的前端文件夹中的 nextJS 应用程序中
import {useEffect} from 'react';
import io from 'socket.io-client';
const ENDPOINT = "http://localhost:5000";
const socket = io.connect(ENDPOINT);
export default function Home() {
useEffect(()=>{
socket.emit('test');
},[]);
...rest of code
}
所以在我的前端应用程序中,我向服务器发出 'test' 事件,而服务器没有 console.log 连接响应
非常感谢您的帮助,因为我是 socketIO 的新手
您可以在单独的文件中创建辅助函数来管理连接、侦听事件和发出事件。这是一个相同的例子:
export const socketConnection = io => {
io.on("connection", socket => {
console.log("Started socket connection!");
socket.on("message", receivedMessage => {
console.log("Socket message received", receivedMessage);
});
socket.on("subscribe", async room => {
try {
console.log(`In room`, socket.rooms);
await socket.join(room);
console.log(`[socket] Room Joined Successfully : ${room}`, room);
await io.to(room).emit("subscribeSuccess", `Subscribed successfully ${socket.id}: room - ${socket.rooms}`);
} catch (e) {
console.log(`[socket] Error in Room Joining : ${room} : ${e}`, e);
socket.emit("error", "couldnt perform requested action");
}
});
socket.on("unsubscribe", async room => {
try {
await socket.leave(room);
console.log(`[socket] Room Left Successfully : ${room}`, room);
} catch (e) {
console.log(`[socket] Error in Room Leaving : ${room} : ${e}`, e);
socket.emit("error", "couldnt perform requested action");
}
});
});
};
然后在app.js
中您可以导入并启动套接字服务器。
import { socketConnection } from "@helpers";
const io = new Server(server, {
transports: ["websocket", "polling"],
allowEIO3: true
});
socketConnection(io);
并从客户端连接到套接字使用这个:
import io from 'socket.io-client';
const ENDPOINT = "http://localhost:5000";
const socket = io(ENDPOINT);
我正在学习 socketIO
并且我设置了 运行 一个基本的 nodejs
服务器。我的问题是,当我尝试使用我的 nextJS
应用程序连接到服务器时,没有任何反应。没有出现错误,也没有出现我要在连接上打印的消息。
我的代码:
server.js
在后端文件夹中
const express = require('express');
const app = express();
const server = require('http').Server(app);
const { v4: uuidV4 } = require('uuid');
const cors = require('cors');
const io = require('socket.io')(server, {
cors: true,
origins:["http://localhost:3000"]
});
app.use(cors());
app.options('*', cors());
io.on('connection', socket => {
socket.on('test',()=>{
console.log(' i am a test') //does not appear
})
})
//I ALSO TRIED
//io.on('test',()=>{
//console.log('I am a test');
//})
server.listen(5000);
然后在 index.js
import {useEffect} from 'react';
import io from 'socket.io-client';
const ENDPOINT = "http://localhost:5000";
const socket = io.connect(ENDPOINT);
export default function Home() {
useEffect(()=>{
socket.emit('test');
},[]);
...rest of code
}
所以在我的前端应用程序中,我向服务器发出 'test' 事件,而服务器没有 console.log 连接响应
非常感谢您的帮助,因为我是 socketIO 的新手
您可以在单独的文件中创建辅助函数来管理连接、侦听事件和发出事件。这是一个相同的例子:
export const socketConnection = io => {
io.on("connection", socket => {
console.log("Started socket connection!");
socket.on("message", receivedMessage => {
console.log("Socket message received", receivedMessage);
});
socket.on("subscribe", async room => {
try {
console.log(`In room`, socket.rooms);
await socket.join(room);
console.log(`[socket] Room Joined Successfully : ${room}`, room);
await io.to(room).emit("subscribeSuccess", `Subscribed successfully ${socket.id}: room - ${socket.rooms}`);
} catch (e) {
console.log(`[socket] Error in Room Joining : ${room} : ${e}`, e);
socket.emit("error", "couldnt perform requested action");
}
});
socket.on("unsubscribe", async room => {
try {
await socket.leave(room);
console.log(`[socket] Room Left Successfully : ${room}`, room);
} catch (e) {
console.log(`[socket] Error in Room Leaving : ${room} : ${e}`, e);
socket.emit("error", "couldnt perform requested action");
}
});
});
};
然后在app.js
中您可以导入并启动套接字服务器。
import { socketConnection } from "@helpers";
const io = new Server(server, {
transports: ["websocket", "polling"],
allowEIO3: true
});
socketConnection(io);
并从客户端连接到套接字使用这个:
import io from 'socket.io-client';
const ENDPOINT = "http://localhost:5000";
const socket = io(ENDPOINT);