Simple Chat Application Using Jaggery Framework

In this blog post, it’s going to guide you through the steps which involve in creating a simple chat application using WSO2‘s Jaggery Framework.

What is Jaggery?

Jaggery is a framework, which offers a completely Javascript way to write all parts of Web applications and services as a way to minimize impedance mismatches across different layers of the Web application and API development experience while closing the gap between Web apps from Web services by allowing one to create both applications and APIs at the same time.

Functionality of the Chat Application

In this tutorial, it will only focus on providing these basic requirements for the Chat application.

  • Create a chat room with a unique id.
  • Join existing chat-room using it’s unique id.
  • Have multiple chat rooms opened in multiple tabs.
  • Kick off users from the chat room.

log into chat application
Screen Shot 1 – Chat Login that allows users to create a new chat room or join an existing chat using pre-shared key.
Screen shot of chat window
Screen Shot 2 – Chat window that allows users to type in messages, view chat log and manage users

However, the application is not limited to above mentioned functionalities. Therefore, feel free to hack the code a bit and add your own features to the application.

Design of the application

Folder Structure

jagerry chat folder structureWhen writing a simple Jaggery application, there’s no particular way to structure the files in your project. However, for the simplicity I’ve chosen this folder structure.

Note : This folder structure contain a pom.xml and a zip-descriptor.xml, though this is not a Java project. Those files were only used to automate the build and deploy processes of the application. What it does is, it will archive the project directory as a .zip archive and copy to application server. You can either remove this and do the deploy process manually or edit the pom.xml file accordingly (by changing the server path).

Data Structure

This application is primarily based on web-socket connections. Each connected web socket will represent user’s connection between the browser (more accurately, the browser tab) and the chat server. Since each server instance should be able to keep track of all the connected chat rooms and their users, it requires a global variable which is available throughout all server instances. In-order to keep that variable global, this chat application uses Jaggery Frameworks built-in application variable. Within that variable, it holds a map of chat rooms. The structure of that map variable is described below. Source code of the Server side Jaggery application is mainly focusing manipulating this variable.

chat application data structure

Code

This post will only contain the server side Jaggery file (server.jag) and the main client side JavaScript file (chat_client.js). If you require the full source code, it’s available on GitHub (Jaggery Chat Source).

server.jag

chat_client.js

Note : Remember to change the chat.SERVER = "ws://192.168.1.103:9763/chat/server.jag";  with your IP address.

If you find this useful, Please leave a comment below 🙂 . At the meantime, refer to below links to learn more about WSO2, Jaggery Framework, WSO2 Application Server.

  1. WSO2 : Link
  2. About Jaggery Framework : Link
  3. Jaggery webSocket : Link
  4. WSO2 Application Server : Link