在浏览器里跑虚拟机
我们即将在这个浏览器中运行一个完整的虚拟机环境！而且不只是运行虚拟机，我们还会启动 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上下载这些文件：
接下来，你需要从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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="libv86.js"></script>
<script type="module" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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/
想试试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
让它看起来特别酷炫 😎
想要那种真正的复古计算机感觉吗？让我们来添加一个完美的字体。
- 获取 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/
- 给你的朋友展示一下——他们肯定不信！🤯
想要完整的代码？这里拿就是了：
（链接部分保持不变，原文链接可以保留英文形式）
一些类似的东西可以看看，它们很酷炫
- JSLinux
- PC.js
- 写一个引导扇区
- Halfix x86 模拟器（演示页面）
- Mini.WebVM: 从 Dockerfile 构建自己的 Linux 系统，并通过 WebAssembly 在浏览器中运行
特别感谢...
(tèbié gǎnxiè...)
- V86 这个超赞的项目
- FreeDOS 和 Alpine Linux 的团队
- SeaBIOS 的团队成员
- 创作了 Modern DOS 字体的人
共同学习，写下你的评论
评论加载中...
作者其他优质文章
