CodeIgniter Chat example

How to creating and integrate gmail, facebook like chat system to the CodeIgniter system or web site.In this article is describing step by step how to integrate simple chat process into the CodeIgniter.

CodeIgniter Chat example Features

Multiple chatting
Using JQuery Ajax
Display notifications by changing colors
Displays Sent time after 3 minutes of inactivity
Basically similar to Gmail, Facebook like chat box
Auto-resize of text input box
Minimize and close chat boxes

Browser Compatibility

1. Firefox 2+
2. Chrome
3. Internet Explorer 6+
4. Safari 2+
5. Opera 9+

CodeIgniter Facebook like ajax Live Chat Plugin Version 2

How to create chat process

Step-1

1-First install fresh codeigniter into your localhost or web server.You can learn how to install codeigniter by it’s official web site.
2-Open the config file(application/config/config.php) and put your server and database details there.
Also need to as TRUE.

    $config['hostname'] 	= "localhost";
    $config['db_username'] 	= "root";
    $config['db_password'] 	= "";
    $config['db'] 		= "codeigniter";
	$config['sess_cookie_name']	= 'ci_session';
	$config['sess_expiration']	= 7200;
	$config['sess_expire_on_close']	= FALSE;
	$config['sess_encrypt_cookie']	= TRUE;  // This must be TRUE
	$config['sess_use_database']	= FALSE; // This must be FALSE
	$config['sess_table_name']	= 'ci_sessions';
	$config['sess_match_ip']	= FALSE;
	$config['sess_match_useragent']	= TRUE;
	$config['sess_time_to_update']	= 300;

$config['hostname'] = "localhost";

$config['db_username'] = "root";

$config['db_password'] = "";

$config['db'] = "codeigniter";

$config['sess_cookie_name'] = 'ci_session';

$config['sess_expiration'] = 7200;

$config['sess_expire_on_close'] = FALSE;

$config['sess_encrypt_cookie'] = TRUE; // This must be TRUE

$config['sess_use_database'] = FALSE; // This must be FALSE

$config['sess_table_name'] = 'ci_sessions';

$config['sess_match_ip'] = FALSE;

$config['sess_match_useragent'] = TRUE;

$config['sess_time_to_update'] = 300;

And coockie path ,

	$config['cookie_path']	= "/";

1	$config['cookie_path'] = "/";

Step-2

1-Go to the phpmyadmin, run this tables there.
chat table

DROP TABLE IF EXISTS `chat`;
CREATE TABLE `chat` (
  `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `from` VARCHAR(255) NOT NULL DEFAULT '',
  `to` VARCHAR(255) NOT NULL DEFAULT '',
  `message` TEXT NOT NULL,
  `sent` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
  `recd` INTEGER UNSIGNED NOT NULL DEFAULT 0,
  PRIMARY KEY (`id`),
 INDEX `to` (`to`),
 INDEX `from` (`from`)
)
ENGINE = InnoDB CHARSET=latin1;

DROP TABLE IF EXISTS `chat`;

CREATE TABLE `chat` (

`id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,

`from` VARCHAR(255) NOT NULL DEFAULT '',

`to` VARCHAR(255) NOT NULL DEFAULT '',

`message` TEXT NOT NULL,

`sent` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',

`recd` INTEGER UNSIGNED NOT NULL DEFAULT 0,

PRIMARY KEY (`id`),

INDEX `to` (`to`),

INDEX `from` (`from`)

)

ENGINE = InnoDB CHARSET=latin1;

users table

DROP TABLE IF EXISTS `ci_users`;
CREATE TABLE `ci_users` (
  `user_id` int(11) NOT NULL auto_increment,
  `user_name` varchar(255) NOT NULL,
  `user_email` varchar(255) NOT NULL,
  `user_password` varchar(255) NOT NULL,
  `registered_date` datetime NOT NULL,
  `status` int(5) NOT NULL,
  `online` int(5) NOT NULL,
  PRIMARY KEY  (`user_id`,`user_email`)
) ENGINE=InnoDB CHARSET=latin1;

