• 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 ?!

Object Storage Arubacloud
0 głosów
41 wizyt
pytanie zadane 3 lutego w JavaScript przez neo1020 Dyskutant (8,430 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 przez neo1020 Dyskutant (8,430 p.)
edycja 3 lutego 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

+1 głos
1 odpowiedź 266 wizyt
pytanie zadane 30 października 2022 w JavaScript przez JaaO Początkujący (490 p.)
0 głosów
1 odpowiedź 578 wizyt
pytanie zadane 7 czerwca 2021 w JavaScript przez rafaeru Początkujący (330 p.)
0 głosów
0 odpowiedzi 126 wizyt
pytanie zadane 27 sierpnia 2020 w JavaScript przez Massacra Nowicjusz (120 p.)

92,579 zapytań

141,432 odpowiedzi

319,662 komentarzy

61,963 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...