如何实现浏览器无刷新实时更新本地文本文件内容？

Got it, let's get your browser updating automatically whenever your doc.txt changes—no manual refreshes required! Let's start by fixing the core issue with your current code, then walk through two solid solutions.

What's Wrong With Your Current Code? #

Your existing setup uses a standard HTTP request/response cycle: when you hit /read, the server sends the file content and closes the connection. The fs.watchFile inside that handler doesn't do anything useful because the response already ended—there's no way to send new content to the browser after resp.end(file) runs. To push updates to the browser, we need a long-lived connection that stays open so the server can send data whenever the file changes.

Solution 1: Server-Sent Events (SSE) (Simplest for One-Way Updates) #

SSE is built into browsers and Node.js, making it the easiest option for this use case (since we only need to push file updates to the browser, not send data the other way).

Step 1: Update Your Node.js Server #

const http = require('http');
const fs = require('fs');
const filepath = "C:/Projects/Test/doc.txt";

const server = http.createServer((req, res) => {
  // Serve a basic HTML page to display the file content
  if (req.url === "/") {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`
      <!DOCTYPE html>
      <html>
        <body>
          <h1>Live File Content</h1>
          <div id="file-content"></div>
          <script>
            // Connect to the SSE stream
            const eventSource = new EventSource('/stream');
            const contentDiv = document.getElementById('file-content');
            
            // Update the page when we get new content from the server
            eventSource.onmessage = (event) => {
              contentDiv.textContent = event.data;
            };
            
            // Handle errors
            eventSource.onerror = (error) => {
              console.error('SSE connection error:', error);
              eventSource.close();
            };
          </script>
        </body>
      </html>
    `);
  }

  // SSE endpoint that streams file updates
  else if (req.url === "/stream") {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*' // Optional: if testing from a different origin
    });

    // Send the initial file content
    fs.readFile(filepath, (err, data) => {
      if (!err) {
        res.write(`data: ${data.toString()}\n\n`);
      }
    });

    // Watch for file changes and send updates
    fs.watchFile(filepath, { interval: 1000 }, (curr, prev) => {
      if (curr.mtime !== prev.mtime) { // Only trigger if the file was modified
        fs.readFile(filepath, (err, data) => {
          if (!err) {
            res.write(`data: ${data.toString()}\n\n`);
          }
        });
      }
    });

    // Clean up the watcher when the client disconnects
    req.on('close', () => {
      fs.unwatchFile(filepath);
      res.end();
    });
  }

  // Handle other routes
  else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

server.listen(5050);
console.log('Server running on http://localhost:5050');

How This Works: #

• Visit http://localhost:5050 and the server serves an HTML page with a script that connects to the /stream endpoint via EventSource.
• The /stream endpoint keeps the HTTP connection open (thanks to Connection: keep-alive).
• It sends the initial file content, then listens for changes to doc.txt. Every time the file is modified, it sends the new content as an SSE message.
• The browser's EventSource listens for these messages and updates the page automatically.

Solution 2: WebSocket (For Two-Way Communication) #

If you ever need to send data from the browser to the server too, WebSockets are the way to go. We'll use the popular ws library for this.

Step 1: Install the ws Library #

npm install ws

Step 2: Node.js Server Code #

const http = require('http');
const fs = require('fs');
const WebSocket = require('ws');
const filepath = "C:/Projects/Test/doc.txt";

const server = http.createServer((req, res) => {
  if (req.url === "/") {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(`
      <!DOCTYPE html>
      <html>
        <body>
          <h1>Live File Content (WebSocket)</h1>
          <div id="file-content"></div>
          <script>
            const ws = new WebSocket('ws://localhost:5050');
            const contentDiv = document.getElementById('file-content');
            
            // Update page when we get a message from the server
            ws.onmessage = (event) => {
              contentDiv.textContent = event.data;
            };
            
            ws.onerror = (error) => {
              console.error('WebSocket error:', error);
            };
            
            ws.onclose = () => {
              console.log('WebSocket connection closed');
            };
          </script>
        </body>
      </html>
    `);
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

// Create WebSocket server attached to the HTTP server
const wss = new WebSocket.Server({ server });

// Send initial file content to new connections
wss.on('connection', (ws) => {
  fs.readFile(filepath, (err, data) => {
    if (!err) {
      ws.send(data.toString());
    }
  });

  // Handle client disconnection
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

// Watch for file changes and send updates to all connected clients
fs.watchFile(filepath, { interval: 1000 }, (curr, prev) => {
  if (curr.mtime !== prev.mtime) {
    fs.readFile(filepath, (err, data) => {
      if (!err) {
        wss.clients.forEach((client) => {
          if (client.readyState === WebSocket.OPEN) {
            client.send(data.toString());
          }
        });
      }
    });
  }
});

server.listen(5050);
console.log('Server running on http://localhost:5050');

How This Works: #

• The HTTP server serves an HTML page that connects to the WebSocket server.
• When a client connects, the server sends the current file content.
• Whenever doc.txt changes, the server sends the new content to all connected clients instantly.
• WebSockets support two-way communication, so you could add features like editing the file from the browser if you wanted.

Quick Notes: #

• For better performance, consider using fs.watch instead of fs.watchFile—it's more efficient, though it has minor platform-specific quirks.
• In production, add extra error handling for file read failures and limit concurrent connections to keep things stable.

内容的提问来源于stack exchange，提问作者varsha sathyan