Im遵循socket-io文档尽管我仍然得到一个错误
轮询xhr.js:157 GEThttp://localhost:3000/socket.io/?EIO=4&transport=轮询&t=NtNlWd6 404(未找到(
虽然我被卡住了，但我的事情很简单
下面是我的代码
server.js
const express = require('express'); //Line 1
const app = express(); //Line 2
const port = process.env.PORT || 5000; //Line 3
const http = require('http').Server(app);
const io = require('socket.io')(http);
//Whenever someone connects this gets executed
io.on('connection', function(socket) {
console.log('A user connected');
//Whenever someone disconnects this piece of code executed
socket.on('disconnect', function () {
console.log('A user disconnected');
});
});
// This displays message that the server is running and listening to specified port
app.listen(port, () => console.log(`Listening on port ${port}`)); //Line 6
// create a GET route
app.get('/express_backend', (req, res) => { //Line 9
console.log("printing from the server f3f134g")
res.send({ express: "YOUR EXPRESS BACKEND IS CONNECTED TO REACT" }); //Line 10
}); //Line 11
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link
rel="apple-touch-icon"
href="%PUBLIC_URL%/logo192.png"
/>
</head>
<body>
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
<script>
var socket = io();
</script>
<div id="root"></div>
</body>
</html>
请注意两个
```<script src="/socket.io/socket.io.js"></script>```
和
<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
给出错误
问题出在服务器代码中。
您将socket.io绑定到http，但只有app侦听端口(5000(。您需要使http在该端口上侦听。
更改此行：
app.listen(port, () => console.log(`Listening on port ${port}`));
至
http.listen(port, () => console.log(`Listening on port ${port}`));
我的问题是，我在运行端口时使用了app.listen，并使用了const-server=http.createserver(app(，并将此服务器用于socket.io。当我将app.listn更改为server.listen时，问题得到了解决。我将在下面发布我的工作代码
const express = require("express");
const app = express();
const cors = require("cors");
const createError = require("http-errors");
const userRouter = require("./router/user");
const adminRouter = require("./router/admin");
const cookieParser = require("cookie-parser");
const mongoose = require("mongoose");
const morgan = require("morgan");
const session = require("express-session");
const http = require("http");
const server = http.createServer(app);
const { Server } = require("socket.io");
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
app.use(morgan("dev"));
app.use(
cors({
origin: ["http://localhost:3000", "http://localhost:3001"],
credentials: true,
})
);
const io = new Server(server, {
cors: {
origin: 'http://localhost:3000',
methods:['GET','POST']
}
})
app.use(
session({
secret: "mySecretKey",
resave: false,
saveUninitialized: false,
cookie: {
maxAge: 24 * 60 * 60 * 1000,
},
})
);
app.use(cookieParser());
require("dotenv").config();
mongoose
.connect(process.env.DATABASE, {
dbName: "hotelova",
useNewUrlParser: true,
})
.then(() => {
console.log("Db connected");
})
.catch((err) => {
console.log(err);
});
io.on("connection", (socket) => {
console.log("a user connected");
socket.on("disconnect", () => {
console.log("user disconnected");
});
});
app.use("/users", userRouter);
app.use("/admin", adminRouter);
server.listen(4000, () => {
console.log("server running");
});
app.use((req, res, next) => {
next(createError(404));
});
app.use((err, req, res, next) => {
console.log(err);`enter code here`
res.sendStatus(500);
});
您也可以尝试
//?as app.listen returns a server we can use for socket.io
const serverWithSocket = app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
const io = require('socket.io')(serverWithSocket); //? invoking the func also something like func()
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', function () {
console.log('A user disconnected');
});
});
我尝试过以多种形式搜索结果，但都失败了。经过几天的研究，我找到了解决方案。
- 不要在生产上的同一端口上运行node js和socket io服务器。相反，使用两个不同的端口
const express = require("express");
const { Server } = require("socket.io");
const app = express();
const io = new Server(httpsServer, { /* options */ });
app.listen(8000, ()=> console.log("server is running on 8000"));
io.listen(9000);
- 请确保防火墙不会阻止您在套接字服务器上运行的端口。(如果您使用nginx或apache2进行反向代理，则不需要打开任何随机端口(
sudo ufw status
sudo ufw allow 8000
sudo ufw allow 9000
- 如果你在node js服务器中使用nginx进行反向代理，你可以拒绝所有打开的prot
sudo ufw status
sudo ufw deny 8000
sudo ufw deny 9000
- 如果您使用nginx或apache进行node js和socket io，请进行一些反向代理
server {
root /var/www/pastewetween.com;
index index.html index.htm index.nginx-debian.html;
server_name pastebetween.com; # managed by Certbot
return 301 https://$server_name$request_uri;
location / {
# First attempt to serve request as file, then
return 301 https://$server_name$request_uri;
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
location /socket.io {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://localhost:9000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location /r{
proxy_pass http://localhost:8000;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
这最终对我有效服务器端：
const express = require("express");
const app = express();
const httpServer = require('http').createServer(app);
// socket.io and then i added cors for cross origin to localhost only
const io = require('socket.io')(httpServer, {
cors: {
origin: "http://localhost:3000", //specific origin you want to give access to,
},
});
// watch collection from db
const db = mongoose.connection;
db.once('open', () => {
console.log('Connected to MongoDB database');
const collection = db.collection('comments');
const changeStream = collection.watch();
changeStream.on('change', (change) => {
console.log(change);
io.emit('change', change);
});
});
对于客户端
//install and import socket.io-client
import io from 'socket.io-client';
const socket = io('http://localhost:5000');
//use your data how you please
useEffect(() => {
socket.on('change', (change) => {
setData([...data, change]);
});
}, [data]);
console.log(data)
更新并使http侦听该端口，并更新您的代码，如下所示。
http.listen(port, () => console.log(`Listening on port ${port}`)); //Line 6