1

До этого никогда не работал с сокетами и не знал про такую удобную вещь. Узнал, когда захотел в своем пет проекте перенести таймер с клиента на сервер, чтобы была синхронизация. потратил весь день на настройку, но все безуспешно. Работал по документации, тем не менее ничего не получилось. Что я сделал не так, в чем ошибка?

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)

1
  • Попробуйте убрать все что связанно с origin в вашем index.js Commented 18 апр. в 20:15

1 ответ 1

0

Socket.IO Handling CORS

const io = new Server(server, {
  cors: { origin: true, credentials: true },
});
1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.