浏览器中除WebSocket外，是否支持本地文件流式读取API？

核心结论 #

浏览器原生API中没有像你设想的那种可以直接监听本地文件新增内容并触发data事件的API。传统的FileReader只能一次性读取文件的当前状态，无法感知文件后续被本地进程写入的新内容。

可用替代方案：File System Access API #

如果不想用WebSocket，可以尝试使用File System Access API，通过轮询文件大小变化、读取新增内容的方式模拟流式传输。这个API允许浏览器获取本地文件的持久句柄，重复读取文件内容。

实现示例 #

let fileHandle;
let lastReadSize = 0;
let checkInterval;

// 让用户选择目标文件
async function pickFile() {
  [fileHandle] = await window.showOpenFilePicker();
  const initialFile = await fileHandle.getFile();
  lastReadSize = initialFile.size;
  
  // 启动每秒一次的文件检查
  checkInterval = setInterval(checkFileUpdates, 1000);
}

async function checkFileUpdates() {
  if (!fileHandle) return;
  
  const currentFile = await fileHandle.getFile();
  // 仅当文件大小增加时读取新增部分
  if (currentFile.size > lastReadSize) {
    const newContentSlice = currentFile.slice(lastReadSize);
    const reader = new FileReader();
    
    reader.onload = (e) => {
      const newData = e.target.result;
      // 按行分割并处理新增数据（可根据需求调整）
      newData.split('\n').forEach(line => {
        if (line.trim()) {
          console.log('收到新增数据:', line);
          // 这里可执行自定义业务逻辑
        }
      });
    };
    
    reader.readAsText(newContentSlice);
    lastReadSize = currentFile.size;
  }
}

// 停止监听文件更新
function stopMonitoring() {
  clearInterval(checkInterval);
  fileHandle = null;
  lastReadSize = 0;
}

方案局限性 #

• 浏览器兼容性：仅Chromium内核浏览器（Chrome、Edge、Opera）原生支持，Firefox和Safari需开启实验性开关或仅部分支持。
• 轮询延迟：基于定时检查，无法做到真正的实时传输，延迟取决于设置的轮询间隔。
• 权限限制：必须由用户手动选择文件，浏览器无法自动访问本地文件，且需要HTTPS环境（localhost除外）。

最佳选择：WebSocket方案 #

如果上述方案的局限性无法满足需求，WebSocket是更可靠的选择：

1. 本地操作系统进程启动一个WebSocket服务器。
2. 浏览器作为客户端连接到该服务器。
3. 进程每次向文件写入内容后，直接将新数据推送给浏览器，实现真正的实时流式传输。
   这种方式兼容性更好、延迟更低，且不依赖特定浏览器API。

内容的提问来源于stack exchange，提问作者Alexander Mills