Learning to use Rust with WebSockets communication
version: 2.0 date: 2019-05-10 author: bestia.dev repository: GitHub
Hashtags: #rustlang #game #tutorial
My projects on Github are more like a tutorial than a finished product: bestia-dev tutorials.
On the base of mem1 (Rust Wasm/WebAssembly with Dodrio Virtual Dom) added WebSockets communication - second iteration.
This is a simple memory game for kids. The images are funny cartoon characters from the alphabet.
The cards grid is only 4x4.
For fun I added
- the sounds of Morse alphabet codes and
- the International Aviation spelling.
You can play the game here (hosted on google cloud platform):
Clone and build
git clone email@example.com:bestia-dev/mem2.git cd mem2 wasm-pack build --target web
You cannot use this project without a html/WebSocket server. Read the next chapter.
The mem2_server project and instructions is here:
For development, you have to run the game from the mem2_server. So you will have both the server and client side working.
mem2/pkg/ folder to
mem2_server/mem2/pkg. This is the compiled wasm code.
After building and running the server,
cd mem2_server cargo run
it will print the External IP Address e.g. 192.168.0.22
Open your browser and use that address.
The game is made for exactly 2 players. Open 2 browser windows with the same address.
Preferably use 2 smartphones on the same WiFi network.
Memory game rules
This game is for exactly 2 players.
Both players must have the webpage simultaneously opened in the browser to allow communication.
To start over just refresh the webpage.
The first player clicks on 'Ask Player2 to play?' and broadcasts the message over WebSocket.
Player2 then sees on the screen 'Click here to Accept play!', clicks it and sends the message back to Player1.
The game starts with a grid of 8 randomly shuffled card pairs face down - 16 cards in all.
On the screen under the grid are clear signals which player plays and which waits.
Player1 flips over two cards with two clicks.
If the cards do not match, the other player clicks on 'Click here to Take your turn' and both cards are flipped back face down. Then it is his turn and he clicks to flip over his two cards.
If the cards match, they are left face up permanently and the player receives a point. He continues to play, he opens the next two cards.
The player with more points wins.
Upgrades, refactoring and enhancement over mem1
I decided that the project "mem1" is good as it is.
It is a tutorial how to create a simple wasm with Rust Wasm/WebAssembly with Dodrio Virtual Dom and turn it into a webpage, electron and PhoneGap app. Very multiplatform !
Adding anything more would make it difficult to understand and to follow the code.
That is why I started a second project "mem2". I continue on the foundation of mem1 and will add stuff.
Hopefully more advanced and interesting.
Read the interesting StructModel.md to understand the basics of the new structs and data. I tried to use
dynamic borrow checker. Then I realized, it was not a smart move. It was not how Rust should work. I will try to rethink it in the next iteration using
static borrow checker.
I opened an account on Azure and create a Linux Virtual Machine to host the game server mem2_server and then closed it. And then opened a google cloud platform account and repeat. I learned how to build with Rust and Warp a http + WebSocket server that listen on the same port.
I learned a lot!
And there is more to learn. The parts of Rust that are very different from other languages are the toughest. A totally new way of thinking.
//endregion a lot. To Fold it and UnFold it press
fold and choose from a variety of options. Start with
cargo crev reviews and advisory
It is recommended to always use cargo-crev
to verify the trustworthiness of each of your dependencies.
Please, spread this info.
On the web use this url to read crate reviews. Example:
web, http, css
JsValue, future, promises
Images included free cartoon characters:
Reference counting, Borrow Checker in runtime instead of compile time