Łączenie skryptów JS z index.html postawionym http/socket.io

pytanie zadane 23 lutego 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)

Cześć,
Mam następujący problem: pracuję na raspberry pi i node.js, postawiłem serwer za pomocą http oraz socket.io. Serwer działa poprawnie, czyli strona index.html wyświetla się i pracuje obustronna komunikacja. Jednak chciałbym móc podłączyć zewnętrzne pliki w tym .css oraz .js do strony, tak aby nie było wszystko w jednym .html. Oto mój kod:

var http = require('http').createServer(handler)
var io = require('socket.io')(http)
var fs = require('fs')
http.listen(8080)
function handler(req, res) {
    const path = __dirname + '/www/'
    fs.readFile(path + 'index.html', function (err, data) {
        if (err) {
            res.writeHead(404, { 'Content-Type': 'text/html' })
            return res.end("404 Not Found")
        }
        res.writeHead(200, { 'Content-Type': 'text/html' })
        res.write(data)
        return res.end()
    })
}
process.on('SIGINT', function () {
    process.exit()
})

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    <script defer src="test.js"></script>
</head>
<body>
socket.onevent = function (packet) {
            //To działa bez zarzutów
        }
</body>

console.log('hello world')

Na konsoli strony serwera zwracany jest błąd: Uncaught SyntaxError: Unexpected token '<' z źródła test.js.
Czy jest w stanie ktoś mi wskazać, w jaki sposób zmodyfikować kod, tak aby była możliwość odczytu z innych plików? Próbowałem również res.write() na skrypty js (tu test.js), ale niestety zwracało je jakby były .html i nie dało się dalej z nich korzystać. Cały folder również próbowałem wprowadzać na serwer, ale wówczas nie potrafiło zidentyfikować automatycznie index.html.
Z góry dziękuję za pomoc oraz rady.

komentarz 23 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Skoro chcesz w Node serwować pliki JS i CSS, to czemu w funkcji handler na sztywno odczytujesz plik index.html i odsyłasz jego zawartość? Powinieneś zbudować ścieżkę do pliku na podstawie property property req.url, bo teraz (na oko) odsyłasz plik HTML do skryptu, który oczekuje pliku test.js - stąd pewnie pojawia się błąd.

Przy okazji:

<body>
socket.onevent = function (packet) {
            //To działa bez zarzutów
        }
</body>

To nie wygląda na prawidłowy kod JS-a - powinien on być zamknięty w tagu <script>.

komentarz 23 lutego 2021 przez Oskar Szkurłat Bywalec (2,780 p.)

Czy miałeś coś takiego na myśli? Udało się dostać dostęp do pliku test.js i printuje 'hello world', jednak w tym momencie zepsuła się ścieżka socket.io i przestała działać komunikacja socket.io, zwracając żądania nieistniejących plików:

GET http://192.168.6.666:8080/socket.io/?EIO=3&transport=polling&t=NVFCHMs 404 (Not Found)

var http = require('http');
var io = require('socket.io')(http)
var fs = require('fs');

http.createServer(function (req, res) {
    let reqUrl = req.url
    if (reqUrl == '/')
        reqUrl = '/index.html'
    //console.log('__dirname', __dirname)
    //console.log('reqUrl', reqUrl)
    var filename = __dirname + reqUrl;
    fs.readFile(filename, function (err, data) {
        if (err) {
            res.writeHead(404, { 'Content-Type': 'text/html' });
            return res.end("404 Not Found");
        }
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.write(data);
        return res.end();
    });
}).listen(8080);

io.sockets.on('connection', function (socket) {
    socket.emit("test")
})

Myślałem nad jakimś przekierunkowaniem ścieżki, bo przyjąłem, że /socket.io/ powinien być pobierany z /node_modules/, jednak niestety nie pomogło.

komentarz 23 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Tak, w kwestii zmiennych reqUrl i filename, teraz serwer odsyła plik wskazany w URL. Chociaż Content-Type nadal jest niepotrzebnie na sztywno ustawiany.

Co do socketa, czy zmieniłeś coś poza implementacją callbacka przekazanego do http.createServer? Jeśli to jest aktualny URL, pod który dobija się front: http://192.168.6.666:8080/socket.io/ , to jaka ścieżka była przedtem? Wcześniej używałeś '/www/' do budowania ścieżki, a teraz tego nie ma - jeśli było to potrzebne, ale brakuje tego w req.url, to dodaj ten fragment dla odpowiedniego przypadku (chociaż gdyby to było przyczyną aktualnie nieprawidłowej ścieżki, to strona index.html pewnie też by się nie ładowała).

Czy konsola Node'a nie rzuca błędami?