shu/woweb-poc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

use webassembly with the server acting only as an intermediate

Browse source
This commit is contained in:
Sebastian Hugentobler 2023-03-09 08:35:24 +01:00
parent 9aa1130c35
commit 7d0ef62c42
Signed by: shu
GPG key ID: BB32CF3CA052C2F0
29 changed files with 850 additions and 325 deletions
Download patch file Download diff file Expand all files Collapse all files

8
woweb/.idea/.gitignore generated vendored Normal file
View file

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

8
woweb/.idea/modules.xml generated Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/woweb-poc.iml" filepath="$PROJECT_DIR$/.idea/woweb-poc.iml" />
</modules>
</component>
</project>

6
woweb/.idea/vcs.xml generated Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

11
woweb/.idea/woweb-poc.iml generated Normal file
View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="CPP_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/target" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

19
woweb/Cargo.toml Normal file
View file

@ -0,0 +1,19 @@
[package]
name = "woweb"
version = "0.1.0"
edition = "2021"
build = "build.rs"
[dependencies]
dist_text = { path = "../dist_text" }
axum = { version = "0.6.7", features = ["ws", "headers"] }
axum-extra = { version = "0.5.0", features = ["spa"] }
futures = "0.3.26"
headers = "0.3.8"
serde = { version = "1.0.152", features = ["derive"] }
serde_json = "1.0.93"
tokio = { version = "1.25.0", features = ["full"] }
tower-http = { version = "0.3.5", features = ["trace"] }
tracing = "0.1.37"
tracing-subscriber = { version = "0.3.16", features = ["env-filter"] }
unicode-segmentation = "1.10.1"

11
woweb/assets/index.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Woweb Playground</title>
</head>
<body>
<textarea id="doctext" name="story" rows="5" cols="33">Things just happen, what the hell.</textarea>
<script type="module" src="/index.js"></script>
</body>
</html>

90
woweb/assets/index.js Normal file
View file

@ -0,0 +1,90 @@
import init, { State } from "/dist_text_js.js";
await init();
const areaId = "doctext";
const validEvents = [
"insertText",
"insertFromPaste",
"insertLineBreak",
"insertCompositionText",
"deleteContentBackward",
"deleteContentForward",
];
let selectionStart = 0;
let selectionEnd = 0;
let area;
let ws;
const uuid = self.crypto.randomUUID();
const wsUrl = "ws://localhost:3000/ws";
const state = State.default();
function setup() {
area = document.querySelector(`#${areaId}`);
ws = new WebSocket(wsUrl);
setupUi();
setupWs();
}
function setupUi() {
document.addEventListener("selectionchange", onSelectionChange, false);
area.addEventListener("beforeinput", onInput, false);
}
function setupWs() {
ws.onclose = function (e) {
console.log(e);
setTimeout(() => {
ws = new WebSocket(wsUrl);
}, 2000);
};
ws.onmessage = function (e) {
let payload = JSON.parse(e.data);
if (payload.client !== uuid) {
const newText = state.apply(payload.ops);
state.text = payload.ops.length > 0 ? newText : payload.doc;
area.value = state.text;
}
};
}
function onSelectionChange() {
const activeElement = document.activeElement;
if (activeElement && activeElement.id === areaId) {
selectionStart = area.selectionStart;
selectionEnd = area.selectionEnd;
}
}
function onInput(event) {
const data = event.data ? event.data : "";
let ops = state.execute(event.inputType, selectionStart, selectionEnd, data, uuid);
if (!validEvents.includes(event.inputType)) return;
const payload = {
client: uuid,
ops
};
ws.send(JSON.stringify(payload));
console.log(selectionStart, selectionEnd);
// workaround for differences between firefox and chrome
// chrome does not fire selectionchange events on backspace/delete events,
// while firefox does
if (event.inputType === "deleteContentBackward") {
selectionStart = area.selectionStart - 1;
selectionEnd = area.selectionEnd - 1;
}
}
setup();

29
woweb/build.rs Normal file
View file

@ -0,0 +1,29 @@
use std::env;
use std::fs;
use std::path::Path;
use std::process::Command;
fn main() {
let woweb_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
let woweb_path = Path::new(&woweb_dir);
let woweb_asset_path = woweb_path.join("assets");
let dist_text_path = woweb_path.parent().unwrap().join("dist_text_js");
let dist_text_pkg_path = dist_text_path.join("pkg");
Command::new("wasm-pack")
.args(&["build", "--target", "web", "--release", "--no-typescript"])
.current_dir(dist_text_path)
.status()
.unwrap();
let js_path_src = dist_text_pkg_path.join("dist_text_js.js");
let js_path_dest = woweb_asset_path.join("dist_text_js.js");
let wasm_path_src = dist_text_pkg_path.join("dist_text_js_bg.wasm");
let wasm_path_dest = woweb_asset_path.join("dist_text_js_bg.wasm");
let _ = fs::copy(js_path_src, js_path_dest);
let _ = fs::copy(wasm_path_src, wasm_path_dest);
println!("cargo:rerun-if-changed=../dist_text_js/**/*.rs");
}

