如何在本地浏览器中动态展示Electron BrowserWindow的内容？

编辑说明： 我已解决问题，之前发送receive-chunk IPC消息时用错了BrowserWindow，且需为webReader.html创建两个独立脚本，分别用于Electron环境和浏览器环境。

我的Electron应用主BrowserWindow里有一个<textarea />，想要把这个元素的内容同步展示到本地的真实浏览器窗口中，而且用户在<textarea />输入新文本时，浏览器里的内容要实时更新。我尝试用HTTP服务器+WebSocket来实现，但不知道怎么在浏览器里展示我的Electron HTML页面。

现有实现流程 #

每当用户输入一个新词，我会把这个词发送到主进程，主进程通过以下处理器转发到次级渲染进程：

ipcMain.on('send-chunk', async (_event, data) => {
    console.log('data from main renderer:', data)
    mainWindow.webContents.send('receive-chunk', data)
  })

次级渲染进程代码

const { ipcRenderer } = require('electron')
const WebSocket = require('ws')

const webReaderDisplay = document.getElementById('web-reader-display')
const webReaderContents = []

const ws = new WebSocket('ws://localhost:8080')

ws.onopen = function (event) {
  console.log('WebSocket connection opened:', event)
}

ws.onmessage = function (event) {
  console.log('renderer received: %s', event.data)
  webReaderContents.push(event.data)
  webReaderDisplay.textContent = webReaderContents.join(' ')
}

ws.onerror = function (event) {
  console.error('WebSocket error observed:', event)
}

ws.onclose = function (event) {
  console.log('WebSocket connection closed:', event)
}

ipcRenderer.on('receive-chunk', (_event, data) => {
  ws.send(data)
})

服务器代码

const Server = require('http')
const { WebSocketServer } = require('ws')

const server = Server.createServer((req, res) => {
  res.writeHead(200)
  res.end('hello world')
})

const wss = new WebSocketServer({ server })

wss.on('connection', ws => {
  console.log('Client connected')

  ws.on('message', message => {
    console.log('received: %s', message)
  })

  ws.on('close', () => {
    console.log('Client disconnected')
  })
})

server.listen(8080)

HTML文件代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="../dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <header class="text-center text-system-platinum bg-system-gray-dark">
      <h3>实时转录</h3>
    </header>
    <section class="bg-system-platinum">
      <div class="border-system-gray-dark indent-4">
        <p class="text-system-gray-dark" id="web-reader-display">
          文本将显示在这里
        </p>
      </div>
    </section>
    <script src="webReaderRenderer.js"></script>
  </body>
</html>

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