Сontinue to develop Weber, and now it has more features than Weber-0.0.1, like:
First of all we must to create new Weber project. Get Weber from github:
First of all we must to declare routing for our chat application. It will be three route path:
We will have 2 views for chat application:
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:
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.
- https support
- redirect support
- http headers in response
- we will have an own logo soon...
New project
First of all we must to create new Weber project. Get Weber from github:
git clone https://github.com/0xAX/weber.gitGo to the Weber's root directory and create new project with:
mix weber.new /home/user/SimpleChatWeber 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 compileYou can run empty weber project after successful compilation with executing:
./start.shand 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.
Views and Controllers
We will have 2 views for chat application:
- login.html - simple template for login
- chat.html - main chat's view
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
- websocket_init - new websocket connection
- websocket_terminate - websocket connection is terminate
- websocket_message - handles incoming messages.
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.
Comments