WebSocket Tutorial

What is WebSocket?

WebSocket is a protocol that enables interactive communication between a user's web browser and a server. Unlike HTTP, where the communication is initiated by the client, WebSocket provides a full-duplex communication channel that allows both the client and the server to send messages independently. This is particularly useful for applications that require real-time updates, such as chat applications, live notifications, and online gaming.

How WebSocket Works

WebSocket starts with an HTTP handshake, where the client requests a connection to the server. If the server supports WebSocket, it responds with a status code indicating that the connection has been established. Once the connection is open, both the client and the server can send messages to each other until the connection is closed by either party.

The WebSocket protocol operates over TCP, and it uses port 80 for unencrypted connections and port 443 for secure connections (WSS).

Creating a WebSocket Server in Rust

To create a WebSocket server in Rust, you can use the tokio library for asynchronous programming and tokio-tungstenite for WebSocket support. Below is an example of how to set up a simple WebSocket server.

use tokio::net::TcpListener;
use tokio_tungstenite::accept_async;
use futures_util::stream::StreamExt;
use futures_util::sink::SinkExt;

#[tokio::main]
async fn main() {
    let listener = TcpListener::bind("127.0.0.1:8080").await.unwrap();
    while let Ok((stream, _)) = listener.accept().await {
        tokio::spawn(handle_connection(stream));
    }
}

async fn handle_connection(stream: TcpStream) {
    let ws_stream = accept_async(stream)
        .await
        .expect("Error during WebSocket handshake");

    let (mut write, mut read) = ws_stream.split();

    while let Some(message) = read.next().await {
        match message {
            Ok(msg) => {
                // Echo the received message back
                if let Err(e) = write.send(msg).await {
                    eprintln!("Error sending message: {}", e);
                    break;
                }
            }
            Err(e) => {
                eprintln!("Error reading message: {}", e);
                break;
            }
        }
    }
}
                

Connecting to the WebSocket Server

To connect to the WebSocket server from a client, you can use the built-in WebSocket API in JavaScript. Below is an example of how to connect to the WebSocket server we created.

const socket = new WebSocket("ws://127.0.0.1:8080");

socket.onopen = function(event) {
    console.log("Connected to WebSocket server");
    socket.send("Hello, Server!");
};

socket.onmessage = function(event) {
    console.log("Message from server: ", event.data);
};

socket.onclose = function(event) {
    console.log("Disconnected from WebSocket server");
};
                

Conclusion

WebSocket is a powerful tool for building real-time applications. By establishing a persistent connection between the client and server, it allows for efficient two-way communication. In this tutorial, we covered the basics of WebSocket, how it works, and how to implement a simple WebSocket server in Rust, as well as a client using JavaScript.

With this knowledge, you can explore further and implement more complex WebSocket-based applications that require real-time updates and interactivity.