pusher-community/pusher-realtime-chat-widget

Example Realtime Chat Widget that can be added to any web page or app.

Realtime Chat Widget using Pusher

This sample shows how to create a Realtime Chat Widget with a PHP, Ruby or Node.js backend.

Demo

Here is a live version of the chat widget in action.

Tutorial

We've put together a tutorial on how to get up and running with the widget.

src

/nodejs

The server code required to run the example using Node.js.

The src/chat.html file will need to be updated so that the PusherChatWidget talks to the Node app. This means providing a chatEndPoint setting to point to /chat as follows:

var pusher = new Pusher("CHANGE_KEY")
var chatWidget = new PusherChatWidget(pusher, {
  appendTo: "#pusher_chat_widget",
  chatEndPoint: "/chat"
});

You can then get started by:

cd src/nodejs
npm install
node app.js

And navigating to http://localhost:4567 to see the side-by-side example or http://localhost:4567/chat.html to see the standalone example.

/php

The server code required to use the widget with a PHP back-end. Update the src/chat.html file to your PUSHER_APP_KEY:

var pusher = new Pusher("CHANGE_KEY")

Then, set up the PHP back-end:

cd src/php
composer install
cd ..
PHP -s localhost:8080

And navigating to http://localhost:8080/ to see the side-by-side example or http://localhost:8080/chat.html to see the standalone example.

/ruby-sinatra

The server code required to run the example using Sinatra.

The src/chat.html file will need to be updated so that the PusherChatWidget talks to the sinatra app. This means providing a chatEndPoint setting to point to /chat as follows:

var pusher = new Pusher("CHANGE_KEY")
var chatWidget = new PusherChatWidget(pusher, {
  appendTo: "#pusher_chat_widget",
  chatEndPoint: "/chat"
});

You can then get started by:

cd src/ruby-sinatra
bundle install
bundle exec ruby -rubygems chat.rb

And navigating to http://localhost:4567/ to see the side-by-side example or http://localhost:4567/chat.html to see the standalone example.

pusher-realtime-chat-widget's Issues

Bug remove last message in list

If there are more than 50 messages in the conversation, the most recent message is deleted.

Pusher's client is not able to receive data after triggering (''chat_message") when using Node.js as server !

https://github.com/pusher/pusher-realtime-chat-widget/blob/gh-pages/src/nodejs/app.js#L69

Widget display adjustment

I want to keep the number of messages displayed remain fixed at 3. When there are more than 3 messages, it will autoscroll.

How do I control that?

how to customize widget (add more field.)

The default widget with username, email and text box. so they are not enough for my application now. what is the best way to add more field in widget without customize the code PusherChatWidget.js.

Issue with Tutorial Code

I followed this http://pusher.com/tutorials/realtime_chat_widget

Receiving an error in PusherChatWidget.js at line 136"
var imageInfo = activity.actor.image;

Error is:
Uncaught TypeError: Cannot read property 'actor' of undefined

I can see in the log eveything is registering well. Just get that message when I attempt to send a message.

Timestamp: "NaN undefined"

Hi, I'm wondering what might cause the timestamp on my chats to display as "NaN undefined". Otherwise the chat example is working great.

I'm deploying this on Ruby 1.9.3p194, Rails 3.2.5, and Unicorn.

This issue only seems to be happening locally and not on production (Heroku), so this is not a major issue.

./Vendor/autoload.php doesn't exist in repo, i couldn't use php composer for download

Add an example for "Storing a history of messages"

Would be cool to have an example for this. Maybe MySQL with INSERT DELAYED.

PusherChatWidget.prototype._chatMessageReceived isn't firing

PusherChatWidget.prototype._chatMessageReceived isn't firing even though it is attached to PusherChatWidget in the DOM.

PusherChatWidget.prototype._chatMessageReceived = function(data) {
  console.log("message received");
  (the rest of the code goes here...)
}

Everything else seems to work. I can save the message to my database and receive a response from Pusher.

What does chatMessageReceived depend on in the main Pusher JS that I can verify is correct in my Rails 4 setup?

Any other suggestions for what I should look into to get it working? Thanks!

