Ajax Chat Plugin (using jQuery)
This article is also available in the following languages:
This is an update to my old Ajax Chat Plugin (http://bakery.cakephp.org/articles/view/ajax-chat-plugin). This version using jQuery and works with CakePHP RC3
Full source is available at GitHub: http://github.com/mcurry/cakephp/tree/master/plugins/chat
A demo is running at http://sandbox2.pseudocoder.com/demo/chat
1) Download jQuery and put it in /app/webroot/js/
2) Put the chat plugin into app/plugins/chat. The plugin is called "chat", so make sure there is no conflict with any other controllers or plugins.
3) Run this sql to create the chats table.
4) Include the plugin helper in your controller:
Or just in a particular action:
5) Include jQuery in your view if you don't already include it in your layout.
6) Include the chat js and css in your view.
7) Then just add the chat to your view. You can have multiple chats on your site by changing the chat key - "chat1" in this example.
A demo is running at http://sandbox2.pseudocoder.com/demo/chat
1) Download jQuery and put it in /app/webroot/js/
2) Put the chat plugin into app/plugins/chat. The plugin is called "chat", so make sure there is no conflict with any other controllers or plugins.
3) Run this sql to create the chats table.
CREATE TABLE `chats` (
`id` int(10) unsigned NOT NULL auto_increment,
`key` varchar(45) NOT NULL default '',
`name` varchar(20) NOT NULL default '',
`message` text NOT NULL,
`ip_address` varchar(15) NOT NULL default '',
`created` datetime default NULL,
PRIMARY KEY (`id`),
KEY `KEY_IDX` (`key`)
);
4) Include the plugin helper in your controller:
Controller Class:
<?php
var $helpers = array('chat.ajaxChat');
?>
Or just in a particular action:
Controller Class:
<?php
$this->helpers[] = 'chat.ajaxChat';
?>
5) Include jQuery in your view if you don't already include it in your layout.
View Template:
echo $javascript->link('jquery', false);
6) Include the chat js and css in your view.
View Template:
$javascript->link(array('jquery/jquery', '/chat/js/chat.js'), false);
$html->css('/chat/css/chat.css', null, null, false);
7) Then just add the chat to your view. You can have multiple chats on your site by changing the chat key - "chat1" in this example.
View Template:
echo $ajaxChat->generate('chat1');
Failed to load resource: the server responded with a status of 404 (Not Found) /chat/chats/update/chat1?_=1291739667889
The URL is Bad Formed, but i dont know where is the line(s) than i need to edit.
layout includes
echo $this->Html->script('jquery'); // Include jquery library
echo $this->Html->script('/chat/js/chat.js'); // Include jquery library
echo $this->Html->css('/chat/css/chat.css');
echo $scripts_for_layout;
renamed vendors folder to webroot
what else do i need to change to update it to 1.3? i see that it uses javascript helper the plugin itself needs updated.
The chat is looking for UpdateController. Would love some tips. Thanks
instead of trying to implement a 3rd-party-chat i would also be interesting in developing a full cake-based chat extending matts version here.
anybody who wants to join in drop me a line.
we could post the upgraded chat in the bakery again afterwards
i love this chat plugin.
anyone can help me how to make chat win like usual messenger chat win.
every lastest msg will going to below not up like now. And automaticly scrolled down.
regards,
It gives a 'A script on this page may be busy, or it may have stopped responding.'-error and a reference to jquery line 1054.
I tried with a new version of jquery, with an old one and even with a fresh install of chat-plugin but to no avail.
Anybody else having similar problems? :)
Thank you
You could also remove the false param and echo the results and they will be rendered inline.
Not sure about the url thing. Maybe it'll be fixed once you get it loaded correctly?
-Matt
Thanks for the swift reply - removing the false param did it for the includes, however there is still a problem.
When I submit from the form, it populates the database fine, however I'm getting a 404 'get' error in firebug as follows:
get http://127.0.0.1/chat/update/chat1 404 jquery.js (line 2806)
obviously this page doesn't exist, chat1 is the name of the instance of chat(as above) and the page is posted from:
http://127.0.0.1/blog/posts/chat
incidentally jquery version is 1.2.6
Thanks Kieron.
//
// plugin defaults
//
$.fn.chat.defaults = {
update: '/swappler/chat/update',
interval: 5000
};
changing 'update' to the correct URl...
Then it worked for me :-)
Like the demo but have problem using myself.
Am using 1.2.0.7692 RC3, included jQuery (as it is being used already),
and have followed other instructions to the letter.
$javascript->link(array('jquery/jquery', '/chat/js/chat.js'), false);
$html->css('/chat/css/chat.css', null, null, false);
included in my view results in neither being included in source. Chat doesn't appear just 'Loading...' and finally the post is directed as follows
action="/blog/chat/post"
when the originating view + url is /blog/post/chat.
thanks,
The js and css files are in the /vendors/js and /vendors/css. Cake handles returning these files from the plugins folder, so you don't have to move them to webroot.
Comments are closed for articles over a year old