Node.js中http模块嵌入JS到HTML失效问题（聊天室场景）

It sounds like you're hitting a few common snags when combining Node.js's http server, HTML, and MQTT (Mosquitto) for your chat room. Let's break down the most likely issues and fix them one by one.

1. Fix Your HTTP Server to Serve Static Files #

The vanilla Node.js http module doesn’t automatically serve HTML, CSS, or JavaScript files—you have to handle those requests explicitly. If your JavaScript isn’t loading or interacting with the DOM, this is probably the first place to check.

Here’s an improved server example that serves your HTML and a separate JS file correctly:

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

const server = http.createServer((req, res) => {
  // Map root requests to your main HTML file
  let filePath = req.url === '/' ? './index.html' : `.${req.url}`;

  // Set correct content types for different files
  const extname = path.extname(filePath);
  let contentType = 'text/html';
  switch (extname) {
    case '.js': contentType = 'text/javascript'; break;
    case '.css': contentType = 'text/css'; break;
  }

  // Read and send the requested file
  fs.readFile(filePath, (error, content) => {
    if (error) {
      error.code === 'ENOENT' 
        ? (res.writeHead(404), res.end('File not found')) 
        : (res.writeHead(500), res.end(`Server Error: ${error.code}`));
    } else {
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });
});

const PORT = 3000;
server.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

2. Correct Your HTML Structure & Add MQTT Client Support #

Your provided HTML has a truncated <title> tag, and you’ll need an MQTT client library to connect to Mosquitto from the browser (browsers can’t use raw TCP MQTT—we need MQTT over WebSockets).

Here’s a fixed, functional HTML template:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    body { 
      background-color: black; 
      color: yellow;
      font-family: monospace;
    }
    #chat-messages {
      width: 500px;
      height: 400px;
      border: 1px solid yellow;
      padding: 10px;
      overflow-y: scroll;
      margin-bottom: 10px;
    }
    .inp { 
      background-color: black; 
      color: yellow; 
      width: 400px; 
      height: 60px;
      border: 1px solid yellow;
      padding: 5px;
    }
    .hld {
      padding: 5px;
      background-color: #222;
    }
  </style>
  <title>Global Chats</title>
  <!-- Include MQTT.js client (you can download it locally too) -->
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
  <h1>Global Chat Room</h1>
  <div id="chat-messages"></div>
  <div class="hld">
    <input type="text" class="inp" id="message-input" placeholder="Type your message...">
    <button onclick="sendMessage()">Send</button>
  </div>

  <script src="./chat.js"></script> <!-- Link to your custom chat logic -->
</body>
</html>

3. Configure Mosquitto for WebSockets #

By default, Mosquitto uses TCP port 1883, which browsers can’t access directly. Edit your Mosquitto config file (usually mosquitto.conf) to add a WebSocket listener:

// Keep your existing TCP listener for other clients
listener 1883

// Add WebSocket support on port 8080
listener 8080
protocol websockets

Restart Mosquitto after making this change.

4. Write Your Chat JavaScript (chat.js) #

Create this file to handle MQTT connections, message sending/receiving, and DOM updates:

// Connect to Mosquitto's WebSocket endpoint
const client = mqtt.connect('ws://localhost:8080');

// Grab DOM elements
const chatMessages = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');

// Handle successful MQTT connection
client.on('connect', () => {
  console.log('Connected to chat broker');
  client.subscribe('chat/global', err => {
    if (!err) console.log('Subscribed to global chat');
  });
});

// Display incoming messages
client.on('message', (topic, message) => {
  if (topic === 'chat/global') {
    const msgElement = document.createElement('div');
    msgElement.textContent = message.toString();
    chatMessages.appendChild(msgElement);
    // Auto-scroll to latest message
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
});

// Send message to the chat topic
function sendMessage() {
  const message = messageInput.value.trim();
  if (message) {
    client.publish('chat/global', message);
    messageInput.value = ''; // Clear input field
  }
}

// Optional: Send message on Enter key press
messageInput.addEventListener('keypress', e => {
  if (e.key === 'Enter') sendMessage();
});

5. Quick Debugging Tips #

If things still aren’t working:

• Open your browser’s developer tools (F12) and check the Console tab for errors (e.g., "MQTT connection failed" or "chat.js not found").
• Verify Mosquitto is running and port 8080 is accessible (use a WebSocket tester tool to check ws://localhost:8080).
• Double-check file paths in your server code match where your HTML/JS files are stored.

Content of the question来源于stack exchange，提问作者RishiC