我们将在浏览器中运行一个完整的虚拟机！不仅仅是运行虚拟机——我们将同时启动FreeDOS和Alpine Linux。“等等,什么?我们已经有了VirtualBox、VMware和DOSBox。”当你有浏览器的时候，谁还需要VirtualBox呢？(只是开玩笑!😄)
但是说真的，现代浏览器已经变得多么强大，特别是它们支持WebAssembly （Wasm）。当然，传统的虚拟机软件很棒，但是能够在浏览器中运行整个操作系统？太酷了！🚀
如果您想直接跳到完成的产品，您可以在这里找到完整的代码github.com/nadchif/in-…
在本指南中，我们将使用React.js，但我将保持通用性，您可以将所有内容改编为纯HTML或任何您满意的框架。
Okay，让我们来做这个东西！
1. 设置我们的Web应用程序
如果你已经是React专业人士，可以跳过设置，直接跳到组件部分！
首先，让我们使用Vite创建我们的应用程序（它非常快速和现代）：
npm create vite@latest
当它问你：
- 选择一个项目名称（我将使用“browser-vm”）
- 选择
React作为框架。 - 使用
Javascript作为变量。 - 然后运行:
cd browser-vm
npm install
组件
现在让我们设置VM显示。打开 App.jsx 将所有内容替换为以下内容：
function App(){
return (
<div id="screen_container">
<div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</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版本中获取这些文件：github.com/copy/v86/re…
接下来，从V86存储库的BIOS文件夹中下载以下BIOS文件：
像这样把它们放在你的项目中：
public/
├── v86.wasm
├── libv86.js
└── bios/
├── seabios.bin
└── vgabios.bin
3. 是时候让它发挥作用了！
通过添加 <script scr="libv86.js"></script> 来更新index.html以包含我们的VM引擎：
<!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(){
// See https://github.com/copy/v86/blob/master/src/browser/starter.js for options
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: { // Hard Disk
url: "/images/fd12-base.img",
async: true,
size: 419430400, // Recommended to add size of the image in URL. see https://github.com/copy/v86/blob/master/src/browser/starter.js
},
autostart: true,
});
}, []);
return (
<div id="screen_container">
<div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</div>
<canvas style={{display: 'none'}}></canvas>
</div>
);
}
export default App;
有关可用模拟器选项的更多详细信息，请查看：github.com/copy/v86/bl…
让我们启动操作系统！
首先是FreeDOS
让我们从一些有趣的东西开始——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', // Boot from CD-ROM first
memory_size: 512 * 1024 * 1024, // 512MB RAM
vga_memory_size: 64 * 1024 * 1024, // 64MB VGA RAM
// See more: https://github.com/copy/v86/blob/master/docs/networking.md
net_device: {
type: 'virtio',
relay_url: "wisps://wisp.mercurywork.shop",
},
cdrom: {
// Source: 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
让它看起来特别酷😎
想要真正的复古电脑感觉吗？让我们添加一个完美的字体：
- 获取现代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游戏- www.freedos.org/about/games…
- 玩Linux命令- www.freecodecamp.org ews/the-linux-commands-handbook/
想要完整的代码？点击这里下载：