DROP TABLE IF EXISTS `ci_users`;

CREATE TABLE `ci_users` (

`user_id` int(11) NOT NULL auto_increment,

`user_name` varchar(255) NOT NULL,

`user_email` varchar(255) NOT NULL,

`user_password` varchar(255) NOT NULL,

`registered_date` datetime NOT NULL,

`status` int(5) NOT NULL,

`online` int(5) NOT NULL,

PRIMARY KEY (`user_id`,`user_email`)

) ENGINE=InnoDB CHARSET=latin1;

Download full database from here.

Step-3

1-Download this chat.js Javascript file and keep it in the script folder named as js(application/js).
Open that file and replace your site url instead of the “http://localhost/CodeIgniter/”.There are 4 places.
Download chat.js file from here.

2-Also you need to put these jquery.js files there.
3-Then download these 3 css files and keep those in the css folder(application/css).
Download css files(3 KB)
File structure.

Step-4

1-Create a file to display online users.I’m do this,
-application/views/chat/userList.php (view file)
userList.php file structure

<?php
	session_start(); // This is need.Otherwise not getting your name in the chat box.
	$_SESSION['username'] = $this->session->userdata('username'); // Must be already set
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CodeIgniter Demo - Chat</title>
	<script type="text/javascript" src="http://demo.webexplorar.com/codeigniter/application/js/jquery.js"></script>
	<script type="text/javascript" src="http://demo.webexplorar.com/codeigniter/application/js/chat.js"></script>
    <link type="text/css" rel="stylesheet" media="all" href="http://demo.webexplorar.com/codeigniter/application/css/chat.css" />
    <link type="text/css" rel="stylesheet" media="all" href="http://demo.webexplorar.com/codeigniter/application/css/screen.css" />
    <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" media="all" href="http://demo.webexplorar.com/codeigniter/application/css/screen_ie.css" />
    <![endif]-->
</head>
<body>
<div id="container">
	<h2>Online Users</h2>
     <table width="45%" cellspacing="1" cellpadding="2" class="tableContent" style="margin-left:0px !important;">
        <tbody>
          <tr style="background-color:#9EB0E9;  font-size:13px; font-weight:bold; color:#fff;">
            <th>Online</th>
            <th>User Id</th>
            <th>User Name</th>
          </tr>
		<?php
		if(isset($listOfUsers))
		{
			foreach($listOfUsers->result() as $res)
			{
		?>
          <tr style="background-color:#efefef;">
            <td><?php if($res->online==1) echo 'Active'; else echo 'Inactive'; ?></td>
            <td><?php echo $res->user_id; ?></td>
            <td><?php if($_SESSION['username']==$res->user_name) { ?>
                 		<a href="#" style="text-decoration:none">
                      <?php } else { ?>
                        <a href="javascript:void(0)" onClick="javascript:chatWith('<?php echo $res->user_name; ?>');">
                <?php } ?>
                <?php echo $res->user_name;  ?>
                        </a>
                  </td>
            </tr>
			<?php
			} // end foreach loop
		} // end if condition
		?>
		</tbody>
	</table>
 </div>
</body>
</html>

<?php

session_start(); // This is need.Otherwise not getting your name in the chat box.

$_SESSION['username'] = $this->session->userdata('username'); // Must be already set

<!DOCTYPE html>

<head>

<title>CodeIgniter Demo - Chat</title>

<!--[if lte IE 7]>

<![endif]-->

</head>

<body>

<h2>Online Users</h2>

<tbody>

<th>Online</th>

</tr>

<?php

if(isset($listOfUsers))

{

foreach($listOfUsers->result() as $res)

{

<td><?php if($res->online==1) echo 'Active'; else echo 'Inactive'; ?></td>

<?php } else { ?>

<?php } ?>

<?php echo $res->user_name; ?>

</a>

</td>

</tr>

<?php

} // end foreach loop

} // end if condition

</tbody>

</table>

</div>

</body>

</html>

