Writing simple chat application with Weber and Elixir

Сontinue to develop Weber, and now it has more features than Weber-0.0.1, like:
  • https support
  • redirect support
  • http headers in response
  • we will have an own logo soon...
And of course main feature for this moment is WebSocket support, which i added yesterday. Time to look at some examples. As i said we have WebSocket support now in Weber, let's write simple web chat application.

New project


First of all we must to create new Weber project. Get Weber from github:
git clone https://github.com/0xAX/weber.git
Go to the Weber's root directory and create new project with:
mix weber.new /home/user/SimpleChat
Weber creates project directory with initial project template for our chat. Go to the /home/user/SimpleChat directory and execute following commands for getting dependencies and compiling chat application:
mix deps.get && mix compile
You can run empty weber project after successful compilation with executing:
./start.sh
and open it with browser at http://localhost:8080 Now we can start to develop our chat application.

Routing


First of all we must to declare routing for our chat application. It will be three route path:
  • / - for login page;
  • /join/:username - join to the chat room;
  • /chat/:username - render chat room page.
like this:


Views and Controllers


We will have 2 views for chat application:
  • login.html - simple template for login
  • chat.html - main chat's view
login.html:

Here is the simple html template with one input and button elements. I'm using Bootstrap and AngularJS for building my frontend code, but you can use any frontend libraries which you likes for building your applications. As i said here is very simple html template with one input and one button. Button has ng-click event handler. When user presses on login button, sends AJAX post requests to the controller with user's username:

Unfortunatelly now we have now sessions support in Weber, it will be in next versions, so here is very primitive authorization, we save it in gen_server process state. After successful login we redirect to the chat.html page. Chat's template is:

Here is the simple chat template with textarea element, and panel with input and button for sending chat message. We control it with SimpleChatRootController in frontend:

Here we can see that after controller's initialization, it opens WebSocket connection with 3 callbacks:
  • websocket.onopen
  • websocket.onmessage
  • websocket.onclose
We do nothing when WebSocket's connection is open. If connection close we redirect to the /. If we receive message we parse message body and message author and add it to the chat area. Let's see how to handle websocket connection at the backend part. Every Weber's websocket controller must have 3 callbacks:
  • websocket_init - new websocket connection
  • websocket_terminate - websocket connection is terminate
  • websocket_message - handles incoming messages.
Websocket conrtoller for our chat:

Here you can see 3 calbacks which i described above. Every callback takes pid parameter, which is pid of current websocket connection, and websocket_message takes pid and message. And 3 :gen_server.cast calls to the our mock gen_server, for adding new user, removing new user and sending message to the all users. Here is the implementation of this gen_server:

That's all. Now you can compile chat application with mix compile and launch it with ./start.sh. Full source code of chat example you can find - SimpleChat. Weber now is only at the start of developing and we have many plans: adding session API, html generators, helpers and many many more. If you will have any questions, suggestions or you want to take part in Weber developing write us to the Weber issues at Github.

Links




No comments: