add javascript example

pull/105/head
Falk Werner 1 year ago
parent 17d6275d96
commit acbcbc1d97

@ -3,15 +3,35 @@
<head>
<title>Webfuse Example</title>
<script type="module" src="js/startup.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Webfuse</h1>
<h1>Webfuse Example</h1>
<p>
This example provides a single file "README.md", which
contents can be altered below.
</p>
<h2>Connection</h2>
<p>
<label for="url">Url:</label>
<input type="text" id="url" value="ws://localhost:8081"/>
</p>
<p>
<label for="token">Token:</label>
<input type="text" id="token" value="" />
</p>
<p>
<input type="button" id="connect" value="Connect"/>
<span id="state">disconnected</span>
</p>
<h2>README.md</h2>
<p>
<textarea id="contents"># Webfuse
This is a sample text.
</textarea>
</p>
</body>
</html>

@ -0,0 +1,104 @@
import { BaseFileSystem, ERRNO, Mode, AccessMode, OpenFlags } from "./webfuse/webfuse.js"
class FileSystem extends BaseFileSystem {
constructor(tokenProvider, stateListener, files) {
super();
this.tokenProvider = tokenProvider;
this.stateListener = stateListener
this.files = new Map();
for(const file of files) {
this.files.set("/" + file.name, file);
}
}
access(path, mode) {
// we do not allow write or execute
if ((mode & AccessMode.W_OK) || (mode & AccessMode.X_OK)) {
return ERRNO.EACCES;
}
if ((path = "/") || (this.files.has(path))) {
return 0;
}
return ERRNO.ENOENT;
}
getattr(path) {
if (path == "/") {
return {
nlink: 2,
mode: Mode.DIR | 0o555
};
}
else if (this.files.has(path)) {
const file = this.files.get(path);
const contents = file.contents();
return {
nlink: 1,
mode: Mode.REG | 0o444,
size: contents.length
};
}
return ERRNO.ENOENT;
}
readdir(path) {
if (path == "/") {
const list = [];
for(const file of this.files.values()) {
list.push(file.name);
}
return list;
}
return ERRNO.ENOENT;
}
open(path, flags) {
if (this.files.has(path)) {
const accessMode = flags & OpenFlags.ACCESS_MODE;
if (accessMode == OpenFlags.RDONLY) {
return [0, 0];
}
else {
return [ERRNO.EPERM, 0];
}
}
return [ERRNO.ENOENT, 0];
}
read(path, size, offset, fd) {
if (this.files.has(path)) {
const file = this.files.get(path);
const contents = file.contents();
if (offset < contents.length) {
const available = contents.length - offset;
const length = (size < available) ? size : available;
const data = contents.slice(offset, offset + length);
return data;
}
return [];
}
else {
return ERRNO.EBADF;
}
}
getcreds() {
const token = this.tokenProvider();
return token;
}
connectionstatechanged(state) {
this.stateListener(state);
}
}
export { FileSystem }

@ -1,19 +1,40 @@
import { Webfuse } from "./webfuse/webfuse.js";
import { StaticFileSystem } from "./static_filesystem.js";
import { FileSystem } from "./filesystem.js";
function encode(value) {
const encoder = new TextEncoder('utf-8');
return encoder.encode(value);
}
function get_contents() {
const contentTextArea = document.querySelector("#contents");
const contents = contentTextArea.value;
return encode(contents);
}
function get_token() {
const tokenTextfield = document.querySelector('#token');
const token = tokenTextfield.value;
return token;
}
function update_state(state) {
const stateTextField = document.querySelector("#state");
stateTextField.textContent = (state == "connected") ? "connected" : "disconnected";
}
let webfuse = null;
const filesystem = new StaticFileSystem(new Map([
["/foo", "foo"],
["/bar", "foo"]
]));
const filesystem = new FileSystem(get_token, update_state, [
{name: "README.md", contents: get_contents }
]);
function onConnectButtonClicked() {
if (webfuse) { webfuse.close(); }
const urlTextfield = document.querySelector('#url');
const url = urlTextfield.value;
console.log(url);
webfuse = new Webfuse(url, filesystem);
}

@ -1,41 +0,0 @@
import { BaseFileSystem, ERRNO, Mode } from "./webfuse/webfuse.js"
class StaticFileSystem extends BaseFileSystem {
constructor(files) {
super();
this.files = files;
}
getattr(path) {
console.log("getattr", path);
if (path == "/") {
return {
nlink: 2,
mode: Mode.DIR | 0o555
};
}
else if (this.files.has(path)) {
const contents = this.files.get(path);
return {
nlink: 1,
mode: Mode.REG | 0o444,
size: contents.length
}
}
return ERRNO.ENOENT;
}
readdir(path) {
if (path == "/") {
return ["foo", "bar"]
}
return ERRNO.ENOENT;
}
}
export { StaticFileSystem }