-application/controllers/chat.php (controller file)
chat.php controller file structure

class Chat extends CI_Controller {
	//Global variable
    public $outputData;		//Holds the output data for each view
	public $loggedInUser;
	public function index()
    {
		//Load the users model
		$this->load->model('users_model');
		//Load the session library
		$this->load->library('session');
		// Redirect if not logged
		$sessionUserID = $this->session->userdata('user_id');
		if(!$sessionUserID)
			redirect('welcome');
		//Get all users
		$this->outputData['listOfUsers']	= $this->users_model->getUsers();
		 $this->load->view('chat/userList',$this->outputData);
    }
}

class Chat extends CI_Controller {

//Global variable

public $outputData; //Holds the output data for each view

public $loggedInUser;

public function index()

{

//Load the users model

$this->load->model('users_model');

//Load the session library

$this->load->library('session');

// Redirect if not logged

$sessionUserID = $this->session->userdata('user_id');

if(!$sessionUserID)

redirect('welcome');

//Get all users

$this->outputData['listOfUsers'] = $this->users_model->getUsers();

$this->load->view('chat/userList',$this->outputData);

}

2-Download this chat.php file to process the chat, and put it in the application/views/chat/
Download chat.php file from here.

Open that file and put the server, database details there and save it.

	define ('DBPATH','localhost');
	define ('DBUSER','root');
	define ('DBPASS','');
	define ('DBNAME','codeigniter');

define ('DBPATH','localhost');

define ('DBUSER','root');

define ('DBPASS','');

define ('DBNAME','codeigniter');

3-Go to the model folder and create file named users_model.php

class Users_model extends CI_Model {
	/**
	 * Constructor
	 *
	 */
	function __Construct()
    {
        parent::__Construct();
    }
	// --------------------------------------------------------------------
	/**
	 * Get Users
	 *
	 * @access	private
	 * @param	array	conditions to fetch data
	 * @return	object	object with result set
	 */
	 function getUsers($conditions=array(),$fields='')
	 {
		parent::__construct();
		if(count($conditions)>0)
	 		$this->db->where($conditions);
		$this->db->from('ci_users');
		$this->db->order_by("ci_users.user_id", "asc");
		if($fields!='')
				$this->db->select($fields);
		else
	 		$this->db->select('ci_users.user_id,ci_users.user_name,ci_users.user_email,ci_users.online');
		$result = $this->db->get();
		return $result;
      }//End of getUsers Function
 }

class Users_model extends CI_Model {

/**

* Constructor

function __Construct()

{

parent::__Construct();

}

// --------------------------------------------------------------------

/**

* Get Users

* @access private

* @param array conditions to fetch data

* @return object object with result set

function getUsers($conditions=array(),$fields='')

{

parent::__construct();

if(count($conditions)>0)

$this->db->where($conditions);

$this->db->from('ci_users');

$this->db->order_by("ci_users.user_id", "asc");

if($fields!='')

$this->db->select($fields);

else

$this->db->select('ci_users.user_id,ci_users.user_name,ci_users.user_email,ci_users.online');

$result = $this->db->get();

return $result;

}//End of getUsers Function

}

My file structure like this.

Screens

Chat by Chris:

Chat by Sumith

Chat history saved in the table

That’s only.
View CodeIgniter Chat example Demo

Go to the new page and wait 5 seconds, then click “SKIP AD” button of the top right corner.Then you can view demo.

Full source code containing with users login and logout process.

Download Full CodeIgniter Chat Example(2.6 MiB)

Want this freebie? Enter your email and get it now!

Simply enter your email address and the download link will be sent right to your inbox.

CodeIgniter Chat example Features

Browser Compatibility

CodeIgniter Facebook like ajax Live Chat Plugin Version 2

How to create chat process

Step-1

Step-2

Step-3

Step-4

Screens

Chat history saved in the table

Want this freebie? Enter your email and get it now!

Related Posts

CodeIgniter create duplicate MySQL record

Codeigniter remove index.php from url

Codeigniter flash message doesn't work