Add websocket handler on server, connect from client

Additionally add /test handler that triggers server->client WS message
This commit is contained in:
2025-04-14 20:46:52 -07:00
parent b2c73ffa15
commit f2042f284e
9 changed files with 357 additions and 19 deletions

View File

@@ -38,6 +38,7 @@ letterbox-notmuch = { version = "0.12.1", path = "../notmuch", registry = "xinu"
seed_hooks = { version = "0.4.0", registry = "xinu" }
strum_macros = "0.27.1"
wasm-sockets = "1.0.0"
gloo-console = "0.3.0"
[package.metadata.wasm-pack.profile.release]
wasm-opt = ['-Os']

View File

@@ -43,7 +43,7 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
};
// TODO(wathiede): only do this while viewing the index? Or maybe add a new message that force
// 'notmuch new' on the server periodically?
orders.stream(streams::interval(30_000, || Msg::RefreshStart));
//orders.stream(streams::interval(30_000, || Msg::RefreshStart));
orders.subscribe(Msg::OnUrlChanged);
orders.stream(streams::window_event(Ev::Scroll, |_| Msg::WindowScrolled));

167
web/src/websocket.rs Normal file
View File

@@ -0,0 +1,167 @@
use std::rc::Rc;
use letterbox_shared::WebsocketMessage;
use log::{error, info};
use seed::{prelude::*, *};
use serde::{Deserialize, Serialize};
use wasm_sockets::{self, ConnectionStatus, EventClient, Message, WebSocketError};
use web_sys::CloseEvent;
/// Message from the server to the client.
#[derive(Serialize, Deserialize)]
pub struct ServerMessage {
pub id: usize,
pub text: String,
}
/// Message from the client to the server.
#[derive(Serialize, Deserialize)]
pub struct ClientMessage {
pub text: String,
}
//const WS_URL: &str = "wss://9000.z.xinu.tv/api/ws";
//const WS_URL: &str = "wss://9345.z.xinu.tv/api/graphql/ws";
const WS_URL: &str = "wss://6758.z.xinu.tv/api/ws";
// ------ ------
// Model
// ------ ------
pub struct Model {
web_socket: EventClient,
web_socket_reconnector: Option<StreamHandle>,
}
// ------ ------
// Init
// ------ ------
pub fn init(_: Url, orders: &mut impl Orders<Msg>) -> Model {
Model {
web_socket: create_websocket(orders).unwrap(),
web_socket_reconnector: None,
}
}
// ------ ------
// Update
// ------ ------
pub enum Msg {
WebSocketOpened,
TextMessageReceived(String),
BinaryMessageReceived(ServerMessage),
CloseWebSocket,
WebSocketClosed(CloseEvent),
WebSocketFailed,
ReconnectWebSocket(usize),
SendMessage(ClientMessage),
SendBinaryMessage(ClientMessage),
}
pub fn update(msg: Msg, mut model: &mut Model, orders: &mut impl Orders<Msg>) {
match msg {
Msg::WebSocketOpened => {
model.web_socket_reconnector = None;
info!("WebSocket connection is open now");
}
Msg::TextMessageReceived(msg) => {
info!("recieved text {}", msg);
}
Msg::BinaryMessageReceived(message) => {
error!("Client received binary message");
}
Msg::CloseWebSocket => {
model.web_socket_reconnector = None;
model.web_socket.close().unwrap();
}
Msg::WebSocketClosed(close_event) => {
info!("==================");
info!("WebSocket connection was closed:");
info!("Clean: {}", close_event.was_clean());
info!("Code: {}", close_event.code());
info!("Reason: {}", close_event.reason());
info!("==================");
// Chrome doesn't invoke `on_error` when the connection is lost.
if !close_event.was_clean() && model.web_socket_reconnector.is_none() {
model.web_socket_reconnector = Some(
orders.stream_with_handle(streams::backoff(None, Msg::ReconnectWebSocket)),
);
}
}
Msg::WebSocketFailed => {
info!("WebSocket failed");
if model.web_socket_reconnector.is_none() {
model.web_socket_reconnector = Some(
orders.stream_with_handle(streams::backoff(None, Msg::ReconnectWebSocket)),
);
}
}
Msg::ReconnectWebSocket(retries) => {
info!("Reconnect attempt: {}", retries);
model.web_socket = create_websocket(orders).unwrap();
}
Msg::SendMessage(msg) => {
let txt = serde_json::to_string(&msg).unwrap();
model.web_socket.send_string(&txt).unwrap();
}
Msg::SendBinaryMessage(_msg) => {
error!("Attempt to send binary message, unsupported");
}
}
}
fn create_websocket(orders: &impl Orders<Msg>) -> Result<EventClient, WebSocketError> {
let msg_sender = orders.msg_sender();
let mut client = EventClient::new(WS_URL)?;
client.set_on_error(Some(Box::new(|error| {
gloo_console::error!("WS: ", error);
})));
let send = msg_sender.clone();
client.set_on_connection(Some(Box::new(move |client: &EventClient| {
info!("{:#?}", client.status);
let msg = match *client.status.borrow() {
ConnectionStatus::Connecting => {
info!("Connecting...");
None
}
ConnectionStatus::Connected => Some(Msg::WebSocketOpened),
ConnectionStatus::Error => Some(Msg::WebSocketFailed),
ConnectionStatus::Disconnected => {
info!("Disconnected");
None
}
};
send(msg);
})));
let send = msg_sender.clone();
client.set_on_close(Some(Box::new(move |ev| {
info!("WS: Connection closed");
send(Some(Msg::WebSocketClosed(ev)));
})));
let send = msg_sender.clone();
client.set_on_message(Some(Box::new(
move |_: &EventClient, msg: wasm_sockets::Message| decode_message(msg, Rc::clone(&send)),
)));
Ok(client)
}
fn decode_message(message: Message, msg_sender: Rc<dyn Fn(Option<Msg>)>) {
match message {
Message::Text(txt) => {
let msg: WebsocketMessage = serde_json::from_str(&txt).unwrap_or_else(|e| {
panic!("failed to parse json into WebsocketMessage: {e}\n'{txt}'")
});
msg_sender(Some(Msg::TextMessageReceived(txt)));
}
m => error!("unexpected message type received of {m:?}"),
}
}