<\/p>\n There are essentially three different types of online chat:<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n IRC and instant messaging usually offer other features such as chat logs or files transfers as well.<\/p>\n <\/p>\n To get started, we recommend that you first download the latest version of the CodeIgniter framework from the website (http:\/\/www.codeigniter.com<\/a>). This is currently version 3.0.2.<\/p>\n 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\/.<\/p>\n Once all of the requirements for the framework are met, you should then see the CodeIgniter welcome page.<\/p>\n In the autoloader configuration, navigate to \/application\/config\/autoload.php<\/strong> and then add the URL Helper and the database library, as we will need these components later.<\/p>\n In the route configuration under \/application\/config\/routes.php,<\/strong> now change the default controller from \u201cwelcome<\/em>\u201d to \u201cchat<\/em>\u201d since later we want our chat application to be loaded by default.<\/p>\n <\/p>\n In the current state, the route configuration would simply return a 404 error because we have not yet defined a chat controller.<\/p>\n So we first need to create a new controller under \/application\/controllers<\/strong> with a new nameChat.php<\/strong> and should also note the following here:<\/p>\n This controller looks \u2012 and is \u2012 primitive. Its only purpose is to load the appropriate view. A separate API controller is used for the actual functionality.<\/p>\n 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.<\/p>\n 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.<\/p>\n Under \/application\/models<\/strong>, we will now create a new model called Chat_model.php <\/strong>and add the following items:<\/p>\n The method add_message()<\/strong> 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.<\/p>\n The method get_messages()<\/strong> lets us retrieve all messages written from a specific point in time. The method requires the respective UNIX timestamp for this.<\/p>\n <\/p>\n To make both of these methods available externally as well, we create a new controller Api.php<\/strong> under \/application\/controllers<\/strong> and add:<\/p>\n The previously created chat model is now loaded into the framework. In addition, _setOutput()<\/strong> 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).<\/p>\n Under \/application\/views<\/strong>, we create a new view chat.php<\/strong> (which we already linked in the chat controller).<\/p>\n Here, we build the basic HTML framework for our chat based on jQuery und Bootstrap.<\/p>\n In<\/span> the Javascript<\/span> section <\/span>there is a<\/span> check<\/span>, so that the<\/span> input field <\/span>for<\/span> chat messages<\/span> is<\/span> only<\/span> visible if<\/span> the user has entered<\/span> a nickname<\/span>.<\/span><\/span><\/p>\n For making this looking beautiful, we now create a chat.css<\/strong> with following content:<\/p>\n <\/p>\n In the next step<\/span> we define<\/span> here<\/span> additional<\/span> auxiliary functions<\/span> and<\/span> also<\/span> save<\/span> the GUID of the<\/span> chat<\/span> participant<\/span> in <\/span>a cookie<\/span>. For simplicity,<\/span> this identifier<\/span> is generated<\/span> locally<\/span> in the browser<\/span>. In<\/span> a production environment<\/span>, this could<\/span> for example<\/span> be<\/span> stored in a<\/span> user table<\/span> directly<\/span> in the database<\/span>.<\/span><\/span><\/p>\n <\/p>\n Now we define the actual functions in the form of closures for adding and displaying messages.<\/p>\n For the sake of simplicity, the HTML markup is assembled directly in append_chat_data()<\/strong>. The data itself is ideally passed to separate rendering functions, or a proper JavaScript template engine is used.<\/p>\n However, this would go well beyond the scope of this example, which is why we are using this basic solution<\/p>\n <\/p>\n Now we define the behavior of actual GUI.<\/p>\n 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()<\/strong>, this field is enabled again.<\/p>\n To ensure all messages are received nearly in real-time, the function update_chats()<\/strong> 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.<\/p>\n <\/p>\n The type of chat integration presented in this example generates numerous server requests and therefore a relatively high server load for the database.<\/p>\n 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.<\/p>\n This example is intended for learning purposes, but can still be implemented for smaller-scale websites that see less traffic.<\/p>\n <\/p>\n Note:<\/strong> This example requires basic knowledge of the CodeIgniter framework (see Quickstart to the CodeIgniter framework<\/a>) and uses uses certain open source code snippets from Bootswatch.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Everyone is familiar with it, or has at least seen it before \u2013 we’re talking about the online chat feature available on many websites like Facebook.<\/p>\n","protected":false},"author":15,"featured_media":515,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1135],"tags":[1985,1657,1819,1987,1989,1991,1329,1614,1570],"yoast_head":"\n![\"CodeIgniter](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2015\/10\/ci_chat-1024x302.png\")
<\/a><\/p>\nTHE UNDERLYING PRINCIPLE<\/h2>\n
\n
YOUR OWN CHAT MODULE WITH CODEIGNITER<\/h2>\n
![\"CodeIgniter](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2015\/01\/codeigniter_logo-300x70.png\"){kind=logo}
<\/a><\/p>\nBUILD THE FOUNDATION<\/h3>\n
$autoload['libraries'] = array('database');\r\n$autoload['helper'] = array('url');<\/pre>\nTHE APPLICATION ITSELF<\/h3>\n
$route['default_controller'] = 'chat';<\/pre>\n
The actual application<\/h3>\n
<?php\r\ndefined('BASEPATH') OR exit('No direct script access allowed');\r\n\r\nclass Chat extends CI_Controller {\r\n\r\n\r\n\tpublic function index()\r\n\t{\r\n\t\t$this->load->view('chat');\r\n\t}\r\n}\r\n<\/pre>\nCREATE TABLE IF NOT EXISTS `messages` (\r\n`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,\r\n`message` text NOT NULL,\r\n`nickname` varchar(50) NOT NULL,\r\n`guid` varchar(100) NOT NULL,\r\n`timestamp` int(11) NOT NULL\r\n);\r\n<\/pre>\n
<?php\r\ndefined('BASEPATH') OR exit('No direct script access allowed');\r\n\r\nclass Chat_model extends CI_Model { \r\n \r\n\tfunction add_message($message, $nickname, $guid)\r\n\t{\r\n\t\t$data = array(\r\n\t\t\t'message'\t=> (string) $message,\r\n\t\t\t'nickname'\t=> (string) $nickname,\r\n\t\t\t'guid'\t\t=> (string)\t$guid,\r\n\t\t\t'timestamp'\t=> time(),\r\n\t\t);\r\n\t\t \r\n\t\t$this->db->insert('messages', $data);\r\n\t}\r\n\r\n\tfunction get_messages($timestamp)\r\n\t{\r\n\t\t$this->db->where('timestamp >', $timestamp);\r\n\t\t$this->db->order_by('timestamp', 'DESC');\r\n\t\t$this->db->limit(10); \r\n\t\t$query = $this->db->get('messages');\r\n\t\t\r\n\t\treturn array_reverse($query->result_array());\r\n\t}\r\n\r\n}\r\n<\/pre>\n<?php\r\ndefined('BASEPATH') OR exit('No direct script access allowed');\r\n\r\nclass Api extends CI_Controller {\r\n\r\n\t\r\n\tpublic function __construct()\r\n\t{\r\n\t\tparent::__construct();\r\n\t\t\r\n\t\t$this->load->model('Chat_model');\r\n\t}\r\n\t\r\n\t\r\n\tpublic function send_message()\r\n\t{\r\n\t\t$message = $this->input->get('message', null);\r\n\t\t$nickname = $this->input->get('nickname', '');\r\n\t\t$guid = $this->input->get('guid', '');\r\n\t\t\r\n\t\t$this->Chat_model->add_message($message, $nickname, $guid);\r\n\t\t\r\n\t\t$this->_setOutput($message);\r\n\t}\r\n\t\r\n\t\r\n\tpublic function get_messages()\r\n\t{\r\n\t\t$timestamp = $this->input->get('timestamp', null);\r\n\t\t\r\n\t\t$messages = $this->Chat_model->get_messages($timestamp);\r\n\t\t\r\n\t\t$this->_setOutput($messages);\r\n\t}\r\n\t\r\n\t\r\n\tprivate function _setOutput($data)\r\n\t{\r\n\t\theader('Cache-Control: no-cache, must-revalidate');\r\n\t\theader('Expires: Mon, 26 Jul 1997 05:00:00 GMT');\r\n\t\theader('Content-type: application\/json');\r\n\t\t\r\n\t\techo json_encode($data);\r\n\t}\r\n}<\/pre>\nThe graphical user interface<\/h3>\n
<?php\r\ndefined('BASEPATH') OR exit('No direct script access allowed');\r\n?><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n\t<meta charset=\"utf-8\">\r\n\t<title>Chat-Example | CodeIgniter<\/title>\r\n\t\r\n\t<script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-2.1.4.min.js\"><\/script>\r\n\r\n\t\t\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\" \/>\r\n\t<script type=\"text\/javascript\" src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"><\/script>\r\n\t\r\n\t<!-- http:\/\/bootsnipp.com\/snippets\/4jXW -->\r\n\t<link rel=\"stylesheet\" href=\"<?php echo base_url(); ?>assets\/css\/chat.css\" \/>\r\n\t\r\n\t\r\n\t<script type=\"text\/javascript\">\t \r\n\t\t$( document ).ready ( function () {\r\n\t\t\t\r\n\t\t\t$('#nickname').keyup(function() {\r\n\t\t\t\tvar nickname = $(this).val();\r\n\t\t\t\t\r\n\t\t\t\tif(nickname == ''){\r\n\t\t\t\t\t$('#msg_block').hide();\r\n\t\t\t\t}else{\r\n\t\t\t\t\t$('#msg_block').show();\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\t\/\/ initial nickname check\r\n\t\t\t$('#nickname').trigger('keyup');\r\n\t\t});\r\n\t\t\r\n\t\t\r\n\t<\/script>\r\n\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n<div class=\"container\">\r\n <div class=\"row\">\r\n\t\t<div class=\"panel panel-primary\">\r\n\t\t\t<div class=\"panel-heading\">\r\n\t\t\t\t<span class=\"glyphicon glyphicon-comment\"><\/span> Chat\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"panel-body\">\r\n\t\t\t\t<ul class=\"chat\" id=\"received\">\r\n\t\t\t\t\t\r\n\t\t\t\t<\/ul>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"panel-footer\">\r\n\t\t\t\t<div class=\"clearfix\">\r\n\t\t\t\t\t<div class=\"col-md-3\">\r\n\t\t\t\t\t\t<div class=\"input-group\">\r\n\t\t\t\t\t\t\t<span class=\"input-group-addon\">\r\n\t\t\t\t\t\t\t\tNickname:\r\n\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<input id=\"nickname\" type=\"text\" class=\"form-control input-sm\" placeholder=\"Nickname...\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div class=\"col-md-9\" id=\"msg_block\">\r\n\t\t\t\t\t\t<div class=\"input-group\">\r\n\t\t\t\t\t\t\t<input id=\"message\" type=\"text\" class=\"form-control input-sm\" placeholder=\"Type your message here...\" \/>\r\n\t\t\t\t\t\t\t<span class=\"input-group-btn\">\r\n\t\t\t\t\t\t\t\t<button class=\"btn btn-warning btn-sm\" id=\"submit\">Send<\/button>\r\n\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<\/body>\r\n<\/html><\/pre>\n.chat\r\n{\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.chat li\r\n{\r\n margin-bottom: 10px;\r\n padding-bottom: 5px;\r\n border-bottom: 1px dotted #B3A9A9;\r\n}\r\n\r\n.chat li.left .chat-body\r\n{\r\n margin-left: 60px;\r\n}\r\n\r\n.chat li.right .chat-body\r\n{\r\n margin-right: 60px;\r\n}\r\n\r\n\r\n.chat li .chat-body p\r\n{\r\n margin: 0;\r\n color: #777777;\r\n}\r\n\r\n.panel .slidedown .glyphicon, .chat .glyphicon\r\n{\r\n margin-right: 5px;\r\n}\r\n\r\n.panel-body\r\n{\r\n overflow-y: scroll;\r\n height: 250px;\r\n}\r\n\r\n::-webkit-scrollbar-track\r\n{\r\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\r\n background-color: #F5F5F5;\r\n}\r\n\r\n::-webkit-scrollbar\r\n{\r\n width: 12px;\r\n background-color: #F5F5F5;\r\n}\r\n\r\n::-webkit-scrollbar-thumb\r\n{\r\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);\r\n background-color: #555;\r\n}<\/pre>\nvar request_timestamp = 0;\r\n\r\nvar setCookie = function(key, value) {\r\n\tvar expires = new Date();\r\n\texpires.setTime(expires.getTime() + (5 * 60 * 1000));\r\n\tdocument.cookie = key + '=' + value + ';expires=' + expires.toUTCString();\r\n}\r\n\r\nvar getCookie = function(key) {\r\n\tvar keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');\r\n\treturn keyValue ? keyValue[2] : null;\r\n}\r\n\r\nvar guid = function() {\r\n\tfunction s4() {\r\n\t\treturn Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);\r\n\t}\r\n\treturn s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();\r\n}\r\n\r\nif(getCookie('user_guid') == null || typeof(getCookie('user_guid')) == 'undefined'){\r\n\tvar user_guid = guid();\r\n\tsetCookie('user_guid', user_guid);\r\n}\r\n\r\n\r\n\/\/ https:\/\/gist.github.com\/kmaida\/6045266\r\nvar parseTimestamp = function(timestamp) {\r\n\tvar d = new Date( timestamp * 1000 ), \/\/ milliseconds\r\n\t\tyyyy = d.getFullYear(),\r\n\t\tmm = ('0' + (d.getMonth() + 1)).slice(-2),\t\/\/ Months are zero based. Add leading 0.\r\n\t\tdd = ('0' + d.getDate()).slice(-2),\t\t\t\/\/ Add leading 0.\r\n\t\thh = d.getHours(),\r\n\t\th = hh,\r\n\t\tmin = ('0' + d.getMinutes()).slice(-2),\t\t\/\/ Add leading 0.\r\n\t\tampm = 'AM',\r\n\t\ttimeString;\r\n\t\t\t\r\n\tif (hh > 12) {\r\n\t\th = hh - 12;\r\n\t\tampm = 'PM';\r\n\t} else if (hh === 12) {\r\n\t\th = 12;\r\n\t\tampm = 'PM';\r\n\t} else if (hh == 0) {\r\n\t\th = 12;\r\n\t}\r\n\r\n\ttimeString = yyyy + '-' + mm + '-' + dd + ', ' + h + ':' + min + ' ' + ampm;\r\n\t\t\r\n\treturn timeString;\r\n}<\/pre>\nvar sendChat = function (message, callback) {\r\n\t$.getJSON('<?php echo base_url(); ?>api\/send_message?message=' + message + '&nickname=' + $('#nickname').val() + '&guid=' + getCookie('user_guid'), function (data){\r\n\t\tcallback();\r\n\t});\r\n}\r\n\r\nvar append_chat_data = function (chat_data) {\r\n\tchat_data.forEach(function (data) {\r\n\t\tvar is_me = data.guid == getCookie('user_guid');\r\n\t\t\r\n\t\tif(is_me){\r\n\t\t\tvar html = '<li class=\"right clearfix\">';\r\n\t\t\thtml += '\t<span class=\"chat-img pull-right\">';\r\n\t\t\thtml += '\t\t<img src=\"http:\/\/placehold.it\/50\/FA6F57\/fff&text=' + data.nickname.slice(0,2) + '\" alt=\"User Avatar\" class=\"img-circle\" \/>';\r\n\t\t\thtml += '\t<\/span>';\r\n\t\t\thtml += '\t<div class=\"chat-body clearfix\">';\r\n\t\t\thtml += '\t\t<div class=\"header\">';\r\n\t\t\thtml += '\t\t\t<small class=\"text-muted\"><span class=\"glyphicon glyphicon-time\"><\/span>' + parseTimestamp(data.timestamp) + '<\/small>';\r\n\t\t\thtml += '\t\t\t<strong class=\"pull-right primary-font\">' + data.nickname + '<\/strong>';\r\n\t\t\thtml += '\t\t<\/div>';\r\n\t\t\thtml += '\t\t<p>' + data.message + '<\/p>';\r\n\t\t\thtml += '\t<\/div>';\r\n\t\t\thtml += '<\/li>';\r\n\t\t}else{\r\n\t\t \r\n\t\t\tvar html = '<li class=\"left clearfix\">';\r\n\t\t\thtml += '\t<span class=\"chat-img pull-left\">';\r\n\t\t\thtml += '\t\t<img src=\"http:\/\/placehold.it\/50\/55C1E7\/fff&text=' + data.nickname.slice(0,2) + '\" alt=\"User Avatar\" class=\"img-circle\" \/>';\r\n\t\t\thtml += '\t<\/span>';\r\n\t\t\thtml += '\t<div class=\"chat-body clearfix\">';\r\n\t\t\thtml += '\t\t<div class=\"header\">';\r\n\t\t\thtml += '\t\t\t<strong class=\"primary-font\">' + data.nickname + '<\/strong>';\r\n\t\t\thtml += '\t\t\t<small class=\"pull-right text-muted\"><span class=\"glyphicon glyphicon-time\"><\/span>' + parseTimestamp(data.timestamp) + '<\/small>';\r\n\t\t\t\r\n\t\t\thtml += '\t\t<\/div>';\r\n\t\t\thtml += '\t\t<p>' + data.message + '<\/p>';\r\n\t\t\thtml += '\t<\/div>';\r\n\t\t\thtml += '<\/li>';\r\n\t\t}\r\n\t\t$(\"#received\").html( $(\"#received\").html() + html);\r\n\t});\r\n \r\n\t$('#received').animate({ scrollTop: $('#received').height()}, 1000);\r\n}\r\n\r\nvar update_chats = function () {\r\n\tif(typeof(request_timestamp) == 'undefined' || request_timestamp == 0){\r\n\t\tvar offset = 60*15; \/\/ 15min\r\n\t\trequest_timestamp = parseInt( Date.now() \/ 1000 - offset );\r\n\t}\r\n\t$.getJSON('<?php echo base_url(); ?>api\/get_messages?timestamp=' + request_timestamp, function (data){\r\n\t\tappend_chat_data(data);\t\r\n\r\n\t\tvar newIndex = data.length-1;\r\n\t\tif(typeof(data[newIndex]) != 'undefined'){\r\n\t\t\trequest_timestamp = data[newIndex].timestamp;\r\n\t\t}\r\n\t}); \r\n}<\/pre>\n$('#submit').click(function (e) {\r\n\te.preventDefault();\r\n\t\r\n\tvar $field = $('#message');\r\n\tvar data = $field.val();\r\n\r\n\t$field.addClass('disabled').attr('disabled', 'disabled');\r\n\tsendChat(data, function (){\r\n\t\t$field.val('').removeClass('disabled').removeAttr('disabled');\r\n\t});\r\n});\r\n\r\n$('#message').keyup(function (e) {\r\n\tif (e.which == 13) {\r\n\t\t$('#submit').trigger('click');\r\n\t}\r\n});\r\n\r\nsetInterval(function (){\r\n\tupdate_chats();\r\n}, 1500);<\/pre>\nConclusion<\/h2>\n