在浏览器中运行虚拟机

幻想多巴胺

于 2024-10-06 19:43:26 发布

阅读量310

点赞数 4

分类专栏：技术文章标签：前端

本文链接：https://blog.csdn.net/hongfu951/article/details/142730901

版权

超越标签：探索现代网页功能

第1集

我们将在你的浏览器中运行一个完整的虚拟机！不仅仅是运行虚拟机——我们还会启动 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. 设置我们的 Web 应用

如果你已经是 React 专家，可以跳过设置，直接跳到组件部分！

首先，使用 Vite 创建我们的应用（它超级快速和现代）：

npm create vite@latest

当它问你时：

选择一个项目名称（我选择“browser-vm”）
选择 React 作为框架。
选择 Javascript 作为变体。（保持通用，正如我承诺的）
然后运行：

cd browser-vm
npm install

组件

现在让我们设置我们的虚拟机显示。打开 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;
}