56
woweb/src/main.rs Normal file
View file

@ -0,0 +1,56 @@
use axum::routing::get;
use axum::Router;
use axum_extra::routing::SpaRouter;
use std::env;
use std::net::SocketAddr;
use std::sync::Arc;
use tokio::sync::{broadcast, RwLock};
use tower_http::trace::TraceLayer;
use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
use dist_text::text::Text;
mod ws;
struct AppState {
doc: RwLock<Text>,
tx: broadcast::Sender<String>,
}
#[tokio::main]
async fn main() {
tracing_subscriber::registry()
.with(
tracing_subscriber::EnvFilter::try_from_default_env()
.unwrap_or_else(|_| "woweb_poc=debug,tower_http=debug".into()),
)
.with(tracing_subscriber::fmt::layer())
.init();
let (tx, _rx) = broadcast::channel(100);
let app_state = Arc::new(AppState {
doc: RwLock::new(Text::default()),
tx,
});
let app = Router::new()
.merge(SpaRouter::new("/", "assets").index_file("index.html"))
.route("/ws", get(ws::route))
.with_state(app_state)
.layer(TraceLayer::new_for_http());
let args: Vec<String> = env::args().collect();
let host = if args.len() > 1 {
&args[1]
} else {
"127.0.0.1:3000"
};
let addr = host
.parse()
.unwrap_or_else(|_| SocketAddr::from(([127, 0, 0, 1], 3000)));
tracing::debug!("listening on {}", addr);
axum::Server::bind(&addr)
.serve(app.into_make_service())
.await
.unwrap();
}

89
woweb/src/ws.rs Normal file
View file

@ -0,0 +1,89 @@
use serde::{Deserialize, Serialize};
use std::sync::Arc;
use axum::{
extract::{
ws::{Message, WebSocket, WebSocketUpgrade},
State,
},
response::IntoResponse,
};
use futures::{sink::SinkExt, stream::StreamExt};
use dist_text::crdts::list::Op;
use crate::AppState;
#[derive(Serialize, Deserialize)]
struct NewState {
client: String,
doc: String,
ops: Vec<Op<u16, String>>,
}
#[derive(Clone, Serialize, Deserialize)]
pub(crate) struct Ops {
pub(crate) client: String,
ops: Vec<Op<u16, String>>,
}
pub(crate) async fn route(
ws: WebSocketUpgrade,
State(state): State<Arc<AppState>>,
) -> impl IntoResponse {
ws.on_upgrade(move |socket| handle_socket(socket, state))
}
async fn handle_socket(stream: WebSocket, state: Arc<AppState>) {
let (mut sender, mut receiver) = stream.split();
{
let doc = state.doc.read().await;
let doc: String = doc.to_string();
let new_state = NewState {
client: String::from("0000"),
doc: doc.to_string(),
ops: Vec::new(),
};
let payload = serde_json::to_string(&new_state).unwrap();
let _ = sender.send(Message::Text(payload)).await;
}
let mut rx = state.tx.subscribe();
let mut send_task = tokio::spawn(async move {
while let Ok(msg) = rx.recv().await {
if sender.send(Message::Text(msg)).await.is_err() {
break;
}
}
});
let tx = state.tx.clone();
let state = state.clone();
let mut recv_task = tokio::spawn(async move {
while let Some(Ok(Message::Text(text))) = receiver.next().await {
if let Ok(new_ops) = serde_json::from_str::<Ops>(&text) {
tracing::debug!("update from {}", new_ops.client.clone());
let doc = state.doc.read().await;
let mut doc = doc.to_owned();
doc.apply_ops(new_ops.ops.to_owned());
let new_state = NewState {
client: new_ops.client,
doc: doc.to_string(),
ops: new_ops.ops,
};
let payload = serde_json::to_string(&new_state).unwrap();
let _ = tx.send(payload);
}
}
});
tokio::select! {
_ = (&mut send_task) => recv_task.abort(),
_ = (&mut recv_task) => send_task.abort(),
}
;
}