chat room websocket salvo example. #955

davehorner · 2024-10-12T17:30:13Z

davehorner
Oct 12, 2024

I'd like to see bidirectional/broadcast websocket stuff and wanted to extend the sample to do a simple chat room. this compiles and runs; seems to connect properly and within the browser window works. multi-browser multi-user I don't see a broadcast happening. I'm still toying with it but I figured I ask to see if I'm even on the right path with the Depot and the broadcaster or if I should be doing something else entirely?

use salvo::prelude::*;
use salvo_extra::websocket::WebSocketUpgrade;
use serde::{Deserialize, Serialize};
use salvo::conn::TcpListener;
use salvo::{Request, Response,Server,Router,Listener,Handler,Depot,FlowCtrl};
use salvo::http::StatusError;
use salvo::writing::Text;

use std::sync::{Arc, Mutex};
use tokio::sync::broadcast;
use salvo_extra::websocket::Message;
use futures_util::StreamExt;
use futures_util::SinkExt;


#[derive(Clone, Debug, Deserialize, Serialize)]
struct User {
    id: usize,
    name: String,
}

#[handler]
async fn set_broadcaster(depot: &mut Depot) {
    let broadcaster: broadcast::Sender<String> = broadcast::channel(100).0;
    depot.insert("broadcaster", Arc::new(Mutex::new(broadcaster)));
}

#[handler]
async fn connect(req: &mut Request, depot: &mut Depot, res: &mut Response) {
    // Clone the broadcaster so each WebSocket connection can use it
    let broadcaster = depot.get::<Arc<Mutex<broadcast::Sender<String>>>>("broadcaster").unwrap().clone();
    let user: User = req.parse_queries().unwrap_or_else(|_| User { id: 0, name: "Anonymous".into() });

    WebSocketUpgrade::new()
        .upgrade(req, res, move |ws| {
            let broadcaster = broadcaster.clone();
            let user_name = user.name.clone();
            async move {
                let (mut ws_sender, mut ws_receiver) = ws.split();
                let tx = broadcaster.lock().unwrap().clone();
                let mut rx = broadcaster.lock().unwrap().subscribe();

                // Spawn a task to handle receiving messages from this client and broadcasting them
                tokio::spawn(async move {
                    while let Some(Ok(msg)) = ws_receiver.next().await {
                        if msg.is_text() {
                            if let Ok(text) = msg.to_str() {
                                // Broadcast message to all other connected clients
                                let message = format!("{}: {}", user_name, text);
                                if tx.send(message).is_err() {
                                    break; // Break if there are no active receivers
                                }
                            }
                        }
                    }
                });

                // Sending messages to this client from the broadcast channel
                while let Ok(message) = rx.recv().await {
                    if ws_sender.send(Message::text(message)).await.is_err() {
                        break; // Break if sending fails
                    }
                }
            }
        })
        .await
        .unwrap_or_else(|err| eprintln!("Error in WebSocket upgrade: {}", err));
}

#[handler]
async fn index(res: &mut Response) {
    res.render(Text::Html(INDEX_HTML));
}

#[tokio::main]
async fn main() {
    let router = Router::new()
        .hoop(set_broadcaster)
        .goal(index)
        .push(
            Router::with_path("ws")
                .goal(connect),
        );

    let acceptor = TcpListener::new("0.0.0.0:5800").bind().await;
    Server::new(acceptor).serve(router).await;
}

static INDEX_HTML: &str = r#"<!DOCTYPE html>
<html>
    <head>
        <title>WS Chat</title>
    </head>
    <body>
        <h1>Chat Room</h1>
        <div id="status">
            <p><em>Connecting...</em></p>
        </div>
        <input type="text" id="name" placeholder="Enter your name" />
        <button id="setName">Set Name</button>
        <div id="chat"></div>
        <input type="text" id="msg" placeholder="Enter your message" />
        <button id="submit">Send</button>
        <script>
            const status = document.getElementById('status');
            const chat = document.getElementById('chat');
            const nameInput = document.getElementById('name');
            const setNameButton = document.getElementById('setName');
            const msgInput = document.getElementById('msg');
            const submitButton = document.getElementById('submit');
            let userName = 'Anonymous';
            let ws;

            setNameButton.onclick = () => {
                userName = nameInput.value || 'Anonymous';
                ws = new WebSocket(`ws://${location.host}/ws?id=${Date.now()}&name=${encodeURIComponent(userName)}`);

                ws.onopen = () => {
                    status.innerHTML = '<p><em>Connected as ' + userName + '!</em></p>';
                };


                ws.onmessage = (event) => {
                    const message = document.createElement('p');
                    message.textContent = event.data;
                    chat.appendChild(message);
                };

                ws.onclose = () => {
                    status.innerHTML = '<p><em>Disconnected</em></p>';
                };
            };

            submitButton.onclick = () => {
                const message = msgInput.value;
                if (ws && message) {
                    ws.send(message);
                    msgInput.value = '';
                }
            };
        </script>
    </body>
</html>
"#;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chat room websocket salvo example. #955

{{title}}

Replies: 0 comments

Select a reply

chat room websocket salvo example. #955

davehorner Oct 12, 2024

Replies: 0 comments

davehorner
Oct 12, 2024