Introduction

In the course Network Programming,EDA095, one of the course requirements is to complete a project with the base in network programming.

Background

The project was begun as part of the course in Network Programming EDA095. Its purpose is for the students to gather and use the knowledge involving network programming using different methods at our disposal. During this project we've encountered different techniques such as PHP, AJAX, MySQL and for website tools HTML, CSS and JavaScript.

Requirements

Development Requirements

  1. The chat-system is divided into two parts: The Client, which will interact with the front-end which is shown through CSS and HTML. Functions are implemented in PHP and JavaScript. The Server, which will communicate with the client through PHP and AJAX. The server itself is based on PHP, AJAX and MySQL.
  2. Development shall be version controlled using GIT.

Quality Requirements

Performance:

  1. The system shall be sufficiently user-friendly and intuitive so that an LTH-student shall be able to use and explain the functionality within the system.
  2. The system shall allow people to choose nicknames so the messages can be separated.
  3. The system shall allow people to leave the chat room through a logout button (To change Nickname etc.).
  4. The system shall show author, avatar and time-stamp for each message.
  5. The system shall show how many users that are currently online.
  6. The system shall allow up to 20 people simultaneously using it.

Functional Requirements

  1. Scenario: Open VAHH-chat.

    - The user opens the VAHH-chat with a URL

    Pre-conditions: The URL is opened in an up to date web-reader with JavaScript enabled.

    Post-condition: The VAHH-chat is shown, with messages from the current session and showing users logged in to the chat.


  2. Scenario: Login.

    - User logs in by picking a nickname

    Pre-condition: The user is in VAHH-Chat tab.

    Post-condition: The user is logged in, all messages and users from previous sessions are shown.


  3. Scenario: Send message.

    - The user sends a message by writing the message in the text field and clicking on the "Submit"-button.

    Pre-condition: The user has chosen a nickname and has logged in to the system.

    Post-condition: The message that was chosen is sent and shown in the chat for the user and all others to see.


  4. Scenario: Receive message.

    - The user has the chat open with a chosen nickname/logged in and another user sends a message that is shown in the chat.

    Pre-condition: The user has the chat open with a chosen nickname/logged in.

    Post-condition: The message is shown in the chat.


  5. Scenario: Logout.

    - The user clicks on the "Logout"-button and thus logging him/her out of her system.

    Pre-condition: The user is logged in to the system.

    Post-condition: The user logs out and leaves the nickname earlier chosen free for anyone else to pick.

Model of the system

The system has been implemented through a web-interface, thus we've been working with HTML, CSS, JavaScript, PHP, AJAX and jQuery.

HTML is to lay down the structure of the website. Our documents are structured as HTML5 for convenience, as this will allow us to use the new, shorter doctype and skip the type attribute on the script tags. The two main documents is vahhchat.html which contains the chat itself. And index.html which is used to introduce the project and the system.

CSS is to make the appearance more user friendly and visually better. We have four documents for this: chat.css which is for the chat itself, page.css which is for the page, index2.css which is for our index and Report.css which is for the report page.

SQL is used since we're working with a database. We're using two tables: webchat_users and last_lines.

webchat_users holds the attributes ID, name and last_activity. The ID is to easier search and get users. The name field is defined as unique so that no other user can have the same nickname as another. last_activity holds a timestamp, which is updated every 15 seconds for every user. It is also defined as an index, so we can faster delete inactive users.

webchat_lines holds the attributes ID, author, text, ts. The ID is for the same purpose as webchat_users, to easier search and get lines. Author is to store the names of the users that sent the line/message. Text is the message itself and ts is a timestamp so we can delete old messages, just like inactive users.

The code to create the table is executed in out database, but can also be found in tables.sql.

PHP is used operate all methods that is being used. We have vahhchat.php that holds a simple switch statement to define the actions which are supported by the script. Here are functions as login, logout and actions for requesting a list of chats and online users.

All outputs is in the form of JSON messages and errors are raised from exceptions. The switch statement will route the requests to static methods in the Chat.class.php.

ChatBase.class.php has the purpose as a base which is used both by ChatLine and ChatUser. It's main purpose is to define the constructor, which takes an array with parameters and saved only the ones that are defined in the class.

ChatLine.class.php extends ChatBase and is used for chat entries.

ChatBase.class.php extends ChatBase as well and has two methods/functions that saves, which returns the MySQLi object, contained in the DB class, you can check whether the save was successful by checking the affected_rows property. And the method/function update, which updates the last_activity timestamp to the current time. This shows that this person keeps a chat window open and is displayed as online in the users section.

DB.class.php is our database manager which basically handles our SQL-communication between the database and web-browser.

JavaScript is used so the chat will listen for events on the login and submit forms (as well as the logout button). There are also scheduled AJAX requests back to the server for checking for new chat-messages and users.

In script.js we have all the functionality that makes the chat "live". The script will have listeners that will wait for certain events to occur (such as on the login and submit forms).

Usability

The project group decided to set the knowledge level to be such that a university student can easily use and master the chat-room without encountering any difficulties. Information about the system will always be shown so that a user can see how many people are using the system at any given time and other information that is listed in our quality requirements. The group decided that a simple login using just a nickname was all the information that an user would need to use the system. All of the chat code is organized in a single object called chat. It consists of a number of useful methods for the chat-system to work. The script has been implemented so it's self-executing for security purpose, to protect the code from outer sources. E.g. declining access to the tzPost method, that otherwise could've resulted in the possibility to post as many messages as you'd wish, causing the system to crash.

Evaluation

The project succeeded in fulfilling all of the requirements. If we had more time we would have added some more functionality added more functionality to the chat-system. We used an iterative process where we had a basic idea with a few requirements to carefully expanding it with more functionality and adding more requirements. In the project we had assigned roles to each member and had set up weekly meetings where we could brief each other on our progress and what difficulties we've encountered since our last meeting. We took this time to help each other by providing assistance or to help in any other way.

It was a nice and fun project which makes all the Java courses go full circle and rounds off the basic level of Java programming. It was the last piece in the puzzle. The one thing in the project that could've been improved upon is to maybe set up a bi-weekly appointment with the supervisor instead of having them during the lab.

What we've learned concerning coding in JavaScript in PHP is that instead of using AJAX for all our requests every third second, we could've used websockets instead. Thus eliminating the need to send anything from the client, and instead just letting the script at the backend listen after new events.

Source code

See the attached files.

User's Manual

Login to VAHH-chat website and find your way to the link to the chat-room.

When you've been directed to the chat-system you are required to put in a nickname and click the login button.

Now you should be ready to use VAHH-chat. The functions included in the system is to send and receive messages which you are now ready to do.