<\/p>\n Grunds\u00e4tzlich unterscheidet man beim Online-Chat zwischen drei Formen:<\/p>\n Beim IRC kommt die klassische Form der Client-Server-Architektur ins Spiel. Hierbei werden spezielle Chat-Server ben\u00f6tigt, welche untereinander vernetzt sind. Mit einer geeigneten Client-Software, welche sich entweder direkt auf den PCs der jeweiligen Chatteilnehmer befindet bzw. \u00fcber deren Browser ausgef\u00fchrt wird, k\u00f6nnen untereinander Nachrichten ausgetauscht werden.<\/p>\n Bei einfachen Webchat, wie er beispielsweise von Live-Support-Systemen verwendet wird, ist keine zus\u00e4tzliche Software notwendig. Meistens ist die Kommunikation auch auf die jeweilige Website beschr\u00e4nkt.<\/p>\n Ganz anders sieht es allerdings beim Instant Messaging aus. Hier findet die Kommunikation in der Regel \u00fcber keinen \u00f6ffentlichen Chatraum statt, sondern ausschlie\u00dflich zwischen den jeweiligen Chatteilnehmern, welche sich \u00fcber eine entsprechende Software identifizieren.<\/p>\n IRC und Instant Messaging bieten meistens noch weitere Funktionen, wie beispielsweise Gespr\u00e4chsprotokolle oder die \u00dcbertragung von Dateien.<\/p>\n <\/p>\n <\/p>\n Um zu beginnen, laden wir uns zuerst die aktuellste Version des CodeIgniter-Frameworks von dessen Website (http:\/\/www.codeigniter.com<\/a>) herunter. Dies ist in diesem Fall Version 3.0.2.<\/p>\n Nun kopieren wir alle Dateien am besten in einen Unterordner \u201eci-chat\u201c auf den Webserver (z.B. XAMPP, LAMP, etc.) und rufen dessen Rootverzeichnis im Browser auf, z.B. http:\/\/localhost\/ci-chat\/.<\/p>\n Wenn alle Anforderungen des Frameworks erf\u00fcllt sind, sollte hier nun die Willkommensseite von CodeIgniter sichtbar sein.<\/p>\n In der Autoloader-Konfiguration unter \/application\/config\/autoload.php<\/strong> f\u00fcgen wir als n\u00e4chstes den URL-Helper sowie die Datenbank-Library hinzu, da wir diese Komponenten sp\u00e4ter brauchen werden.<\/p>\n In der Routenkonfiguration unter \/application\/config\/routes.php<\/strong> \u00e4ndern wir als n\u00e4chstes den Standard-Controller von \u201ewelcome<\/em>\u201c auf \u201echat<\/em>\u201c, da wir sp\u00e4ter m\u00f6chten, dass standardm\u00e4\u00dfig unsere Chat-Applikation aufgerufen wird.<\/p>\n <\/p>\n Momentan w\u00fcrde die Routenkonfiguration nur einen 404-Fehler verursachen, da wir bislang noch keinen Chat-Controller definiert haben.<\/p>\n Aus diesem Grund erstellen wir unter \/application\/controllers<\/strong> einen neuen namens Chat.php<\/strong> und schreiben hier folgendes hinein:<\/p>\n Dieser Controller wirkt nicht nur primitiv, er ist es auch. Seine einzige Aufgabe liegt darin, die entsprechende View zu laden. F\u00fcr die eigentliche Funktion kommt ein separater API-Controller ins Spiel.<\/p>\n Selbstverst\u00e4ndlich k\u00f6nnte man die gesamte Logik auch in den zuvor erstellten Controller unterbringen. Die Aufteilung in mehrere Controller macht vor allem bei gr\u00f6\u00dferen Projekten Sinn, da dies die Lesbarkeit und die damit in Verbindung stehende Wartbarkeit wesentlich erh\u00f6ht.<\/p>\n <\/p>\n Um die einzelnen Nachrichten zu speichern, um diese sp\u00e4ter auch den anderen Chatteilnehmern auszuliefern, brauchen wir eine Datenbank sowie ein geeignetes Model.<\/p>\n <\/p>\n Nun erstellen wir unter \/application\/models<\/strong> ein neues Model namens Chat_model.php<\/strong> und f\u00fcgen folgenden Inhalt ein:<\/p>\n Die Methode add_message()<\/strong> erm\u00f6glicht es uns, neue Nachrichten hinzuzuf\u00fcgen und erwartet als Parameter die eigentliche Nachricht und den Nickname des Chatteilnehmers, von welchem die Nachricht stammt. Um Konflikte zu vermeiden, wenn mehrere Chatteilnehmer den gleichen Nickname verwenden sollten, werden wir zus\u00e4tzlich eine GUID mitspeichern. Dies ist eine eindeutige Kennung, welche sp\u00e4ter nur von der Applikation selbst ausgewertet werden wird.<\/p>\n Mittels get_messages()<\/strong> bekommen wir alle Nachrichten, welche von einem bestimmten Zeitpunkt ausgehend geschrieben wurden. Diese Methode erwartet hierf\u00fcr den jeweiligen UNIX-Zeitstempel.<\/p>\n <\/p>\n Um nun diese beiden Methoden nach au\u00dfen hin verf\u00fcgbar zu machen, legen wir unter \/application\/controllers<\/strong> einen neuen Controller Api.php<\/strong> an und schreiben hier folgendes hinein:<\/p>\n Im Konstruktur wird nun das zuvor erstellte Chat-Model geladen. Des Weiteren wird via _setOutput()<\/strong> ein zentraler Output-Handler bereitgestellt, welchem wir einfach die notwendigen Daten \u00fcbergeben und diese dann entsprechend aufbereitet werden (in diesem Fall JSON).<\/p>\n <\/p>\n Unter \/application\/views<\/strong> erstellen wir eine neue View chat.php<\/strong> (welche wir zuvor im Chat-Controller bereits verlinkt haben).<\/p>\n In dieser bauen wir uns das HTML-Grundger\u00fcst unseres Chats auf. Basierend auf jQuery und Bootstrap.<\/p>\n Im Javascript-Block befindet sich ein Check, sodass das Eingabefeld f\u00fcr die Chatnachrichten erst dann sichtbar ist, wenn der Benutzer einen Nickname eingegeben hat.<\/p>\n Damit das ganze nun auch grafisch entsprechend gut aussieht, legen wir noch eine chat.css<\/strong> mit folgendem Inhalt an:<\/p>\n <\/p>\n Im n\u00e4chsten Schritt definieren wir hier noch zus\u00e4tzliche Hilfsfunktionen und speichern hier auch die GUID des Chatteilnehmers in Form eines Cookies. Der Einfachheit halber wird diese Kennung nur lokal im Browser generiert. In einer produktiven Umgebung k\u00f6nnte diese beispielweise in einer User-Tabelle direkt in der Datenbank gespeichert werden.<\/p>\n <\/p>\n Nun definieren wir die eigentlichen Funktionen in Form von Closures f\u00fcr das Hinzuf\u00fcgen von Nachrichten und dem Auslesen dieser.<\/p>\n Der Einfachheit halber wird in append_chat_data()<\/strong> das HTML-Markup direkt zusammengebaut. Die Daten selbst sollten am besten entweder an eigene Render-Funktionen \u00fcbergeben werden, oder gleich eine richtige Javascript-Template-Engine verwendet werden.<\/p>\n Dies w\u00fcrde jedoch den Rahmen f\u00fcr dieses Beispiel hier bei weitem sprengen, daher diese primitive L\u00f6sung.<\/p>\n <\/p>\n Nun definieren wir das Verhalten der GUI selbst.<\/p>\n Dieser Code erm\u00f6glicht es, die eingegebenen Nachrichten mit einem Klick auf die Enter-Taste direkt abzusenden, und sperrt das Feld so lange, bis die Nachricht vom Server verarbeitet wurde. Im Callback von sendChat()<\/strong> wird dieses Feld danach wieder freigegeben.<\/p>\n Um stets alle Nachrichten nahezu in Echtzeit zu erhalten, wird die Funktion update_chats()<\/strong> im Intervall von 1,5 Sekunden aufgerufen. Diese pr\u00fcft anhand des jeweiligen Zeitstempels, ob es neue Nachrichten gibt oder nicht und f\u00fcgt diese dann dem Chatfenster hinzu.<\/p>\n <\/p>\n Die in diesem Beispiel gezeigte Form einer Chat-Integration verursacht durch die zahlreichen Abfragen eine relativ hohe Last auf dem Datenbankserver.<\/p>\n F\u00fcr gr\u00f6\u00dfere Websites w\u00e4re es jedoch ratsam auf eine entsprechende Infrastruktur zu setzen, d.h. ein geeignetes Chat-Protokoll (z.B. XMPP) und danach eine geeignete Integrationsm\u00f6glichkeit auszuw\u00e4hlen.<\/p>\n Dieses Beispiel sollte mehr als Lernbeispiel dienen, kann aber auf kleineren weniger stark frequentierten Websites auch produktiv genutzt werden.<\/p>\n <\/p>\n Hinweis:<\/strong> Dieses Beispiel setzt ein Grundwissen im Umgang mit dem CodeIgniter-Framework voraus (siehe Schnelleinstieg ins CodeIgniter-Framework<\/a>) und nutzt teilweise quelloffene Codeschnipsel von Bootswatch.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Jeder kennt ihn oder hat ihn zumindest schon mal gesehen \u2013 die Rede ist vom Online-Chat, wie er auf vielen Websites, wie beispielsweise Facebook vorkommt.<\/p>\n","protected":false},"author":15,"featured_media":515,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[205,78,73,207,208,206,14,5,77],"yoast_head":"\n![\"CodeIgniter](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2015\/10\/ci_chat-1024x302.png\")
<\/a><\/p>\nDas Prinzip dahinter<\/h2>\n
\n
Der eigene Chat mit CodeIgniter<\/h2>\n
![\"CodeIgniter](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2015\/01\/codeigniter_logo-300x70.png\"){kind=logo}
<\/a><\/p>\nGrundstruktur vorbereiten<\/h3>\n
$autoload['libraries'] = array('database');\r\n$autoload['helper'] = array('url');<\/pre>\n$route['default_controller'] = 'chat';<\/pre>\n
Die eigentliche Applikation<\/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\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>\nDie grafische Oberfl\u00e4che<\/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>\nFazit<\/h2>\n