Как отправить html и js с сервера через Vanilla NodeJS без модулей

Я знаю, что лучше использовать ExpressJS, но я хочу понять основные API NodeJS. Я хочу создать самый простой сервер без каких-либо модулей. Везде мы можем найти код для сервера, который отправляет только html-файл:

const fs = require('fs')
const http = require('http')
const path =require('path')

const server = http.createServer((req,res)=>{
fs.readFile(path.join(__dirname,'index.html'),(err,data)=>{
        if (err){
            throw err
        }
        res.writeHead(200,{'Content-Type':'text/html'})
        res.end(data)
    })
}).listen(8080, () => {
    console.log('Server running on port 8080')
})
server.on('request', (req, resp) => {
    if(req.url === '/' && req.method === 'GET') {
        data=fs.readFileSync(__dirname + '/index.html')
        resp.writeHead(200, {
            'Content-Type': 'text/html',
        })
        return resp.end(data)
    }
}) 

Если я попытаюсь отправить index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <h1 id="text">Hello!</h1>
    <button id="change">Change</button>
<script src="index.js"></script>
</body>
</html>

файл сценария index.js не загружается. Пример index.js:

const text=document.getElementById('text')
const change = document.getElementById('change')
const col1='rgb(255, 0, 0)'
const col2='rgb(0, 0, 0)'
change.addEventListener('click', () => {
    
    if (text.style.color===col1){
         text.style.color=col2
    }else{
         text.style.color=col1
    }
})

Как я могу отправить два файла: index.html и index.js через чистый Node.js? Аналогичный вопрос для ExpressJS: Node.js обслуживает HTML, но не может загружать файлы сценариев на обслуживаемой странице, но там используется Express, в этом вопросе я хочу использовать чистый node.js.

script scr= ... несет ли какую-либо ответственность за проблему, с которой вы столкнулись? файл в любом случае должен быть доступен как актив в wwwroot. Вы не должны служить активам через действия
Diego De Vita 17.05.2022 11:38

Если я копирую код из index.js в раздел <script>, javascript работает, если я включаю index.js через <script scr>, то javascript не работает. Как это объясняется в Node.js обслуживает HTML, но не может загружать файлы сценариев на обслуживаемой странице. Мне нужно передать этот файл index.js с сервера на клиент. Как я могу это сделать?

Alexey 17.05.2022 14:18
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
1
2
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вам нужен еще один оператор if в вашем server.on('request', ...). Текущий оператор if имеет дело только с index.html

Вы можете попробовать это, я еще не тестировал код, но по логике он должен работать:

server.on('request', (req, resp) => {
    if(req.url === '/' && req.method === 'GET') {
        data=fs.readFileSync(__dirname + '/index.html')
        resp.writeHead(200, {
            'Content-Type': 'text/html',
        })
        return resp.end(data)
    }

    // add this code
    if(req.url === '/index.js' && req.method === 'GET'){
        data=fs.readFileSync(__dirname + '/index.js')
        resp.writeHead(200, {
            'Content-Type': 'application/javascript',
        })
        return resp.end(data)
    }
}) 

Другие вопросы по теме