I study Rust: How I made UDP chat with Azul

Azul

Overview of the rest of the frameworks

• Orbtk - Almost the same as Azul and also in deep alpha
• Conrod - Video You can create cross-platform desktop applications.
• Yew - WebAssembly and is similar to React. For web development.

Customer

A structure in which helper functions are grouped to read and write to a socket.

struct ChatService {} impl ChatService { //1 fn read_data(socket: &Option<UdpSocket>) -> Option<String> { //2 let mut buf = [0u8; 4096]; match socket { Some(s) => { //3 match s.recv(&mut buf) { //4 Ok(count) => Some(String::from_utf8(buf[..count].into()) .expect("can't parse to String")), Err(e) => { //5 println!("Error {}", e); None } } } _ => None, } } //6 fn send_to_socket(message: String, socket: &Option<UdpSocket>) { match socket { //7 Some(s) => { s.send(message.as_bytes()).expect("can't send"); } _ => return, } } } 

1. We read data from a socket
2. A buffer for data that will be read from the socket.
3. Blocking call Here, the thread of execution stops until the data is read or timeout occurs.
4. Get the string from the byte array in UTF8.
5. We get here if the connection is broken by timeout or another error has occurred.
6. Sends a string to the socket.
7. We convert the string to bytes in UTF8 encoding and send data to the socket. Writing data to a socket is not blocking, i.e. The execution thread will continue its work. If the data could not be sent, then we stop the program with the message “can't send”.

A structure that groups functions to handle user-generated events and changes to our DataModel.

