• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

hot reload przestał działać w react, wczytuje tylko build -> ? bug z websocket ?!

0 głosów
125 wizyt
pytanie zadane 3 lutego 2024 w JavaScript przez neo1020 Dyskutant (8,950 p.)

Czy ktoś z was się spotkałem z tym Bugiem konfliktem przeładowania hot-reload że przestał działać w związku prawdopodobnie z websocket.io? Odinstalowałem dzisiaj socket.io z głównego  pliku serwera i zostawiłem inny plik drugi plik/serwer NIGDZIE GO NIE UŻYWAM, zrobiłem builda i przestał działać hot reload, (żeby zobaczyć zmiany trzeba wykonać build za każdym razem mimo że w CMD pokazuje że Compiled.. po wprowadzeniu zmian w przeglądarce się nie wyświetlają nawet po ręcznym odświeżeniu) przeczytałem już tyle w Internecie na ten temat co znalazłem i nic nie pomaga niby że to BUG, ani plik .env, zmiany w jak niżej też nie pomagają ustawienie portu na sztywno

const sockHost = process.env.WDS_SOCKET_HOST;

const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'

// const sockPort = process.env.WDS_SOCKET_PORT;

const sockPort = 5000;

przywracanie z githuba też nie, usuwanie ciasteczek, czyszczenie przeglądarek, wyłączanie rozszerzeń

zrobiłem również eject z odinstalowanym socket.io z serwera i client z frontendu (ale nie jestem pewny do końca bo w pliku webpackDevServer.config.js są wzmianki typu
 

client: {

      webSocketURL:

), 

co doczytałem że to jakiś BUG czy konflikt ale żadne z rozwiązań nie pomaga

ktoś otarł się o temat i ewentualnie rozwiązanie, które zadziałało nie działającego hot-reload? bo chyba będę musiał stworzyć nowy projekt i przenosić wszystko po kolei to ostatnie co przychodzi mi do głowy

inne projekty działają normalnie

dodam jeszcze że w chrome i edge mogę uruchomić aplikację i się zalogować i nie pokazuje mi się ws://localhost:5000/ws xD ale nie działa hot-reload a w firefox "HTTP error! Status: 404" i też nie działa hot-reload a wcześniej działało nawet bez eject, które zrobiłem, GPT nie pomaga

1 odpowiedź

0 głosów
odpowiedź 3 lutego 2024 przez neo1020 Dyskutant (8,950 p.)
edycja 3 lutego 2024 przez neo1020

dobra to chyba nie ma związku, stworzyłem nowy projekt czysty usunąłem wszystko co związane z socket i do póki nie uruchamiam serwera express zmiany są na bieżąco odświeżane a gdy uruchomię serwer i się połączę to wczytuje wszystko z katalogu build 

app.use(express.static(path.join(__dirname, '..', 'build')));


app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});

mam to dodane, ale jeszcze godzinę temu pokazywało każdą zmianę mimo że nie robiłem npm run build za każdą zmianą a teraz nie działa heh, A tu kod serwera

const express = require("express");
const jwt = require("jsonwebtoken");
const verifyToken = require("./verifyToken");
const mysql = require("mysql");
const cors = require("cors");
const cookieParser = require('cookie-parser');
const session = require('express-session');
const path = require("path");
const validator = require("validator");
const bcrypt = require("bcrypt");
const db = require("./db");

const router = express.Router();

const app = express();
const port = 3000;
const saltRounds = 10;

const SYSTEM = "SYSTEM :";
const jwtSecret = "tajny_klucz";

app.use(express.json());
app.use(cookieParser());
app.use(cors());
// 
app.use(cors({
  origin: 'http://localhost:3000/',
  credentials: true,
}));

// app.use((req, res, next) => {
//   res.header('Access-Control-Allow-Credentials', 'true');
//   res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
//   res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
//   res.header('Access-Control-Allow-Headers', 'Content-Type');
//   next();
// });

app.use(session({
  secret: 'mySecretKey', // Klucz używany do podpisywania ciasteczka sesji
  resave: false,
  saveUninitialized: true,
  name: 'fid',
  cookie: {
    maxAge: 3600000, // Czas ważności ciasteczka sesji w milisekundach (np. 1 godzina)
    //secure: true, // Ustaw na true, jeśli korzystasz z protokołu HTTPS
    httpOnly: true, // Uniemożliwia dostęp do ciasteczka sesji z poziomu przeglądarki (JavaScript)
    // rolling: true,
  },
}));


app.use(express.static(path.join(__dirname, '..', 'build')));


app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});


// app.use((req, res, next) => {
//   // console.log(req.headers);
//   next();
// });

console.log("=============== SERVER - LOGOWANIRE ================");

// app.get('/', (req, res) => {
//   if (req.session.views) {
//     req.session.views++;
//     res.send(`Views: ${req.session.views}`);
//   } else {
//     req.session.views = 1;
//     res.send('Welcome to the session demo. Refresh the page!');
//   }
// });



const checkLoggedIn = (req, res, next) => {
  if (req.session.user && req.session.user.loggedIn) {
    console.log(`ELO`);
    next();
  } else {
    res.status(401).json({ message: `${SYSTEM} Brak autoryzacji.` });
  }
};




