mirror of
https://github.com/copy/v86.git
synced 2025-12-31 04:23:15 +00:00
add "tcp terminal" example for fetch-based networking
This commit is contained in:
SuperMaxusa
Fabian
parent
430c60b0ad
commit
69d0751b95
3 changed files with 148 additions and 0 deletions
|
|
@ -163,6 +163,7 @@ See [tests/Readme.md](tests/Readme.md) for more information.
|
|||
- [A Lua interpreter](examples/lua.html)
|
||||
- [Two instances in one window](examples/two_instances.html)
|
||||
- [Networking between browser windows/tabs using the Broadcast Channel API](examples/broadcast-network.html)
|
||||
- [TCP Terminal (fetch-based networking)](examples/tcp_terminal.html)
|
||||
- [Saving and restoring emulator state](examples/save_restore.html)
|
||||
|
||||
Using v86 for your own purposes is as easy as:
|
||||
|
|
|
|||
|
|
@ -158,6 +158,8 @@ This backend is efficient and very useful in cases where CORS is not in the way,
|
|||
|
||||
Like the [`wisp`](#the-wisp-backend) backend, the `fetch` backend handles DHCP and ARP requests from guests internally, and additionally monitors the guest's outbound traffic for HTTP requests which it translates into calls to `fetch()`. NTP, ICMP pings and UDP echo packets are handled to a certain degree. Note that `fetch()` performs the DNS lookup using the browser's internal DNS client. See PR [#1061](https://github.com/copy/v86/pull/1061) for additional technical details.
|
||||
|
||||
Starting with PR [#1233](https://github.com/copy/v86/pull/1233), the TCP guest listener can be accessed from JS API, see the [examples/tcp_terminal.html](../examples/tcp_terminal.html) example.
|
||||
|
||||
v86 guests are isolated from each other when using the `fetch` backend.
|
||||
|
||||
**CORS proxy server**
|
||||
|
|
@ -209,5 +211,6 @@ Network backends `wsproxy` and `wisp` depend on a browser-compatible `WebSocket`
|
|||
|
||||
* [`examples/two_instances.html`](../examples/two_instances.html), example code that shows how to connect two VMs in a web page with a virtual ethernet crossover cable.
|
||||
* [`examples/broadcast-network.html`](../examples/broadcast-network.html), example code that shows the raw packet API.
|
||||
* [`examples/tcp_terminal.html`](../examples/tcp_terminal.html), example code that shows how to communicate with a guest TCP port on the `fetch` backend.
|
||||
* [DC through windows OS for experimental lab #1195](https://github.com/copy/v86/discussions/1195), demonstrates how to setup a Domain Controller for two Windows VMs (XP and Server 2003) using a virtual crossover cable.
|
||||
* [Working on a new cross-platform network relay that is a full virtualized network #1064](https://github.com/copy/v86/discussions/1064) (used in [env86 #1085](https://github.com/copy/v86/discussions/1085))
|
||||
|
|
|
|||
144
examples/tcp_terminal.html
Normal file
144
examples/tcp_terminal.html
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<!doctype html>
|
||||
<title>TCP Terminal</title>
|
||||
|
||||
<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: 64 * 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",
|
||||
},
|
||||
bzimage: {
|
||||
url: "../images/buildroot-bzimage68.bin",
|
||||
},
|
||||
net_device: {
|
||||
relay_url: "fetch",
|
||||
type: "virtio"
|
||||
},
|
||||
autostart: true
|
||||
});
|
||||
|
||||
var is_connected = false, connection = null;
|
||||
|
||||
function clear_log()
|
||||
{
|
||||
document.getElementById("log").value = "";
|
||||
}
|
||||
|
||||
function write_log(text)
|
||||
{
|
||||
document.getElementById("log").value += text;
|
||||
}
|
||||
|
||||
function on_connect()
|
||||
{
|
||||
document.getElementById("connect").innerHTML = "Disconnect";
|
||||
document.getElementById("send").disabled = false;
|
||||
is_connected = true;
|
||||
}
|
||||
|
||||
function on_disconnect()
|
||||
{
|
||||
document.getElementById("connect").innerHTML = "Connect";
|
||||
document.getElementById("send").disabled = true;
|
||||
is_connected = false;
|
||||
}
|
||||
|
||||
document.getElementById("connect").onclick = async function() {
|
||||
if(!is_connected)
|
||||
{
|
||||
clear_log();
|
||||
let port = parseInt(document.getElementById("port").value);
|
||||
write_log("> Probing port " + port + "\n");
|
||||
|
||||
let open = await emulator.network_adapter.tcp_probe(port);
|
||||
if(open)
|
||||
{
|
||||
connection = emulator.network_adapter.connect(port);
|
||||
|
||||
connection.on("connect", function()
|
||||
{
|
||||
write_log("> Connected\n\n");
|
||||
on_connect();
|
||||
});
|
||||
|
||||
connection.on("data", function(data)
|
||||
{
|
||||
write_log(new TextDecoder().decode(data));
|
||||
});
|
||||
|
||||
connection.on("close", function()
|
||||
{
|
||||
write_log("\n> Closed by listener");
|
||||
on_disconnect();
|
||||
});
|
||||
|
||||
connection.on("shutdown", function()
|
||||
{
|
||||
write_log("\n> Shutdown by listener");
|
||||
on_disconnect();
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
write_log("> Probing failed");
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
connection.close();
|
||||
write_log("\n> Closed by client");
|
||||
on_disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("send").onclick = function()
|
||||
{
|
||||
connection.write(new TextEncoder().encode(document.getElementById("prompt").value + "\r\n"));
|
||||
document.getElementById("prompt").value = "";
|
||||
}
|
||||
|
||||
document.getElementById("prompt").onkeydown = function(e)
|
||||
{
|
||||
if(e.which == 13 && is_connected)
|
||||
{
|
||||
document.getElementById("send").onclick();
|
||||
}
|
||||
};
|
||||
|
||||
clear_log();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="screen_container" style="float: left">
|
||||
<div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
|
||||
<canvas style="display: none"></canvas>
|
||||
</div>
|
||||
|
||||
<div style="float: left; margin: 10px">
|
||||
<textarea readonly cols="60" rows="15" id="log"></textarea><br>
|
||||
Port: <input type="number" min="1" max="65535" value="1234" id="port" />
|
||||
<button id="connect">Connect</button> <input type="text" id="prompt" />
|
||||
<button id="send" disabled="true">Send (enter)</button>
|
||||
|
||||
<h3>Getting started</h3>
|
||||
<ol>
|
||||
<li>Run <code>udhcpc</code></li>
|
||||
<li>Run any TCP server:
|
||||
<ul>
|
||||
<li>Echo: <code>socat -v PIPE TCP-L:1234,fork</code></li>
|
||||
<li>(more examples on <a href="broadcast-network.html">broadcast-network.html</a>)</li>
|
||||
</ul>
|
||||
<li>Type a port number and press "Connect"</li>
|
||||
</ol>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue