article

Saturday, December 26, 2015

A Chat Example using CodeIgniter and JQuery

A Chat Example using CodeIgniter and JQuery

Controller 
chat.php
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Chat extends CI_Controller {
  /* The default function that gets called when visiting the page */
  public function index() {      
    $this->load->view('chat-view');
  }
   
  public function get_chats() {
    /* Connect to the mySQL database - config values can be found at:
    /application/config/database.php */
    $dbconnect = $this->load->database();
     
    /* Load the database model:
    /application/models/simple_model.php */
    $this->load->model('Chat_model');
     
    /* Create a table if it doesn't exist already */
    $this->Chat_model->create_table();
     
    echo json_encode($this->Chat_model->get_chat_after($_REQUEST["time"]));
  }
   
  public function insert_chat() {
    /* Connect to the mySQL database - config values can be found at:
    /application/config/database.php */
    $dbconnect = $this->load->database();
     
    /* Load the database model:
    /application/models/simple_model.php */
    $this->load->model('Chat_model');
     
    /* Create a table if it doesn't exist already */
    $this->Chat_model->create_table();
 
    $this->Chat_model->insert_message($_REQUEST["message"]);
  }
   
  public function time() {
    echo "[{\"time\":" +  time() + "}]";
  }
   
}?>
Models 
chat_model.php
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
class Chat_model extends CI_Model {
   
  function __construct()
  {
    /* Call the Model constructor */
    parent::__construct();
  }
 
 
  function get_last_item()
  {
    $this->db->order_by('id', 'DESC');
    $query = $this->db->get('Chats', 1);
    return $query->result();
  }
   
   
  function insert_message($message)
  {
    $this->message = $message;
    $this-> time = time(); 
    $this->db->insert('Chats', $this);
  }
 
  function get_chat_after($time)
  {
    $this->db->where('time >', $time)->order_by('time', 'DESC')->limit(10);
    $query = $this->db->get('Chats');
     
    $results = array();
     
    foreach ($query->result() as $row)
    {
      $results[] = array($row->message,$row->time);
    }
     
    return array_reverse($results);
  }
 
  function create_table()
  {
    /* Load db_forge - used to create databases and tables */
    $this->load->dbforge();
     
    /* Specify the table schema */
    $fields = array(
                    'id' => array(
                                  'type' => 'INT',
                                  'constraint' => 5,
                                  'unsigned' => TRUE,
                                  'auto_increment' => TRUE
                              ),
                    'message' => array(
                                  'type' => 'TEXT'
                              ),
                    'time' => array(
                        'type' => 'INT'
                      )
              );
     
    /* Add the field before creating the table */
    $this->dbforge->add_field($fields);
     
     
    /* Specify the primary key to the 'id' field */
    $this->dbforge->add_key('id', TRUE);
     
     
    /* Create the table (if it doesn't already exist) */
    $this->dbforge->create_table('Chats', TRUE);
  }
}
Views 
chat-view.php
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
  <title> Chat Exmaples! </title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script>
    var time = 0;
   
    var updateTime = function (cb) {
      $.getJSON("index.php/chat/time", function (data) {
          cb(~~data);
      });
    };
     
    var sendChat = function (message, cb) {
      $.getJSON("index.php/chat/insert_chat?message=" + message, function (data){
        cb();
      });
    }
     
    var addDataToReceived = function (arrayOfData) {
      arrayOfData.forEach(function (data) {
        $("#received").val($("#received").val() + "\n" + data[0]);
      });
    }
     
    var getNewChats = function () {
      $.getJSON("index.php/chat/get_chats?time=" + time, function (data){
        addDataToReceived(data);
        // reset scroll height
        setTimeout(function(){
           $('#received').scrollTop($('#received')[0].scrollHeight);
        }, 0);
        time = data[data.length-1][1];
      });     
    }
   
    // using JQUERY's ready method to know when all dom elements are rendered
    $( document ).ready ( function () {
      // set an on click on the button
      $("form").submit(function (evt) {
        evt.preventDefault();
        var data = $("#text").val();
        $("#text").val('');
        // get the time if clicked via a ajax get queury
        sendChat(data, function (){
          alert("dane");
        });
      });
      setInterval(function (){
        getNewChats(0);
      },1500);
    });
     
  </script>
</head>
<body>
  <h1> Chat Example on Codeigniter </h1>
   
  <textarea id="received" rows="10" cols="50">
  </textarea>
  <form>
    <input id="text" type="text" name="user">
    <input type="submit" value="Send">
  </form>
</body>
</html>
Posted by ednalan at 5:47 PM . Under .

Related Post