Building a Chat Application

Exclusive offer: get 50% off this eBook here
Opa Application Development

Opa Application Development — Save 50%

A rapid and secure web development framework to develop web applications quickly and easily in Opa with this book and ebook

$14.99    $7.50
by Li Wenbo | June 2013 | Open Source Web Development

Opa is a full-stack open source web development framework for JavaScript that lets you write secure and scalable web applications. It generates the standard Node. js and MongoDB applications, natively supports HTML5 and CSS, and automates many aspects of modern web application programming. It handles all aspects of web programming written in one consistent language and is compiled to web standards.

In this article by Li Wenbo, author of Opa Application Development, we will build a chat application. The application offers one chat room. The users who connect to the application will join the chat room automatically and can start discussing immediately. For simplicity, we supply a random username when a user joins. The source code for this application can be found at https://github.com/winbomb/opapackt.

(For more resources related to this topic, see here.)

The following is a screenshot of our chat application:

Creating a project

To begin developing our chat application, we need to create an Opa project using the following Opa command:

opa create chat

This command will create an empty Opa project. Also, it will generate the required directories and files automatically with the structure as shown in the following screenshot:

Let's have a brief look at what these source code files do:

  • controller.opa: This file serves as the entry point of the chat application; we start the web server in controller.opa
  • view.opa: This file serves as an user interface
  • model.opa: This is the model of the chat application; it defines the message, network, and the chat room
  • style.css: This is an external stylesheet file
  • Makefile: This file is used to build an application

As we do not need database support in the chat application, we can remove --import-package stdlib.database.mongo from the FLAG option in Makefile. Type make and make run to run the empty application.

Launching the web server

Let's begin with controller.opa, the entry point of our chat application where we launch the web server. We have already discussed the function Server.start in the Server module section. In our chat application, we will use a handlers group to handle users requests.

Server.start(Server.http, [ {resources: @static_resource_directory("resources")}, {register: [{css:["/resources/css/style.css"]}]}, {title:"Opa Chat", page: View.page } ])

So, what exactly are the arguments that we are passing to the Server.start function?

The line {resources: @static_resource_direcotry("resources")} registers a resource handler and will serve resource files in the resources directory.

Next, the line {register: [{css:["/resources/css/style.css"]}]} registers an external CSS file—style.css. This permits us to use styles in the style.css application scope.

Finally, the line {title:"Opa Chat", page: View.page} registers a single page handler that will dispatch all other requests to the function View.page.

The server uses the default configuration Server.http and will run on port 8080.

Designing user interface

When the application starts, all the requests (except requests for resources) will be distributed to the function View.page, which displays the chat page on the browser. Let's take a look at the view part; we define a module named View in view.opa.

import stdlib.themes.bootstrap.css module View { function page(){ user = Random.string(8) <div id=#title class="navbar navbar-inverse navbar-fixed-top"> <div class=navbar-inner> <div id=#logo /> </div> </div> <div id=#conversation class=container-fluid onready={function(_){Model.join(updatemsg)}} /> <div id=#footer class="navbar navbar-fixed-bottom"> <div class=input-append> <input type=text id=#entry class=input-xxlarge onnewline={broadcast(user)}/> <button class="btn btn-primary" onclick={broadcast(user)}>Post</button> </div> </div> } ... }

The module View contains functions to display the page on the browser. In the first line, import stdlib.themes.bootstrap.css, we import Bootstrap styles.

This permits us to use Bootstrap markup in our code, such as navbar, navbar-fixtop, and btn-primary. We also registered an external style.css file so we can use styles in style.css such as conversation and footer.

As we can see, this code in the function page follows almost the same syntax as HTML. As discussed in earlier, we can use HTML freely in the Opa code, the HTML values having a predefined type xhtml in Opa.

Summary

In this article, we started by creating and a project and launching the web server.

Resources for Article :


Further resources on this subject:


Opa Application Development A rapid and secure web development framework to develop web applications quickly and easily in Opa with this book and ebook
Published: June 2013
eBook Price: $14.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :


Li Wenbo

Li Wenbo studied Computer Science and Technology at Wuhan University, graduating with a master's degree. He has two years experience working as a Software Engineer in a leading telecom company in China. He has been doing web development for about 8 years, ever since he was a student at Wuhan University. He is familiar with a lot of programming languages such as C/C++, Java, JavaScript, PHP, and so on, and he has a passion for new things and technologies. Li tried the Opa framework last year and found it very interesting. He then participated in an Opa challenge and won the first prize.

Li Wenbo is now a freelance developer and owns a small studio in Wuhan, China.

Books From Packt


jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials

web2py Application Development Cookbook
web2py Application Development Cookbook

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Object-Oriented JavaScript
Object-Oriented JavaScript

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

Ruby and MongoDB Web Development Beginner's Guide
Ruby and MongoDB Web Development Beginner's Guide

PHP and MongoDB Web Development Beginner’s Guide
PHP and MongoDB Web Development Beginner’s Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software