CSS 加载但不执行任何操作

Question

我正在尝试使用 Socket.IO、p5.js 和 NodeJS 制作一款基本的多人游戏，并将其托管在 Replit 上。

我有一个基本的 httpServer 和 socket.io，它可以很好地处理 HTML、CSS 和 JavaScript 文件。但是当我将 <link> 标签放在 HTML 中以加载 CSS 时，CSS 加载正常（我可以在 Sources[= Chrome DevTools 中的 46=] 选项卡）但它实际上并不适用于 HTML.

代码是here，但我也会把它放在这里。

index.js NodeJS 主文件

const { readFileSync } = require('fs'); const { createServer } = require('http'); const { Server } = require('socket.io'); const httpServer = createServer((req, res) => { const r = /^\/?(index\.(html|css|js))?$/i; if (!r.test(req.url)) { res.writeHead(404); res.end('Not found'); return; } const m = req.url.match(r); // reload the file every time const content = readFileSync(__dirname + '/public/' + (m[1] || 'index.html')); const length = Buffer.byteLength(content); res.writeHead(200, { 'Content-Type': 'text/html', 'Content-Length': length, }); res.end(content); }); const io = new Server(httpServer, { // Socket.IO options }); let players = {}; io.on('connection', (socket) => { players[socket.id] = { id: socket.id, x: 0, y: 0 }; socket.on('disconnect', (reason) => { delete players[socket.id]; }); }); io.on('data', data => { players[data.id].x += data.x; players[data.id].y += data.y; }); setInterval(() => { io.sockets.emit('data', players); }, 1000 / 60); httpServer.listen(6001);

public/index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Multiplayer Online IO Game 2</title> <link rel="stylesheet" href="index.css"> <script src="/socket.io/socket.io.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="/index.js" defer></script> </head> <body> </body> </html>

public/index.css

body { margin: 0px; overflow: hidden; } canvas { display: none; }

canvas' display: none 是为了看看 CSS 是否真的做了什么，但它没有。

public/index.js客户端JavaScript

let ID = null; let players = {}; const socket = io({ // Socket.IO options }); socket.on('connect', () => { ID = socket.id; }); socket.on('connect_error', (err) => { alert(`There was an error connecting to the WebSocket server:\n${err.message}`); }); socket.on('data', (data) => { players = data; }); function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(255); fill(0); for (const id of Object.keys(players)) { const player = players[id]; circle(player.x, player.y, 10); }

}

Answer 1

无论返回的文件类型如何，您的服务器对所有响应都使用内容类型 text/html。某些 Web 浏览器对内容类型很严格，如果内容类型错误，则不会处理样式表。这是一个修复示例：

const httpServer = createServer((req, res) => {
  const r = /^\/?(index\.(html|css|js))?$/i;

  if (!r.test(req.url))
  {
    res.writeHead(404);
    res.end('Not found');

    return;
  }

  const m = req.url.match(r);

  // reload the file every time
  const content = readFileSync(__dirname + '/public/' + (m[1] || 'index.html'));
  const length = Buffer.byteLength(content);

  res.writeHead(200, {
    // Determine the content type based on the file extension
    'Content-Type': m[2] ? getContentType(m[2]) : 'text/html',
    'Content-Length': length,
  });
  res.end(content);
});

function getContentType(ext) {
  switch (ext.toLowerCase()) {
    case 'html':
      return 'text/html';
    case 'css':
      return 'text/css';
    case 'js':
      return 'text/javascript';
    default:
      return 'application/octet-stream';
  }
}

您可能要考虑使用功能更全面的 HTTP 服务器，例如 express，而不是自己动手。

CSS 加载但不执行任何操作

CSS loads but doesn't do anything

html

css

httpserver

node.js

p5.js