运行在浏览器里的虚拟机-v86_网页虚拟机-CSDN博客

本文链接：https://blog.csdn.net/m0_73607424/article/details/136158535

在这里插入图片描述

🔥博客主页：PannLZ

😘欢迎关注：👍点赞🙌收藏✍️留言

文章目录

V86虚拟机

V86虚拟机

简介

v86虚拟机是一种基于浏览器的x86架构模拟器，可在浏览器中运行Linux系统，提供方便的实践环境。它提供多种操作系统环境，包括完整的Arch Linux、图形化Linux、以及最小化的Linux版本，支持网络访问、文件交换等功能。相较于传统虚拟机，v86虚拟机不需要安装即可直接在浏览器中运行，适合初学者学习Linux操作系统。

如何使用

v86的使用非常简单，在我们的html文件中使用下列代码就可以创建一个v86虚拟机：

 var emulator = window.emulator = new V86({
        wasm_path: "../build/v86.wasm",
        memory_size: 32 * 1024 * 1024,
        vga_memory_size: 2 * 1024 * 1024,
        screen_container: document.getElementById("screen_container"),
        bios: {
            url: "../bios/seabios.bin",
        },
        vga_bios: {
            url: "../bios/vgabios.bin",
        },
        cdrom: {
            url: "../images/linux.iso",
        },
        autostart: true,
    });

部署到本地：

在这里插入图片描述

运行效果：

在这里插入图片描述

我们也可以在一个浏览器页面创建两个v86虚拟机实例：

在这里插入图片描述

screen_container: document.getElementById("screen_container"),

如果没有这段代码的话，页面上不会有这个操作的界面。这时我们可以使用串口来与之进行通讯。比如emulator.serial0_send()等方法。

补充

web-gdb：

这是一个与之相关的有意思的项目：web-gdb,这是一个调试工具，它允许你通过 Web 浏览器进行程序调试。

在浏览器中运行结果如下：

在这里插入图片描述

镜像

至于如何使用buildroot来diy一个v86虚拟机的操作系统镜像，可以看这里：humphd/browser-vm: A small Linux x86 VM meant for use in the browser (github.com)

basic测试的全部代码

<!-- basic -->
<!doctype html>
<title>Basic Emulator</title><!-- not BASIC! -->

<script src="../build/libv86.js"></script>
<script>
"use strict";

window.onload = function()
{
    var emulator = window.emulator = new V86({
        wasm_path: "../build/v86.wasm",
        memory_size: 32 * 1024 * 1024,
        vga_memory_size: 2 * 1024 * 1024,
        screen_container: document.getElementById("screen_container"),
        bios: {
            url: "../bios/seabios.bin",
        },
        vga_bios: {
            url: "../bios/vgabios.bin",
        },
        cdrom: {
            url: "../images/linux.iso",
        },
        autostart: true,
    });
}
</script>

<!-- A minimal structure for the ScreenAdapter defined in browser/screen.js -->
<div id="screen_container">
    <div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
    <canvas style="display: none"></canvas>
</div>

<!-- ############################################################################### -->
<!-- two_instances.html -->
<!doctype html>
<title>Two emulators</title>

<script src="../build/libv86.js"></script>
<script>
"use strict";

window.onload = function()
{
    var container1 = document.getElementById("screen_container1");
    var container2 = document.getElementById("screen_container2");

    var emulator1 = new V86({
        wasm_path: "../build/v86.wasm",
        screen_container: container1,
        bios: {
            url: "../bios/seabios.bin",
        },
        vga_bios: {
            url: "../bios/vgabios.bin",
        },
        cdrom: {
            url: "../images/linux.iso",
        },
        autostart: true,
    });

    var emulator2 = new V86({
        wasm_path: "../build/v86.wasm",
        screen_container: container2,
        bios: {
            url: "../bios/seabios.bin",
        },
        vga_bios: {
            url: "../bios/vgabios.bin",
        },
        cdrom: {
            url: "../images/linux.iso",
        },
        autostart: true,
    });

    emulator2.keyboard_set_status(false);

    container1.addEventListener("mousedown", function(e)
    {
        container1.style.borderColor = "yellow";
        container2.style.borderColor = "black";

        emulator1.keyboard_set_status(true);
        emulator2.keyboard_set_status(false);
    }, false);

    container2.addEventListener("mousedown", function(e)
    {
        container1.style.borderColor = "black";
        container2.style.borderColor = "yellow";

        emulator1.keyboard_set_status(false);
        emulator2.keyboard_set_status(true);
    }, false);

    emulator1.add_listener("serial0-output-byte", function(byte)
    {
        var char = String.fromCharCode(byte);
        emulator2.serial0_send(char);
    });
    emulator1.add_listener("net0-send", function(data)
    {
        emulator2.bus.send("net0-receive", data);
    });
    emulator2.add_listener("net0-send", function(data)
    {
        emulator1.bus.send("net0-receive", data);
    });
};
</script>

Click on a screen to control it.<hr>

<div id="screen_container1" style="float: left; margin: 10px; border: 3px solid yellow;">
    <div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
    <canvas style="display: none"></canvas>
</div>

<div id="screen_container2" style="float: left; margin: 10px; border: 3px solid black;">
    <div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
    <canvas style="display: none"></canvas>
</div>