Real-time chat applications allow users to communicate with each other in real time through text, voice, or video. This type of app allows for more immediate messaging than other types of communication such as email or IM. There are several reasons why chat applications must work in real time:
Improved performance: More immediate communication allows for more natural conversation
Greater responsiveness: Real-time functionality results in improved user experience
Superior reliability: With real-time functionality there’s less opportunity for messages to be lost or delayed
Introduction to WebSockets
WebSockets enables two-way communication between the client and server in real-time chat applications. Using Rust to build the WebSocket server will enable the server to handle a large number of connections without slowing down. This is due to Rust’s speed and reliability.
Now that we have a better understanding of WebSockets, let’s get started building our real-time chat application!
Getting started
First, let’s review some prerequisites:
Rust: Ensure you have Rust installed on your computer. If you don’t have it, use the following command to install it:
curl –proto ‘=https’ –tlsv1.2 -sSf https://sh.rustup.rs | sh
React: Ensure that your environment is ready for React development; use one of the below commands to install React if you don’t already have it:
Next, run the following commands to verify that everything is installed and working properly:
Designing the real-time chat app architecture
Let’s create some design architecture for our real-time chat application. We’ll build a simple server; our application’s architecture will cover the following features:
Chat: between two users via direct messaging
Typing indicator: notifies the recipient when a user starts typing a chat to them
User status: indicates whether the user is online or offline
This architecture is very simple and easy to follow. It consists of just a few components:
WebSocket server: This is the most important component of our application; it handles all the communication between clients and rooms
Room manager: This component is responsible for managing all the rooms in our application. It will create, update, and delete rooms. This component will be on the HTTP server
User manager: This component is responsible for managing all the users in our application. It will create, update, and delete users. This component will be on the HTTP server as well
Message manager: This component is responsible for managing all the messages in our application. It will create, update, and delete messages. This component one will be on the WebSocket server and the HTTP server. It will be used to store incoming messages from WebSockets and retrieve all messages already in the database when the user opens the chat room via the Rest API
Building the WebSocket server in Rust
There are many packages we can use to write a WebSocket server in Rust. For this tutorial, we’ll use Actix Web; it is a mature package and is easy to use.
To start, create a Rust project using the following command:
Next, add this package to the Cargo.toml file:
Now, install diesel_cli; we’ll use this as our ORM:
Here’s how the structure of the project should look:
Now, here’s a bit of information about the folders:
src: This folder contains all of our Rust code
static: This folder contains all of our static assets, HTML files, JavaScript files, and images
ui: This folder contains our React code; we’ll compile it later to the static file and export it to the static folder
Next, let’s write the entry point for our WebSocket server:
Here’s some information about the packages we’re using:
actixcors: Will be used to debug the UI; we’ll accept POST and GET requests from localhost:3000 or localhost:8080
actixweb: For all HTTP-related features in the Actix Web package
actixfiles: For embedding static files to one of our routes
diesel: Will be used to query the data from our SQLite database. If you prefer, you can change this to Postgres or MySQL
serdejson: Will be used to parse the JSON data that we’ll send to the React app
Creating the routes
Now let’s make routes for our server. Since we will use a REST HTTP and WebSocket server, we can easily put