app.post('/logowanie', (req, res) => {
  const { username, password } = req.body;

  if (!username || !password) {
    res.status(400).json({ message: `${SYSTEM} Uzupełnij Dane` });
    return;
  }

  const query = 'SELECT * FROM users WHERE user = ?';
  db.query(query, [username], async (error, results) => {
    if (error) {
      res.status(500).json({ message: `${SYSTEM} Błąd podczas logowania.` });
      return;
    } else if (results.length === 1) {
      const user = results[0];
      const match = await bcrypt.compare(password, user.pass);
      if (match) {
        
        const tokenData = { 
          ids: user.ids, 
          role: user.role, 
          user: user.user, 
          exp: Math.floor(Date.now() / 1000) + 60 * 60, // Czas wygaśnięcia ustawiony na 1 godzinę od teraz 
        };
        const token = jwt.sign(tokenData, jwtSecret);
        const updateQuery = 'UPDATE users SET token = ?, dataLogowania = NOW(), iloscLogowan = iloscLogowan + 1 WHERE ids = ?';
        
        db.query(updateQuery, [token, user.ids], (updateError, updateResults) => {
          if (updateError) {
            res.status(500).json({ message: `${SYSTEM} Błąd podczas zapisywania tokena.` });
          } else {
            const responseObject = {
              success: true,
              message: `${SYSTEM} Pomyślnie zalogowano.`,
              token,
              username: user.user,
            };
            
            req.session.user = { loggedIn: true };

            res.cookie('token', token, {
              httpOnly: true,
              // secure: process.env.NODE_ENV === 'production',
              // secure: false,
              // sameSite: 'None',
              maxAge: 15 * 60 * 1000, // czas życia ciasteczka w milisekundach (tu: 15 minut)
            });
            


            res.status(200).json(responseObject);

            // console.log('-----------------RESPONSE START-----------------');
            // console.log("/User.id: "+user.ids);
            // console.log("/Token: "+token);
            // const decodedToken = jwt.verify(token, 'tajny_klucz');
            // console.log("/decodedToken: "+ decodedToken);
            // console.log("/Query: "+ updateQuery);
            // console.log("/responseObject: "+responseObject); // Wyświetlenie danych zwróconych z serwera
            // console.log("/responseObject + JSON.stringify: " + JSON.stringify(responseObject, null, 2));
            // console.log('-----------------RESPONSE END-----------------');

          }
        });

      } else {
        res.json({ message: `${SYSTEM} Niepoprawne dane logowania.` });
      }

    } else {
      res.json({ message: `${SYSTEM} Niepoprawne dane logowania.` });
    }
  });
});








app.post("/logout", checkLoggedIn, (req, res) => {

  // console.log(`req.headers: ${JSON.stringify(req.headers)}`);
  const tokenFromCookie = req.cookies.token;
  console.log(`tokenFromCookie: ${tokenFromCookie}`);


  if (!req.headers["authorization"]) {
    res
      .status(400)
      .json({ success: false, message: "Brak nagłówka Authorization." });
    return;
  }

  try {
    const token = req.headers["authorization"].split(" ")[1];
    const decoded = jwt.verify(token, jwtSecret);
    console.log(`decoded: ${JSON.stringify(decoded)}`);

    // Pobierz nazwę użytkownika bezpośrednio z zdekodowanego tokena
    const username = decoded.user;
    console.log(`decoded.ids: ${JSON.stringify(decoded.ids)}`);

    // Sprawdź, czy token jest prawidłowy
    const checkTokenQuery = "SELECT ids FROM users WHERE ids = ?";
    db.query(checkTokenQuery, [decoded.ids], (error, results) => {
      if (error || results.length === 0) {
        console.log(`results.length: ${results.length}`);
        res.status(500).json({ success: false, message: "Niepoprawny token." });
        return;
      }

      // Usuń token z bazy danych
      const updateQuery = "UPDATE users SET token = NULL WHERE ids = ?";
      db.query(updateQuery, [decoded.id], (updateError, updateResults) => {
        if (updateError) {
          res.status(500).json({
            success: false,
            message: `Błąd podczas usuwania tokena: ${updateError}`,
          });
          return;
        }


        res.cookie('token', '', {
          httpOnly: true,
          maxAge: 0,
        });

        req.session.destroy();
        res.clearCookie('fid'); 


        res
        .status(200)
        .json({ success: true, message: "Pomyślnie wylogowano." });

        

      });
    });
  } catch (err) {
    console.log(err);
    res
      .status(500)
      .json({ success: false, message: "Błąd serwera.", error: err });
  }
});









app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

firefox już nie odpytuje websocket jest progress ale dalej nie da się zalogować 

Podobne pytania

0 głosów
0 odpowiedzi 180 wizyt
pytanie zadane 24 stycznia w JavaScript przez TOWaD Mądrala (6,480 p.)
+1 głos
1 odpowiedź 499 wizyt
pytanie zadane 30 października 2022 w JavaScript przez JaaO Początkujący (490 p.)
0 głosów
1 odpowiedź 952 wizyt
pytanie zadane 7 czerwca 2021 w JavaScript przez rafaeru Początkujący (330 p.)

93,425 zapytań

142,421 odpowiedzi

322,647 komentarzy

62,787 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...