До этого никогда не работал с сокетами и не знал про такую удобную вещь. Узнал, когда захотел в своем пет проекте перенести таймер с клиента на сервер, чтобы была синхронизация. потратил весь день на настройку, но все безуспешно. Работал по документации, тем не менее ничего не получилось. Что я сделал не так, в чем ошибка?
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;
index.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}`));
Timer.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;
Дальше timer должен использоваться на странице. Клиентская часть связана с сервером. Всё кроме нововведений работает нормально. Сами ошибки: 1.Access to XMLHttpRequest at 'http://localhost:5050/socket.io/?EIO=4&transport=polling&t=Oxopshi' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 2.GET http://localhost:5050/socket.io/?EIO=4&transport=polling&t=Oxoq0To net::ERR_FAILED 200 (OK)
origin
в вашемindex.js