Work under Proxy

I had try this code in my home. it works well but it can't work in my office under proxy server. I had done with proxy configuration but it can't also

var Pusher = require("pusher");
var pusher = new Pusher({
appId: config.app_id,
key: config.key,
secret: config.secret,
proxy: 'http://username:password@proxyaddress:port#',
timeout: TIMEOUT,
keepAlive: KEEP_ALIVE
});

not able to send messages

Hello,
I am trying to use Pusher Chat widget in my website http://bluescientists.com/chat.html . However it is not validating the messages. The messages are not getting populated in the chat area after sending. Kindly help me. I am using php

unable to receive message

i am using PHP library and i have complete all the steps, and also double check my APP KEY,ID and Secret: but when i try this:

http://localhost/pusher-realtime-chat/src/

Error:
Pusher : Error : {"type":"WebSocketError","error":{"type":"PusherError","data":{"code":4001,"message":"Could not find app by key API_KEY. Perhaps you're connecting to the wrong cluster."}}}

php server side pusher not working

pusher chat is not able to send and receive a message, am struck with this issue, also getting channel info I don't know what the problem using even the getting started code of both client and server but the server is the issue, client side is working fine

change channel name does not work as expected.

Hi.
Trying this code and works good, but if I try this: (add channel name)

        var chatWidget = new PusherChatWidget(pusher, {
          appendTo: "#pusher_chat_widget",
          channelName: "foo-bar-123-test-channel"
        });

textarea with messages always says
No chat messages available
Thanks for your help.

Sample code has typo/missing ' at end of width

On https://pusher.com/tutorials/realtime_chat_widget
section entitled "Personalise by integrating with your existing user accounts"

$options = array(
'displayName' => 'Dave the PHP Guru',
'image' => array(
'url' => 'path_to_avatar_for_dave.png',
'height => '48',
'width => '48'
)
);

b

starting "node app.js" giving error

starting the "node app.js" is giving the following error. Maybe package.json is broken. I did call "npm install"

module.js:340
throw err;
^
Error: Cannot find module './config'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/Users/.../GitHub/pusher-realtime-chat-widget/src/nodejs/app.js:1:76)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)

Error in timeToDescription for dates over 24hrs old

PusherChatWidget.timeToDescription on line 249 has a bug on line 251:

time = Date.parse(time);

This should actually be:

time = new Date(Date.parse(time));

Or it will fail if execution reaches line 271:

desc = time.getDay()...

because Date.parse(time) returns a number which has no .getDay() method. My code returns a Date instance.

Text Change to README

This is in the Ruby part of the README:

var pusher = new Pusher('49e26cb8e9dde3dfc009')

Perhaps it should probably change to the following to match the instructions at http://pusher.com/tutorials/realtime_chat_widget

var pusher = new Pusher('YOUR_APP_KEY')

Or some other way to let beginners know that they should replace the key with their own.

pusher trigger not working in Development Server but works fine in local

Hi,

Please help me to fix this issue.

i got pusher chat real time application from the tutorial http://code.tutsplus.com/tutorials/getting-real-time-with-pusher--net-22106.

Above tutorial works fine in my local Wamp server. i have moved same code to host server in that trigger new_message event not working.

$pusher->trigger(
'presence-nettuts', //the channel
'new_message', //the event
array('message' => $message) //the data to send
);

above line returns 1 in local and returns none/empty in host server.

Please guide me if need any host server configuration needed?

sorry for my bad English.

What is the license of this source code?

There is no copyright or license information in this repo. What license is the code available under? Thanks.

pusher pusher chat is not able to send and receive message, am struck with this issue

Add more comments

This code isn't really very complex but still it would be very good if each function had some explanation of what it does, how and etc. Just to make it easier to understand everything.

Demo does not work

The link to the demo doesn't work.

Chat textarea not properly marked as readonly

on line 119 in PusherChatWidget.js, the code reads:
this._messageInputEl.attr('readonly');

This only fetches the value of the 'readonly' attribute. In order to set that readonly attribute that will later be removed on line 151, you need to use the following:

this._messageInputEl.attr('readonly', true);