fix: hardcoded WebSocket port 3001 (#71)

Author: shruti2522

TODO.md

@@ -64,7 +64,7 @@
 
 - [ ] Finish API Handler & add languages support
 - [ ] dev mode
-  - [ ] websocket port now is hardcoded to `3001`
+  - [x] websocket port now is hardcoded to `3001`
   - [ ] Granular Rebuilds
     - right now, the `rebuild_page()` function rebuilds both client and server bundles entirely, this is slow. only rebuild changed pages, and eventually, changed components
   - [ ] implement real HMR, not just restarting the page (line 34 in live_reload.js)

crates/metassr-server/src/lib.rs

@@ -57,6 +57,7 @@ impl std::fmt::Display for RunningType {
 
 pub struct ServerConfigs {
     pub port: u16,
+    pub ws_port: u16,
     pub _enable_http_logging: bool,
     pub root_path: PathBuf,
     pub running_type: RunningType,
@@ -90,25 +91,31 @@ impl Server {
 
         if let ServerMode::Development = self.configs.mode {
             info!("Configuring server for development mode");
-            let live_reload_script = include_str!("scripts/live-reload.js");
+            let ws_port = self.configs.ws_port;
+            // Inject the ws_port into the live-reload script at runtime
+            let live_reload_script =
+                include_str!("scripts/live-reload.js").replace("__WS_PORT__", &ws_port.to_string());
             base_router = base_router.route(
                 "/livereload/script.js",
-                get(|| async {
-                    info!("Serving live-reload.js");
-                    axum::response::Response::builder()
-                        .header("Content-Type", "application/javascript")
-                        .body(live_reload_script.to_string())
-                        .unwrap()
+                get(move || {
+                    let script = live_reload_script.clone();
+                    async move {
+                        info!("Serving live-reload.js");
+                        axum::response::Response::builder()
+                            .header("Content-Type", "application/javascript")
+                            .body(script)
+                            .unwrap()
+                    }
                 }),
             );
             // Apply live reload middleware
             base_router = base_router.layer(axum::middleware::from_fn(inject_live_reload_script));
 
             // Start the WebSocket server for live reload
-            let ws_listener = TcpListener::bind("127.0.0.1:3001")
+            let ws_listener = TcpListener::bind(format!("127.0.0.1:{ws_port}"))
                 .await
                 .map_err(|e| anyhow::anyhow!("WebSocket bind error: {}", e))?;
-            debug!(
+            info!(
                 "WebSocket server listening on {:?}",
                 ws_listener.local_addr()?
             );

crates/metassr-server/src/scripts/live-reload.js

@@ -10,7 +10,7 @@
 
     function connect() {
         if (ws) ws.close(); // Close old connection
-        ws = new WebSocket('ws://localhost:3001')
+        ws = new WebSocket('ws://localhost:__WS_PORT__')
         ws.onmessage = (event) => {
             const update = JSON.parse(event.data)
             const currentPath = window.location.pathname; //current page path

metassr-cli/src/cli/dev.rs

@@ -18,6 +18,7 @@ use super::traits::AsyncExec;
 
 pub struct Dev {
     port: u16,
+    ws_port: u16,
     // todo change this to a normal option, and edit impl asyncexec
     watcher: Arc<Mutex<Option<FileWatcher>>>,
     rebuilder: Arc<Rebuilder>,
@@ -26,14 +27,20 @@ pub struct Dev {
 }
 
 impl Dev {
-    pub fn new(port: u16, root_path: PathBuf, building_type: BuildingType) -> Result<Self> {
+    pub fn new(
+        port: u16,
+        ws_port: u16,
+        root_path: PathBuf,
+        building_type: BuildingType,
+    ) -> Result<Self> {
         let (rebuild_tx, _) = broadcast::channel(100); //channel for rebuild notifications
 
         let watcher = Arc::new(Mutex::new(None)); //FileWatcher::new()?;
         let rebuilder = Arc::new(Rebuilder::new(root_path.clone(), building_type)?);
 
         Ok(Self {
             port,
+            ws_port,
             watcher,
             rebuilder,
             root_path,
@@ -107,6 +114,7 @@ impl Dev {
 
         let server_configs = ServerConfigs {
             port: self.port,
+            ws_port: self.ws_port,
             _enable_http_logging: true,
             root_path: self.root_path.clone(),
             running_type: RunningType::ServerSideRendering,

metassr-cli/src/cli/mod.rs

@@ -90,7 +90,12 @@ pub enum Commands {
     },
 
     Dev {
+        /// port number on which the HTTP server will run
         #[arg(long, default_value_t = 8080)]
         port: u16,
+
+        /// port number for the WebSocket live reload server
+        #[arg(long, default_value_t = 3001)]
+        ws_port: u16,
     },
 }

metassr-cli/src/cli/runner.rs

@@ -31,6 +31,7 @@ impl AsyncExec for Runner {
 
         let server_configs = ServerConfigs {
             port: self.port,
+            ws_port: 0, // not used in production mode
             _enable_http_logging: self.allow_http_debug,
             root_path: current_dir()?,
             running_type,

metassr-cli/src/main.rs

@@ -74,9 +74,10 @@ async fn main() -> Result<()> {
         } => {
             cli::Creator::new(project_name, version, description, template)?.exec()?;
         }
-        Commands::Dev { port } => {
+        Commands::Dev { port, ws_port } => {
             cli::Dev::new(
                 port,
+                ws_port,
                 current_dir()?,
                 metassr_build::server::BuildingType::ServerSideRendering,
             )?