@ -27,15 +27,19 @@ class BaseFileSystem {
}
chmod(path, mode) {
return ERRNO.ENOENT;
return ERRNO.EPERM;
}
chown(path, uid, gid) {
return ERRNO.ENOENT;
return ERRNO.EPERM;
}
truncate(path, size, fd) {
return ERRNO.ENOENT;
return ERRNO.EPERM;
}
fsync(path, isDataSync, fd) {
return 0;
}
open(path, flags) {
@ -43,31 +47,31 @@ class BaseFileSystem {
}
mknod(path, mode, rdev) {
return ERRNO.ENOENT;
return ERRNO.EPERM;
}
create(path, mode) {
return [ERNNO.ENOEND, 0];
return [ERRNO.EPERM, 0];
}
release(path, fd) {
return ERRNO.ENOENT;
return 0;
}
unlink(path) {
return ERRNO.ENOENT;
return ERRNO.EPERM;
}
read(path, size, offset, fd) {
return ERRNO.ENOENT;
return ERRNO.EBADF;
}
write(path, data, offset, fd) {
return ERRNO.ENOENT;
return ERRNO.EBADF;
}
mkdir(path, mode) {
return ERRNO.ENOENT;
return ERRNO.EPERM;
}
readdir(path) {
@ -75,16 +79,24 @@ class BaseFileSystem {
}
rmdir(path) {
return ERRNO.ENOENT;
return ERRNO.EPERM;
}
statfs(path) {
return ERRNO.ENOENT;
return ERRNO.ENOSYS;
}
utimens(path, atime, mtime) {
return ERRNO.ENOSYS;
}
getcreds() {
return "";
}
connectionstatechanged(state) {
// pass
}
}
export { BaseFileSystem }

@ -1,7 +1,6 @@
class MessageReader {
constructor(data) {
// console.log(new Uint8Array(data));
this.raw = data;
this.data = new DataView(data);
this.pos = 0;

@ -67,7 +67,6 @@ class MessageWriter {
}
get_data() {
// console.log(this.data)
return new Uint8Array(this.data);
}

@ -0,0 +1,28 @@
const OpenFlags = {
ACCESS_MODE: 0x03,
RDONLY : 0o00,
WRONLY : 0o01,
RDWR : 0o02,
APPEND : 0o00002000,
ASYNC : 0o00020000,
CLOEXEC : 0o02000000,
CREAT : 0o00000100,
DIRECT : 0o00040000,
DIRECTORY : 0o00200000,
DSYNC : 0o00010000,
EXCL : 0o00000200,
LARGEFILE : 0o00100000,
NOATIME : 0o01000000,
NOCTTY : 0o00000400,
NOFOLLOW : 0o00400000,
NONBLOCK : 0o00004000,
NDELAY : 0o00004000,
PATH : 0o10000000,
SYNC : 0o04010000,
TMPFILE : 0o20200000,
TRUNC : 0o00001000
};
export { OpenFlags }

@ -2,6 +2,7 @@ import { MessageWriter } from "./messagewriter.js";
import { MessageReader } from "./messagereader.js";
import { ERRNO } from "./errno.js";
import { AccessMode } from "./accessmode.js";
import { OpenFlags } from "./openflags.js";
import { BaseFileSystem } from "./basefilesystem.js";
@ -20,7 +21,7 @@ const Mode = {
function fs_access(reader, writer, filesystem) {
const path = reader.read_str();
const mode = reader.read_u8();
result = filesystem.access(path, mode);
const result = filesystem.access(path, mode);
writer.write_i32(result);
}
@ -156,7 +157,7 @@ function fs_read(reader, writer, filesystem) {
const fd = reader.read_u64();
const result = filesystem.read(path, size, offset, fd);
if (typeof(result) != "number") {
writer.write_i32(0);
writer.write_i32(result.length);
writer.write_bytes(result);
}
else {
@ -259,10 +260,9 @@ const commands = new Map([
class Webfuse {
constructor(url, filesystem) {
console.log('webfuse: ctor')
this.ws = new WebSocket(url, ["webfuse2"]);
this.ws.binaryType = 'arraybuffer';
this.ws.addEventListener('open', (event) => this.on_connected(event));
this.ws.addEventListener('close', (event) => this.on_closed(event));
this.ws.addEventListener('error', (event) => this.on_error(event));
this.ws.addEventListener('message', (event) => this.on_message(event));
@ -285,21 +285,25 @@ class Webfuse {
command(reader, writer, this.filesystem);
}
else {
console.error(`unknow message type: ${message_type}`);
console.warn(`unknow message type: ${message_type}`);
}
this.ws.send(writer.get_data());
}
on_connected(event) {
this.filesystem.connectionstatechanged("connected");
}
on_error(event) {
console.log('error', event);
console.info("connection error");
this.ws.close();
}
on_closed(event) {
console.log('closed', event);
this.filesystem.connectionstatechanged("closed");
}
}
export { Webfuse, BaseFileSystem, ERRNO, Mode, AccessMode }
export { Webfuse, BaseFileSystem, ERRNO, Mode, AccessMode, OpenFlags }

@ -0,0 +1,28 @@
html, body {
background-color: #c0c0c0;
}
h1 {
background-color: black;
color: white;
}
label {
display: inline-block;
width: 150px;
}
input {
width: 150px;
}
#stats {
display: inline-block;
text-align: right;
width: 150px;
}
textarea {
width: 300px;
height: 300px;
}
Loading…
Cancel
Save