在浏览器里跑虚拟机-原创手记-慕课网

超越标签的限制：探索现代网页功能。第一集

我们即将在这个浏览器中运行一个完整的虚拟机环境！而且不只是运行虚拟机，我们还会启动 FreeDOS 和 Alpine Linux 系统。“等等，什么？我们已经有了 VirtualBox、VMware 和 DOSBox 来做这些事情！” 谁还需要 VirtualBox，当你有了一个浏览器时？（开玩笑的！😄）

但是，认真地说，让我们展示一下现代浏览器有多强大，尤其是在它们支持WebAssembly (Wasm)的情况下。当然，传统的虚拟机软件很棒，但是能够在浏览器中运行整个操作系统呢？这真的太酷了！🚀

如果更愿意直接看成品，你可以在这里找到完成的代码https://github.com/nadchif/in-browser-virtual-machine

在本指南中，我们将使用React.js，但我尽量说得笼统，这样你可以轻松地将这些内容应用到纯HTML或任何你喜欢的框架中。

所需材料

一些基本的 HTML、JavaScript 和 CSS 知识
不用担心，你现在用的浏览器大概率支持 WebAssembly 😊
安装了 Node.js。你可以从这里下载并按照步骤安装

好吧，让我们开始这个项目吧！

1. 搭建我们的网页应用

如果你已经是 React 的高手了，可以直接跳过设置，直接跳到组件那一部分！

我们首先使用Vite来创建我们的应用，它非常快速和现代化。

    npm create vite@latest

进入全屏模式退出全屏

当它问你时，

选择一个项目名称（我选择的是“browser-vm”这个名字）
选择 React 作为框架。
使用 JavaScript 作为脚本语言。（如承诺的一样，保持通用性 😄）
然后运行命令：

进入 browser-vm 目录 (cd browser-vm) 并安装 npm 包 (npm install)

全屏退出全屏

zh:指的是部件

现在我们来设置我们的虚拟机显示为如下所示的内容。打开App.jsx文件，用里面的所有内容替换为如下所示的内容：


    function App(){
    return (
     <div id="screen_container">
     <div id="screen" style={{overflow: 'hidden'}}>正在初始化模拟器</div>
     <canvas style={{display: 'none'}}></canvas>
     </div>
     );
    }
    export default App

进入全屏退出全屏

打开 index.css 文件并将其内容替换为：

#screen_container {
 white-space: pre;
 font-family: Courier, monospace;
 font-size: 14px;
 line-height: 14px;
 background-color: #000;
 color:#fff;
}

全屏模式退出全屏

2: 让我们的虚拟机准备好

我们正在使用一个超酷的项目叫做V86，它可以把你的浏览器变成一个真正的电脑模拟器。它利用WebAssembly实时翻译计算机指令——这真的很酷，不是吗？更多详情请看这里

在V86的GitHub上下载这些文件：

以下是所需的文件链接:
libv86.js 请参见:
v86.wasm 请参见:

接下来，你需要从V86仓库的bios文件夹中下载以下BIOS文件：

这里有两个文件：seabios.bin文件和vgabios.bin文件，这两个文件分别是 seabios.bin 和 vgabios.bin，可以从提供的链接下载。

把它们这样放到你的项目里。

例如，这个目录结构是用于虚拟化和模拟8086处理器环境的。
public/ (公共目录)
├── v86.wasm (用于虚拟8086处理器的WebAssembly文件)
├── libv86.js (与v86.wasm配套的JavaScript库)
└── bios/ (BIOS目录)
    ├── seabios.bin (用于模拟标准PC BIOS的文件)
    └── vgabios.bin (用于模拟标准VGA BIOS的文件)

这里包含了模拟8086处理器所需的关键文件。

点击全屏进入全屏模式，点击退出退出全屏模式

3. 是时候让它大显身手了！

在你的 index.html 中添加我们的 VM 引擎的脚本：<script src="libv86.js"></script>：


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FreeDOS 1.2</title>
    </head>
    <body>
     <div id="root"></div>
    <script src="libv86.js"></script>
     <script type="module" src="/src/main.jsx"></script>
    </body>
    </html>

切换到全屏 / 退出全屏

