Skip to content

Instantly share code, notes, and snippets.

@khalifah86
Forked from arifsetiawan/gist:10014113
Created April 7, 2014 04:16
Show Gist options
  • Save khalifah86/10014756 to your computer and use it in GitHub Desktop.
Save khalifah86/10014756 to your computer and use it in GitHub Desktop.

Firebase for chat

To create a chat, necessary firebase components :

User

User url location is used to monitor online-offline status of users

var userListRef = new Firebase('https://testsatu.firebaseio.com/users');

var userOfflineListRef = new Firebase('https://testsatu.firebaseio.com/users-offline');

Online

When user online, push into the userListRef

  {
    id: user-id,
    ts: 1396838766,
    name: user-name,
	status: 'online'
  }

ts is current timestamp in epoch format.

Idle

when user is idle (there is no activity in chat after 5 minutes, can be detected by timing the last time user tap, click or type something in screen), set current user ref into

  {
    id: user-id,
    ts: 1396838766,
    name: user-name,
	status: 'idle',
	changes: [
		{
			ts: 1396838766,
			status: 'idle',
		}
	]
  }

keep ts data the same as previous
to store user online-idle-online-etc status, we will add new field changes containing array to status changes with timestamp data.

If user back online, update again status in user ref, and add new item in changes array

Offline

When user offline or disconnected or app closed, Add offline status to changes, remove reference from userListRef and push the data to userOfflineListRef

  {
    id: user-id,
    ts: 1396838766,
    name: user-name,
	status: 'offline',
	changes: [
		{
			ts: 1396838766,
			status: 'idle',
		},
		{
			ts: 1396838766,
			status: 'online',
		},
		{
			ts: 1396838766,
			status: 'offline',
		}
	]
  }

Listing to Firebase event

Application only need to listen to userListRef events. userOfflineListRef is for archiving purposes.

  • When child_added event received, add user to online list.
  • When child_removed event received, remove user from online user and update his status to offline.
  • When child_update event received, update user status to idle or online.

Offline List Ref

As mentioned above, userOfflineListRef is used for archiving purpose.

var userOfflineListRef = new Firebase('https://testsatu.firebaseio.com/users-offline');

Because we store timestamp for each status changes, we can track how long users online and when.

Channel

Channel url is used to monitor who want to talk to specific user-id from another-user-id. Each user will have his/her own channel url. Data in channel is used to connect origin and destination in one chat ref

For example, lets say we have two users with id : John and Jane. John wants to chat to Jane.

John Point of view (Chat origin) - Chat creation

John's channel ref

var userChannelListRef = new Firebase('https://testsatu.firebaseio.com/channel/John');

When John click Jane chat button. Push to John channel

  {
    to: Jane,
    ts: 1396838766
  }

Then push to Jane channel

var targetChannelListRef = new Firebase('https://testsatu.firebaseio.com/channel/Jane');

following data

  {
    from: John,
    ts: 1396838766
  }

Then create new chat ref for John-Jane

var chatRef = new Firebase('https://testsatu.firebaseio.com/chat/John-Jane);

Jane Point of view (Chat destination) - Chat creation

Jane's channel ref

var userChannelListRef = new Firebase('https://testsatu.firebaseio.com/channel/Jane');
  • When child_added event received, create new chat ref for John-Jane using from field in the data.
var chatRef = new Firebase('https://testsatu.firebaseio.com/chat/John-Jane);

Now John and Jane is ready to chat.

Ending chat

When chat window is closed, remove current channel from destination channel ref. In above example, remove from Jane's channel ref, data which come from John.

Then push the data to Jane history channel ref for archiving

var chatRef = new Firebase('https://testsatu.firebaseio.com/channel/Jane-History);

And also remove from John channel ref, his intention to chat to Jane.

var chatRef = new Firebase('https://testsatu.firebaseio.com/channel/John-History);

We can use this to see how many users interested to talk to Jane for example. How many times John attempted to chat to others. and so on.

Note

Previously, we use channel as global ref for all users to listen. If global, then we need to filter users who are not intended to chat to. So now, user will have his/her own channel.

Chat

Now both John and Jane are using the same chat ref

var chatRef = new Firebase('https://testsatu.firebaseio.com/chat/John-Jane);

it is simple matter to push new chat and listen to the event when child_added

Chat data

Push following data for every chat

{
	from: 'John',
	ts: 1396838766,
	message: 'Hi, how are you?',
}

Chat history

Because the way firebase works, when user chat to other user and both had done some chatting before, previous chat will be shown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment