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:



# Akka and Websockets


GET /chat/index_socket controllers.ChatController.index_socket GET /chat/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)


Chat Room

var output;

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

function init(){

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

writeToScreen('' + '');


websocket.onerror = function(evt) {

writeToScreen('ERROR: ' +;



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


function writeToScreen(message){

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



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




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


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.

< Prev   CONTENTS   Source   Next >