 struct Controller {} //1 const TIMEOUT_IN_MILLIS: u64 = 2000; impl Controller { //2 fn send_pressed(app_state: &mut azul::prelude::AppState<ChatDataModel>, _event: azul::prelude::WindowEvent<ChatDataModel>) -> azul::prelude::UpdateScreen { //3 let data = app_state.data.lock().unwrap(); //4 let message = data.messaging_model.text_input_state.text.clone(); data.messaging_model.text_input_state.text = "".into(); //5 ChatService::send_to_socket(message, &data.messaging_model.socket); //6 azul::prelude::UpdateScreen::Redraw } //7 fn login_pressed(app_state: &mut azul::prelude::AppState<ChatDataModel>, _event: azul::prelude::WindowEvent<ChatDataModel>) -> azul::prelude::UpdateScreen { //8 use std::time::Duration; //9 if let Some(ref _s) = app_state.data.clone().lock().unwrap().messaging_model.socket { return azul::prelude::UpdateScreen::DontRedraw; } //10 app_state.add_task(Controller::read_from_socket_async, &[]); //11 app_state.add_daemon(azul::prelude::Daemon::unique(azul::prelude::DaemonCallback(Controller::redraw_daemon))); //12 let mut data = app_state.data.lock().unwrap(); //13 let local_address = format!("127.0.0.1:{}", data.login_model.port_input.text.clone().trim()); //14 let socket = UdpSocket::bind(&local_address) .expect(format!("can't bind socket to {}", local_address).as_str()); //15 let remote_address = data.login_model.address_input.text.clone().trim().to_string(); //16 socket.connect(&remote_address) .expect(format!("can't connect to {}", &remote_address).as_str()); //17 socket.set_read_timeout(Some(Duration::from_millis(TIMEOUT_IN_MILLIS))) .expect("can't set time out to read"); // 18 data.logged_in = true; // 19 data.messaging_model.socket = Option::Some(socket); //20 azul::prelude::UpdateScreen::Redraw } //21 fn read_from_socket_async(app_data: Arc<Mutex<ChatDataModel>>, _: Arc<()>) { //22 let socket = Controller::get_socket(app_data.clone()); loop { //23 if let Some(message) = ChatService::read_data(&socket) { //24 app_data.modify(|state| { //25 state.messaging_model.has_new_message = true; //26 state.messaging_model.messages.push(message); }); } } } //27 fn redraw_daemon(state: &mut ChatDataModel, _repres: &mut azul::prelude::Apprepres) -> (azul::prelude::UpdateScreen, azul::prelude::TerminateDaemon) { //28 if state.messaging_model.has_new_message { state.messaging_model.has_new_message = false; (azul::prelude::UpdateScreen::Redraw, azul::prelude::TerminateDaemon::Continue) } else { (azul::prelude::UpdateScreen::DontRedraw, azul::prelude::TerminateDaemon::Continue) } } //29 fn get_socket(app_data: Arc<Mutex<ChatDataModel>>) -> Option<UdpSocket> { //30 let ref_model = &(app_data.lock().unwrap().messaging_model.socket); //31 match ref_model { Some(s) => Some(s.try_clone().unwrap()), _ => None } } } 

1. Timeout in milliseconds, after which a blocking read operation from the socket will be interrupted.
2. The function works when the user wants to send a new message to the server.
3. We get possession of mutex with our data model. This blocks the interface redraw stream until the mutex is released.
4. We make a copy of the text entered by the user to pass it on and clear the text entry field.
5. We send the message.
6. We inform the Framework that after processing this event you need to redraw the interface.
7. The function works when the user wants to connect to the server.
8. We connect the structure to represent the length of time from the standard library.
9. If we are already connected to the server, then we stop the execution of the function by telling the Framework that there is no need to redraw the interface.
10. Add a task that will be executed asynchronously in a stream from the thread pool of the Azul Framework. Accessing the mutex with the data model blocks updating the UI until the mutex is released.
11. Add a recurring task that runs in the main thread. Any lengthy computation in this daemon blocks interface updates.
12. We get in possession muteks.
13. We read the port entered by the user and create a local address based on it, we will listen.
14. We create a UDP socket that reads packets arriving at the local address.
15. We read the server address entered by the user.
16. We tell our UDP socket to read packets only from this server.
17. Set the timeout for a read operation from the socket. Writing to the socket occurs without waiting, i.e., we simply write data and do not wait for anything, and a read operation from the socket blocks the stream and waits until data can be read. If you do not set the timeout, the read operation from the socket will wait indefinitely.
18. We set the flag indicating that the user has already connected to the server.
19. We transfer to the data model the created socket.
20. We inform the Framework that after processing this event you need to redraw the interface.
21. An asynchronous operation that runs in the thread pool of the Azul Framework.
22. Get a copy of the socket from our data model.
23. We are trying to read data from the socket. If you do not make a copy of the socket and directly wait here, until a message comes from the socket, which is in the mutex in our data model, then the entire interface will stop updating until we release the mutex.
24. If we receive a message, then we change our data model. The modification does the same as lock (). Unwrap (), passing the result to the lambda and releasing the mutex after the lambda code ends.
25. Set the flag, indicating that we have a new message.
26. Add a message to the array of all chat messages.
27. Repeated synchronous operation running in the main thread.
28. If we have a new message, then we inform the Framework that we need to redraw the interface from scratch and continue the work of this daemon; otherwise, we will not draw the interface from the beginning, but we still call this Function in the next cycle.
29. Creates a copy of our socket in order not to keep the mutex locked with our data model.
30. We get ownership of the mutex and get a reference to the socket.
31. Create a copy of the socket. Mutex will be released automatically when exiting the Function.

Asynchronous data processing and daemons in Azul

 // Problem - blocks UI :( fn start_connection(app_state: &mut AppState<MyDataModel>, _event: WindowEvent<MyDataModel>) -> UpdateScreen { //   app_state.add_task(start_async_task, &[]); //  app_state.add_daemon(Daemon::unique(DaemonCallback(start_daemon))); UpdateScreen::Redraw } fn start_daemon(state: &mut MyDataModel, _repres: &mut Apprepres) -> (UpdateScreen, TerminateDaemon) { // UI    thread::sleep(Duration::from_secs(10)); state.counter += 10000; (UpdateScreen::Redraw, TerminateDaemon::Continue) } fn start_async_task(app_data: Arc<Mutex<MyDataModel>>, _: Arc<()>) { // simulate slow load app_data.modify(|state| { // UI    thread::sleep(Duration::from_secs(10)); state.counter += 10000; }); } 

