我以前从未使用过套接字,不知道有这么方便的东西。我发现当我想在我的宠物项目中将计时器从客户端传输到服务器以便同步时。我花了一整天的时间来设置它,但没有效果。我按照文档进行操作,但没有任何效果。我做错了什么,错误是什么?
const http = require('http');
const io = require('socket.io')(http);
const socketLogic = (io) => {
io.on('connection', (socket) => {
console.log('юзер конектед');
let timer = 11;
const interval = setInterval(() => {
timer--;
socket.emit('timerUpdate', timer);
if (timer === 0) {
clearInterval(interval);
}
}, 1000);
});
};
module.exports = socketLogic;
索引.js
const express = require('express');
const PORT = process.env.PORT || 5050;
const userRouter = require('./routes/user.routes');
const gameRouter = require('./routes/game.routes');
const cors = require('cors');
const http = require('http');
const socketIo = require('socket.io');
const socketLogic = require('./socket');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on('connection', (socket) => {
socket.conn.transport.ws.opts.transports = ['websocket'];
});
const corsOptions = {
origin: '*',
methods: "*",
allowedHeaders: "*"
};
app.use(cors(corsOptions));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use('/api', userRouter);
app.use('/game', gameRouter);
socketLogic(io);
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET, POST');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
server.listen(PORT, () => console.log(`Cтарутем на порту ${PORT}`));
定时器.jsx
import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:5050');
const Timer = () => {
const [timer, setTimer] = useState(11);
useEffect(() => {
socket.on('timerUpdate', (newTimer) => {
setTimer(newTimer);
});
return () => {
socket.disconnect();
};
}, []);
return (
<div>
<p>Timer: {timer}</p>
</div>
);
};
export default Timer;
接下来,应该在页面上使用计时器。客户端部分连接到服务器。除了创新之外,一切都运转良好。错误本身: 1. 从源“http://localhost:3000”访问“http://localhost:5050/socket.io/?EIO=4&transport=polling&t=Oxopshi”处的 XMLHttpRequest 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。 2.GET http://localhost:5050/socket.io/?EIO=4&transport=polling&t=Oxoq0To net::ERR_FAILED 200(确定)
Socket.IO处理 CORS