refactoring
This commit is contained in:
parent
e235fcc749
commit
87a669f899
@ -21,6 +21,10 @@
|
||||
<span class="footer">LJ Sketch</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="errorBox" class="invisible"></div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
|
19
pub/main.js
19
pub/main.js
@ -108,13 +108,22 @@ const initDrawing = (canvas, clearButton, selectedColor, ws) => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const initWs = () => {
|
||||
const initWs = errorBox => {
|
||||
const socket = new WebSocket('ws://localhost:3000/ws');
|
||||
|
||||
socket.addEventListener('open', function (event) {
|
||||
console.log("Open", event);
|
||||
});
|
||||
socket.addEventListener('error', function (event) {
|
||||
console.log("Error:", event);
|
||||
errorBox.className = "visible";
|
||||
errorBox.innerHTML = "Error: " + event.message;
|
||||
});
|
||||
socket.addEventListener("close", (event) => {
|
||||
console.log("Close:", event);
|
||||
errorBox.className = "visible";
|
||||
errorBox.innerHTML = "Disconnected: server closed connexion";
|
||||
});
|
||||
|
||||
return socket;
|
||||
};
|
||||
|
||||
@ -122,9 +131,9 @@ window.onload = () => {
|
||||
const colorsDiv = document.querySelector("#colors");
|
||||
const selectedColor = document.querySelector("#selectedColor");
|
||||
const clearButton = document.querySelector("#clearButton");
|
||||
const errorBox = document.querySelector("#errorBox");
|
||||
const canvas = document.querySelector("#canvas");
|
||||
initUI(colorsDiv, selectedColor);
|
||||
let ws = initWs();
|
||||
let ws = initWs(errorBox);
|
||||
initDrawing(canvas, clearButton, selectedColor, ws);
|
||||
|
||||
};
|
||||
|
@ -64,3 +64,20 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#errorBox {
|
||||
border: thick solid #990000;
|
||||
background: #dd0000;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block;
|
||||
}
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
@ -25,8 +25,7 @@ async fn gen_server(mut rx: Receiver<GSMsg>) {
|
||||
match msg {
|
||||
GSMsg::NewClient((addr, c_tx)) => {
|
||||
for line in &lines {
|
||||
c_tx.send(GSMsg::NewLine(line.clone()))
|
||||
.await.unwrap();
|
||||
c_tx.send(GSMsg::NewLine(line.clone())).await.unwrap();
|
||||
}
|
||||
clients.insert(addr, c_tx);
|
||||
tracing::info!("NewClient {addr}");
|
||||
|
@ -27,11 +27,8 @@ const LISTEN_ON : &str = "0.0.0.0:3000";
|
||||
#[tokio::main]
|
||||
async fn main() {
|
||||
tracing_subscriber::registry()
|
||||
.with(
|
||||
tracing_subscriber::EnvFilter::try_from_default_env()
|
||||
.unwrap_or_else(|_| "lj_sketch=info,tower_http=info"
|
||||
.into()),
|
||||
)
|
||||
.with(tracing_subscriber::EnvFilter::try_from_default_env()
|
||||
.unwrap_or_else(|_| "lj_sketch=info,tower_http=info".into()))
|
||||
.with(tracing_subscriber::fmt::layer())
|
||||
.init();
|
||||
|
||||
|
@ -26,8 +26,8 @@ pub async fn handle_socket(
|
||||
who: SocketAddr,
|
||||
gs_tx: Sender<GSMsg>
|
||||
) {
|
||||
let (c_tx, mut c_rx) = mpsc::channel(32);
|
||||
gs_tx.send(GSMsg::NewClient((who, c_tx))).await.unwrap();
|
||||
let (chan_tx, mut chan_rx) = mpsc::channel(32);
|
||||
gs_tx.send(GSMsg::NewClient((who, chan_tx))).await.unwrap();
|
||||
let mut line : Line = vec![];
|
||||
|
||||
loop {
|
||||
@ -42,7 +42,7 @@ pub async fn handle_socket(
|
||||
ControlFlow::Continue(()) => {}
|
||||
}
|
||||
},
|
||||
Some(msg) = c_rx.recv() => {
|
||||
Some(msg) = chan_rx.recv() => {
|
||||
process_gs_msg(&mut socket, &who, msg).await
|
||||
},
|
||||
else => {
|
||||
@ -53,7 +53,11 @@ pub async fn handle_socket(
|
||||
}
|
||||
}
|
||||
|
||||
async fn process_gs_msg(socket: &mut WebSocket, who: &SocketAddr, msg: GSMsg) {
|
||||
async fn process_gs_msg(
|
||||
socket: &mut WebSocket,
|
||||
who: &SocketAddr,
|
||||
msg: GSMsg
|
||||
) {
|
||||
match msg {
|
||||
GSMsg::NewLine(line) => {
|
||||
socket.send(Message::Text(line_to_json(&line))).await.unwrap();
|
||||
@ -75,10 +79,9 @@ async fn process_ws_msg(
|
||||
msg: Message
|
||||
) -> ControlFlow<(),()> {
|
||||
match msg {
|
||||
Text(text) => {
|
||||
match serde_json::from_str(&text) {
|
||||
Text(text) => match serde_json::from_str(&text) {
|
||||
Ok(json) => {
|
||||
tracing::debug!("{who}: '{:?}'", json);
|
||||
tracing::debug!("{who}: '{json:?}'");
|
||||
match handle_ws_msg(line, json) {
|
||||
Ok(Some(req)) => gs_tx.send(req).await.unwrap(),
|
||||
Ok(None) => {},
|
||||
@ -90,17 +93,16 @@ async fn process_ws_msg(
|
||||
Err(err) => {
|
||||
tracing::warn!("{who}: can't parse JSON: {err}");
|
||||
}
|
||||
}
|
||||
},
|
||||
Close(close) => {
|
||||
tracing::info!("{who}: closing: {:?}", close);
|
||||
tracing::info!("{who}: closing: {close:?}");
|
||||
gs_tx.send(GSMsg::DeleteClient(*who)).await.unwrap();
|
||||
return ControlFlow::Break(());
|
||||
},
|
||||
_ => {
|
||||
tracing::warn!("{who}: can't handle message: {:?}", msg);
|
||||
}
|
||||
tracing::warn!("{who}: can't handle message: {msg:?}");
|
||||
}
|
||||
};
|
||||
ControlFlow::Continue(())
|
||||
}
|
||||
|
||||
@ -121,13 +123,13 @@ fn handle_ws_msg(
|
||||
},
|
||||
JMsg::Stroke => {
|
||||
if line.len() > 1 {
|
||||
let line2 = simplify_line(line);
|
||||
let simple_line = simplify_line(line);
|
||||
*line = vec![];
|
||||
return Ok(Some(GSMsg::NewLine(line2)));
|
||||
return Ok(Some(GSMsg::NewLine(simple_line)));
|
||||
}
|
||||
},
|
||||
JMsg::Line{..} => {
|
||||
tracing::warn!("recieved a line message O_o");
|
||||
return Err("recieved a line message O_o");
|
||||
}
|
||||
};
|
||||
Ok(None)
|
||||
@ -135,9 +137,7 @@ fn handle_ws_msg(
|
||||
|
||||
fn line_to_json(line: &Line) -> String {
|
||||
let line = line.iter()
|
||||
.map(| (x, y, c) | {
|
||||
(*x, *y, format!("#{:06x}", c))
|
||||
})
|
||||
.map(| (x, y, c) | (*x, *y, format!("#{:06x}", c)))
|
||||
.collect();
|
||||
serde_json::to_string(&JMsg::Line{ line }).unwrap()
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user