Skip to content

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

Notifications You must be signed in to change notification settings

pusher-community/pusher-realtime-chat-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published