ANEXIA Development and Managed Hosting
NOV
5
2015

Setting up your own online chat module with CodeIgniter

Written on November 5, 2015 by Manuel Wutte

Everyone is familiar with it, or has at least seen it before – we’re talking about the online chat feature available on many websites like Facebook or Google+.

But what the underlying technology actually looks like and how these chat services basically work is what I would like to explain in the following.

You can then complete a tutorial on how to build your own chat feature using the CodeIgniter framework.

CodeIgniter Chat

 

THE UNDERLYING PRINCIPLE

There are essentially three different types of online chat:

  • Internet Relay Chat (IRC)
  • Web chat
  • Instant Messaging

IRC uses a traditional client-server architecture, which requires special chat servers that are interconnected. A dedicated piece of client software that is either installed directly on the PCs of the various chat participants or runs in their browser is used to exchange messages.

Simple webchat modules, such as those used on live support systems, do not require any additional software. Communication is usually limited to the specific website.

Instant messaging is completely different, however. Communications are not typically exchanged by way of a public chatroom, but rather exclusively between the respective chat participants who identify themselves using a specific piece of software.

IRC and instant messaging usually offer other features such as chat logs or files transfers as well.

YOUR OWN CHAT MODULE WITH CODEIGNITER

CodeIgniter Logo

 

BUILD THE FOUNDATION

To get started, we recommend that you first download the latest version of the CodeIgniter framework from the website (http://www.codeigniter.com). This is currently version 3.0.2.

Next, copy all of the files to a subdirectory called “ci-chat” on the web server (e.g. XAMPP, LAMP, etc.) and open its root directory in your browser, e.g. http://localhost/ci-chat/.

Once all of the requirements for the framework are met, you should then see the CodeIgniter welcome page.

In the autoloader configuration, navigate to /application/config/autoload.php and then add the URL Helper and the database library, as we will need these components later.

In the route configuration under /application/config/routes.php, now change the default controller from “welcome” to “chat” since later we want our chat application to be loaded by default.

THE APPLICATION ITSELF

 

The actual application

In the current state, the route configuration would simply return a 404 error because we have not yet defined a chat controller.

So we first need to create a new controller under /application/controllers with a new nameChat.php and should also note the following here:

This controller looks ‒ and is ‒ primitive. Its only purpose is to load the appropriate view. A separate API controller is used for the actual functionality.

It would, of course, be possible to include the entire logic in the previously created controller as well. The separation into multiple controllers makes sense, especially in the case of larger projects, because it greatly increases readability and therefore maintainability.

To save the individual messages so that they can then be delivered to the other chat participants, we need a database and a suitable model.

Under /application/models, we will now create a new model called Chat_model.php and add the following items:

The method add_message() allows us to add new messages. The parameter of the method is the actual message and nickname of the chat participant who sent the message. To avoid conflicts when multiple chat participants use the same nickname, we also save a GUID. This is a unique identifier, which will then be used only by the application itself.

The method get_messages() lets us retrieve all messages written from a specific point in time. The method requires the respective UNIX timestamp for this.

 

To make both of these methods available externally as well, we create a new controller Api.php under /application/controllers and add:

The previously created chat model is now loaded into the framework. In addition, _setOutput() is used to set up a central output handler, to which we simply pass the required data and then process this accordingly (in this case, JSON).

The graphical user interface

Under /application/views, we create a new view chat.php (which we already linked in the chat controller).

Here, we build the basic HTML framework for our chat based on jQuery und Bootstrap.

In  the Javascript section there is a check, so that the input field for chat messages is only visible if the user has entered a nickname.

For making this looking beautiful, we now create a chat.css with following content:

 

In the next step we define here additional auxiliary functions and also save the GUID of the chat participant in a cookie. For simplicity, this identifier is generated locally in the browser. In a production environment, this could for example be stored in a user table directly in the database.

 

Now we define the actual functions in the form of closures for adding and displaying messages.

For the sake of simplicity, the HTML markup is assembled directly in append_chat_data(). The data itself is ideally passed to separate rendering functions, or a proper JavaScript template engine is used.

However, this would go well beyond the scope of this example, which is why we are using this basic solution

 

Now we define the behavior of actual GUI.

This code makes it possible to send messages directly by clicking on the Enter button and disables the field until the message has been processed by the server. In the callback from sendChat(), this field is enabled again.

To ensure all messages are received nearly in real-time, the function update_chats() is called in 1.5 second intervals. The function uses the respective timestamp to check whether there are new messages and adds them to the chat window if any are available.

 

Conclusion

The type of chat integration presented in this example generates numerous server requests and therefore a relatively high server load for the database.

For larger websites, it would be advisable to opt for an appropriate infrastructure, i.e. select a suitable chat protocol (e.g. XMPP) and then select an appropriate integration option.

This example is intended for learning purposes, but can still be implemented for smaller-scale websites that see less traffic.

 

Note: This example requires basic knowledge of the CodeIgniter framework  (see Quickstart to the CodeIgniter framework) and uses uses certain open source code snippets from  Bootswatch.com.


facebooktwittergoogle_pluslinkedinmail