Menu
Home
Log in / Register
 
Home arrow Computer Science arrow Building Applications with Scala
Source

Configuring the routes

Next, we will need to expose our controller functions to the UI. We will need to add more routes to the ReactiveWebStore/conf/routes file:

routes

#

# Akka and Websockets

#

GET /chat/index_socket controllers.ChatController.index_socket GET /chat/ws controllers.ChatController.ws

The routes are done now.

Working on the UI

Now, it is time to code on the UI on both the HTML layout and the WebSocket code in

JavaScript. We will need to create a new file, located at ReactiveWebStore/app/views.

Your chat_index.scala.html file should look something like this:

@()(implicit flash:Flash)

@main("Chat"){

Chat Room

var output;

var websocket = new WebSocket("ws://localhost:9000/chat/ws");

function init(){

output = document.getElementById("output"); websocket.onmessage = function(evt) {

writeToScreen('' + evt.data+ '');

};

websocket.onerror = function(evt) {

writeToScreen('ERROR: ' +

evt.data);

};

}

function doSend(message){ websocket.send(message);

}

function writeToScreen(message){

var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message;

$('#output').prepend(pre);

}

window.addEventListener("load", init, false);

Messages


user:       



message:



onclick="doSend( document.getElementById('txtUser').value + ':' + document.getElementById('txtMessage').value );">

Send Message

}

The UI is very simple. There is an input text for you to put your name and there is another one for the text message itself, and a send button. As you can see in the JavaScript code, the first thing that we will do is open a WebSocket connection to the

ws://localhost:9000/chat/ws URL. Then, we will register the init function to run once the browser is ready.

The init function in JavaScript will create two functions for our WebSocket. One function will run when any error occurs and the other function will run for each message emitted by the Akka backend.

We will have a doSend function in JavaScript in order to send a message to the WebSocket. This message will be delivered to the controller and then to the Akka actors. You can also see some JQuery and HTML code in order to create new elements on the UI. This is done in order to display the message in the chat room.

OK, there is one more thing that we will need to do - add a reference to the chat UI on the main page of our application.

Your Index.scala.html should look something like this:

@(message: String)(implicit flash:Flash)

@main("Welcome to Reactive Web Store"){


Manage Products

Manage Reviews

Manage Images

Reports


Chat Room


}

We will also use the opportunity to improve a little bit of the UI design using Twitter Bootstrap column design. In the last row, you can see our link to the chat UI. Now, we can run the application and see our chat working. Run $ activator run:

As you can see, our new chat UI link is there. Now, let's have fun with this new feature. Open four new browsers (simulate four different users), then go to the

http://localhost:9000/chat/index_socket url and let's have a little chat. You should see something similar to this:

Almost done. Our chat feature works; however, we will need to do more than just a functional black box test on the UI. We will need unit tests. Luckily for us, we have the Akka testkit, which allows us to easily test actors.

 
Source
Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
 
Subjects
Accounting
Business & Finance
Communication
Computer Science
Economics
Education
Engineering
Environment
Geography
Health
History
Language & Literature
Law
Management
Marketing
Mathematics
Political science
Philosophy
Psychology
Religion
Sociology
Travel