 fn start_async_task(app_data: Arc<Mutex<MyDataModel>>, _: Arc<()>) { //  UI.  . thread::sleep(Duration::from_secs(10)); app_data.modify(|state| { state.counter += 10000; }); } 

Our styles

 const CUSTOM_CSS: &str = " .row { height: 50px; } .orange { background: linear-gradient(to bottom, #f69135, #f37335); font-color: white; border-bottom: 1px solid #8d8d8d; }"; 

Actually, the functions for creating our DOM for displaying it to the user

 impl azul::prelude::Layout for ChatDataModel { //1 fn layout(&self, info: azul::prelude::WindowInfo<Self>) -> azul::prelude::Dom<Self> { //2 if self.logged_in { self.chat_form(info) } else { self.login_form(info) } } } impl ChatDataModel { //3 fn login_form(&self, info: azul::prelude::WindowInfo<Self>) -> azul::prelude::Dom<Self> { //4 let button = azul::widgets::button::Button::with_label("Login") //5 .dom() //6 .with_class("row") //7 .with_class("orange") //8 .with_callback( azul::prelude::On::MouseUp, azul::prelude::Callback(Controller::login_pressed)); //9 let port_label = azul::widgets::label::Label::new("Enter port to listen:") .dom() .with_class("row"); //10 let port = azul::widgets::text_input::TextInput::new() //11 .bind(info.window, &self.login_model.port_input, &self) .dom(&self.login_model.port_input) .with_class("row"); // 9 let address_label = azul::widgets::label::Label::new("Enter server address:") .dom() .with_class("row"); //10 let address = azul::widgets::text_input::TextInput::new() //11 .bind(info.window, &self.login_model.address_input, &self) .dom(&self.login_model.address_input) .with_class("row"); //12 azul::prelude::Dom::new(azul::prelude::NodeType::Div) .with_child(port_label) .with_child(port) .with_child(address_label) .with_child(address) .with_child(button) } //13 fn chat_form(&self, info: azul::prelude::WindowInfo<Self>) -> azul::prelude::Dom<Self> { //14 let button = azul::widgets::button::Button::with_label("Send") .dom() .with_class("row") .with_class("orange") .with_callback(azul::prelude::On::MouseUp, azul::prelude::Callback(Controller::send_pressed)); //15 let text = azul::widgets::text_input::TextInput::new() .bind(info.window, &self.messaging_model.text_input_state, &self) .dom(&self.messaging_model.text_input_state) .with_class("row"); //12 let mut dom = azul::prelude::Dom::new(azul::prelude::NodeType::Div) .with_child(text) .with_child(button); //16 for i in &self.messaging_model.messages { dom.add_child(azul::widgets::label::Label::new(i.clone()).dom().with_class("row")); } dom } } 

1. The function that creates the final DOM, and is called whenever the interface needs to be redrawn.
2. If we are already connected to the server, then we show the form for sending and reading messages, otherwise we display the form for connecting to the server.
3. Creates a form to enter data required to connect to the server.
4. Create a button labeled Login.
5. Convert it to a DOM object.
6. Add a row class to it.
7. Add css class orange to it.
8. Add an event handler to click on the button.
9. Create a text label with the text to display to the user and the css class row.
10. Create a text field for entering text with text from the properties of our model and the css class row.
11. Bind the text field to the property of our DataModel. This is a two-way binding. Now editing TextInput automatically changes the text in the property of our model and the reverse is also true. If we change the text in our model, the text in TextInput will change.
12. Create a root DOM element in which we put our UI elements.
13. Creates a form for sending and reading messages.
14. Create a button with the text "Send" and css classes "row", "orange" and an event handler when it is clicked.
15. Create a text entry field with two-way binding with the property of the model self.messaging_model.text_input_state and the css class “row”.
16. Add text labels that display messages that were written in the chat.

Our model, which stores the state of our interface

 //1 #[derive(Debug)] //2 struct ChatDataModel { //3 logged_in: bool, //4 messaging_model: MessagingDataModel, //5 login_model: LoginDataModel, } #[derive(Debug, Default)] struct LoginDataModel { //6 port_input: azul::widgets::text_input::TextInputState, //7 address_input: azul::widgets::text_input::TextInputState, } #[derive(Debug)] struct MessagingDataModel { //8 text_input_state: azul::widgets::text_input::TextInputState, //9 messages: Vec<String>, //10 socket: Option<UdpSocket>, //11 has_new_message: bool, } 

1. This will allow us to display our structure as a string in a pattern like {:?}
2. Our data model. In order to be able to use it in Azul. She must implement the treyt layout.
3. Flag to check if the user is connected to the server or not.
4. Model for displaying the form for sending messages to the server and saving messages received from the server.
5. Model to display the form to connect to the server.
6. The port that the user entered. We will listen to it with our socket.
7. The address of the server that the user entered. We will connect to it.
8. User message. We will send it to the server.
9. The message array that came from the server.
10. The socket through which we communicate with the server.
11. Flag to check if we received a new message from the server.

And finally, the main entry point into the application. Runs a loop from GUI drawing and user input processing.

 pub fn run() { //1 let app = azul::prelude::App::new(ChatDataModel { logged_in: false, messaging_model: MessagingDataModel { text_input_state: azul::widgets::text_input::TextInputState::new(""), messages: Vec::new(), socket: None, has_new_message: false, }, login_model: LoginDataModel::default(), }, azul::prelude::AppConfig::default()); // 2 let mut style = azul::prelude::css::native(); //3 style.merge(azul::prelude::css::from_str(CUSTOM_CSS).unwrap()); //4 let window = azul::prelude::Window::new(azul::prelude::WindowCreateOptions::default(), style).unwrap(); //5 app.run(window).unwrap(); } 

1. Create an application with starting data.
2. Styles used by the application by default.
3. Add our own styles to them.
4. Create a window that will display our application.
5. Run the application in this window.

Server

Main entry point to the application

 pub fn run() { //1 let socket = create_socket(); //2 let (sx, rx) = mpsc::channel(); //3 start_sender_thread(rx, socket.try_clone().unwrap()); loop { //4 sx.send(read_data(&socket)).unwrap(); } } 

1. Create a socket.
2. Create a one-way channel with one sx message sender and multiple rx recipients.
3. We start the distribution of messages to all recipients in a separate thread.
4. We read data from the socket and send it to the stream that sends messages to clients connected to the server.

Function to create a stream for sending messages to clients

 fn start_sender_thread(rx: mpsc::Receiver<(Vec<u8>, SocketAddr)>, socket: UdpSocket) { //1 thread::spawn(move || { //2 let mut addresses = Vec::<SocketAddr>::new(); //3 loop { //4 let (bytes, pre) = rx.recv().unwrap(); // 5 if !addresses.contains(&pre) { println!(" {} connected to server", pre); addresses.push(pre.clone()); } //6 let result = String::from_utf8(bytes) .expect("can't parse to String") .trim() .to_string(); println!("received {} from {}", result, pre); //7 let message = format!("FROM: {} MESSAGE: {}", pre, result); let data_to_send = message.as_bytes(); //8 addresses .iter() .for_each(|s| { //9 socket.send_to(data_to_send, s) //10 .expect(format!("can't send to {}", pre).as_str()); }); } }); } 

1. Launch a new thread. move means that variables are taken over by lambda and flow, respectively. More specifically, our new thread will “swallow” the rx and socket variables.
2. A collection of addresses connected to our customers. We will send all our messages to all of them. In general, in a real project, it would be necessary to do the processing of disconnecting the client from us and removing its address from this array.
3. Run an infinite loop.
4. We read data from the channel. Here the stream will be blocked until new data arrives.
5. If this address is not in our array, then add it there.
6. We decode the UTF8 string from the byte array.
7. We create an array of bytes that we are going to send to all our clients.
8. We pass through the collection of addresses and send the data to each.
9. The write operation in the UDP socket is non-blocking, so here the Function will not wait until the message arrives at the receiver and is executed almost instantly.
10. expect in case of an error will make an emergency exit from the program with the specified message.

The function creates a socket based on user input.

 const TIMEOUT_IN_MILLIS: u64 = 2000; fn create_socket() -> UdpSocket { println!("Enter port to listen"); //1 let local_port: String = read!("{}\n"); let local_address = format!("127.0.0.1:{}", local_port.trim()); println!("server address {}", &local_address); //2 let socket = UdpSocket::bind(&local_address.trim()) .expect(format!("can't bind socket to {}", &local_address).as_str()); //3 socket.set_read_timeout(Some(Duration::from_millis(TIMEOUT_IN_MILLIS))) .expect("can't set time out to read"); //4 socket } 

1. We read the port that our server will listen to and create a local server address based on it.
2. Create a UDP socket listening on this address.
3. Set the timeout for the read operation. The read operation is blocking and it will block the stream until new data arrives or timeout occurs.
4. We return the created socket from the function.
5. The function reads data from the socket and returns it along with the sender's address.

Function to read data from socket

 fn read_data(socket: &UdpSocket) -> (Vec<u8>, SocketAddr) { //1 let mut buf = [0u8; 4096]; //2 loop { match socket.recv_from(&mut buf) { //3 Ok((count, address)) => { //4 return (buf[..count].into(), address); } //5 Err(e) => { println!("Error {}", e); continue; } }; } } 

1. Buffer - a place where we will read the data.
2. Starts a loop that will run until valid data is read.
3. We get the number of bytes read and the sender's address.
4. We make a slice of the array from its beginning to the quantities read bytes and convert it into a vector of bytes.
5. If there is a timeout or other error, then go to the next iteration of the cycle.

About layers in the application

 class User { public string FirstName { get; set; } public string LastName { get; set; } public string FullName { get { return FirstName + " " + LastName; } } public bool Equal(User user) { return this.FullName == user.FullName; } } 

 using System; using System.Collections.Generic; using System.Text; //Entities class User { public int Id { get; set; } public string Name { get; set; } } //Data Access Layer class UserRepository { private readonly Dictionary<int, User> _db; public UserRepository() { _db = new Dictionary<int, User>(); } public User Get(int id) { return _db[id]; } public void Save(User user) { _db[user.Id] = user; } } //Business Logic Layer class UserService { private readonly UserRepository _repo; private int _currentId = 0; public UserService() { _repo = new UserRepository(); } public void AddNew() { _currentId++; var user = new User { Id = _currentId, Name = _currentId.ToString() }; _repo.Save(user); } public string GetAll() { StringBuilder sb = new StringBuilder(); for (int i = 1; i <= _currentId; i++) { sb.AppendLine($"Id: {i} Name: {_repo.Get(i).Name}"); } return sb.ToString(); } } //presentation Layer aka Application Layer class UserController { private readonly UserService _service; public UserController() { _service = new UserService(); } public string RunExample() { _service.AddNew(); _service.AddNew(); return _service.GetAll(); } } namespace ConsoleApp1 { class Program { static void Main(string[] args) { var controller = new UserController(); Console.WriteLine(controller.RunExample()); Console.ReadLine(); } } } 

PS