CSS не связывается с HTML-реплицированием
Я использую replit для размещения сервера чата с использованием Node.js и Socket.io. Я использовал руководство по началу работы, предоставленное socket.io (https://socket.io/get-started/чат), и увидел, что HTML-код использует внутренний CSS. Я попытался изменить это и получил следующий код:
index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.info('a user connected');
socket.on('disconnect', () => {
console.info('user disconnected');
});
});
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
server.listen(3000, () => {
console.info('Site is up and running!');
});
index.html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<ul id = "messages"></ul>
<form id = "form" action = "">
<input id = "input" autocomplete = "off" /><button>Send</button>
</form>
<script src = "/socket.io/socket.io.js"></script>
<script>
var socket = io();
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
стили.css
body {
margin : 0;
padding-bottom : 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#form {
background : rgb(0, 0, 0, 0.15);
padding : 0.25rem;
position : fixed;
bottom : 0;
left : 0;
right : 0;
display : flex;
height : 3rem;
box-sizing : border-box;
backdrop-filter : blur(10px);
}
#input {
border : none;
padding : 0 1rem;
flex-grow : 1;
border-radius : 2rem;
margin : 0.25rem;
}
#input:focus {
outline : none;
}
#form > button {
background : #333;
border : none;
padding : 0 1rem;
margin : 0.25rem;
border-radius : 3px;
outline : none;
color : #fff;
}
#messages {
list-style-type : none;
margin : 0;
padding : 0;
}
#messages > li {
padding : 0.5rem 1rem;
}
#messages > li:nth-child(odd) {
background : #efefef;
}
Однако, когда я запускаю repl, ожидаемый результат не появляется, и CSS не применяется к HTML. Кто-нибудь может сказать мне, что происходит?
Ответы 1
Я думаю, вам следует использовать метод express.static() в файле index.js. Этот метод позволяет нам обслуживать статические файлы. сопутствующая документация
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
express.static(root, [options]) The root argument specifies the root directory from which to serve static assets.
For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png http://localhost:3000/hello.html
Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL. To use multiple static assets directories, call the express.static middleware function multiple times:
app.use(express.static('public'))`
app.use(express.static('files'))
Express looks up the files in the order in which you set the static directories with the express.static middleware function.