现在是好玩的部分——让我们来设置一下我们的虚拟机吧，将 App.jsx 的内容更新为。


    import { useEffect } from 'react';
    function App() {

    useEffect(function initializeEmulator(){
     // 查看选项 https://github.com/copy/v86/blob/master/src/browser/starter.js
     window.emulator = new window.V86({
       wasm_path: '/v86.wasm',
       screen_container: document.getElementById("screen_container"),
       bios: {
         url: "/bios/seabios.bin",
       },
       vga_bios: {
         url: "/bios/vgabios.bin",
       },
       hda: { // 硬盘路径（URL）
        url:  "/images/fd12-base.img",
        async:  true,
        size: 419430400, // 推荐在 URL 中指定镜像的大小，以获取更好的性能。参见 https://github.com/copy/v86/blob/master/src/browser/starter.js
       },
       autostart: true,
     });
    }, []);

    return (
         <div id="screen_container">
           <div id="screen" style={{overflow: 'hidden'}}>初始化模拟器中…</div>
           <canvas style={{display: 'none'}}></canvas>
         </div>
       );
    }
    export default App;

全屏模式，退出全屏

有关可用的模拟器选项的更多信息，请参阅：https://github.com/copy/v86/blob/master/src/browser/starter.js

来试试启动一些操作系统吧！

首先来的是：FreeDOS，一个免费的 DOS 发行版

咱们先来点好玩的——FreeDOS! 它非常适合运行经典的DOS游戏和软件。在这里下载预编译版本，然后解压 fd12-base.img，把它放到你的 public images 文件夹里。

启动Web应用，请运行：

运行开发命令 `npm run dev`

全屏，退出全屏

在你的浏览器中打开 http://localhost:5173/

Booting up FreeDOS within the browser

想试试Linux吗?

更酷的是，我们可以在浏览器中运行Alpine Linux！下载最新版的Alpine虚拟ISO并更新虚拟机的设置，使之符合如下要求：


    window.emulator = new window.V86({
      wasm_path:  '/v86.wasm',
      screen_container:  document.getElementById("screen_container"),
      bios: {
        url:  "/bios/seabios.bin",
      },
      vga_bios: {
        url:  "/bios/vgabios.bin",
      },
      boot_order: '0x123', // 从CD-ROM开始启动
      memory_size: 512 * 1024 * 1024, // 512MB 内存大小
      vga_memory_size: 64 * 1024 * 1024, // 64MB VGA 内存大小
      // 详情请参阅: https://github.com/copy/v86/blob/master/docs/networking.md
      net_device: {
        type: 'virtio',
        relay_url: "wisp://wisp.mercurywork.shop",
      },
      cdrom: {
        // 下载链接: https://dl-cdn.alpinelinux.org/alpine/v3.20/releases/x86/alpine-virt-3.20.3-x86.iso
        url: "/images/alpine-virt-3.20.3-x86.iso", 
      },
      autostart:  true,
    });

进入全屏退出全屏

刷新浏览器页面并等待Linux启动。这可能要花3到5分钟 😅。在被要求登录时，输入：root

在浏览器中运行的 Alpine Linux 3.20 登录提示

让它看起来特别酷炫 😎

想要那种真正的复古计算机感觉吗？让我们来添加一个完美的字体。

获取 Modern DOS 字体。
将文件放入项目中的 assets/fonts/ModernDOS 目录，并将 index.css 更新为：


    @font-face {
     font-family: 'ModernDOS';
     src: url('./assets/fonts/ModernDOS/ModernDOS8x16.ttf') format('truetype');
    }
    #screen_container {
     white-space: pre;
     font-family: 'ModernDOS', 'Courier New', Courier, monospace;
     font-size: 14px;
     line-height: 14px;
     background-color: #000;
     color:#fff;
    }

进入全屏退出全屏

刷新一下页面，看看新面貌！

下接下来会是什么？

（优化后：）

下接下来会怎样？

你现在已经在浏览器里运行了一个虚拟机（这有多酷啊！），这里有一些好玩的事情可以试试。

运行一些经典的 DOS 游戏，试试这些游戏 - https://www.freedos.org/about/games/
玩玩 Linux 命令 - https://www.freecodecamp.org/news/the-linux-commands-handbook/
给你的朋友展示一下——他们肯定不信！🤯

想要完整的代码？这里拿就是了：

（链接部分保持不变，原文链接可以保留英文形式）

一些类似的东西可以看看，它们很酷炫

特别感谢...

(tèbié gǎnxiè...)

V86 这个超赞的项目
FreeDOS 和 Alpine Linux 的团队
SeaBIOS 的团队成员
创作了 Modern DOS 字体的人