Simple Chat window: the starter point to build your own chat, in seconds

Features

• Very simple api chat window
• Multiple chat in the same view
• auto scroll on new message
• load more button
• optional beep on new message

Demo

Working demo

http://simpleschat.herokuapp.com/

Demo source

https://github.com/cesarve77/demo-simple-chat

Installing

$ meteor add cesarve:simple-chat

Usage

Just paste the template

{{>SimpleChatWindow roomId=<roomId> username=<username> name=<name> avatar=<avatar> limit=<limit> showViewed=<showViewed>  showJoined=<showJoined> publishChats=<publishChats> allow=<allow> custom=<custom>}}

Where

• <roomId>: required, plain string or function return a unique id for each room
• <username>: required, plain string or function return a string with unique user id or user name or any unique identifier
• <name>: optional, plain string or function return a string with display name [default: the username value]
• <avatar>: optional, plain string or function return a string avatar image source
• <limit>: optional number for limiting the last n messages for subscription, [default: 50]
• <beep>: optional boolean emit sound on new message [default: false]
• <showViewed>: optional boolean for showing or not when the messages are viewed (like WhatsApp) [default: false (this feature can use a lot of server resource)]
• <showReceived>: optional boolean for showing or not when the messages are received (like whatsapp) [default: false (this feature can use a lot of server resource)]
• <showJoined>: optional boolean for showing message when some user join to a room [default: false]
• <publishChats>: optional function return true for allow publish message, or false to deny this function receive as arguments (roomId, limit) and context is publish context [default: return true]
• <allow>: optional function return true for allow insert new message or false to deny, this function receive as arguments (message, roomId, username, avatar, name) and context is methods context [default: return true]
• <custom>: optional any custom value
• <loadMore>: text for load more button [default: 'Load More']
• <placeholder>: text for input placeholder [default: 'Type message...']
• <button>: text for button submit [default: 'Send']
• <join>: text for message Join [default: 'joined the']
• <left>: text for message left [default: 'left']
• <room>: text for message Room [default: 'room']
• <height>: css height for the message Room [default: '300px']
• <inpuTemplate>: a custom template for the input [default: 'SimpleChatInput']
• <loadMoreTemplate>: a custom template for 'Load More' section [default: 'LoadMore']

Note: this values can be a literal a helper or template data

Example:

{{>SimpleChatWindow roomId="free room" username=this.username limit=limit}}
    // roomIn is a literal
    // username is data template
    // limit is a helper

Configure Globally

1//somewhere in both (client and  server) 
2import {SimpleChat} from 'meteor/cesarve:simple-chat/config'
3
4SimpleChat.configure ({
5    texts:{
6        loadMore: 'Load More',
7        placeholder: 'Type message ...',
8        button: 'send',
9        join: 'joined the',
10        left: 'left',
11        room: 'room at'
12
13    },
14    limit: 5,
15    beep: true, 
16    showViewed: true,
17    showReceived: true,
18    showJoined: true,
19    publishChats: function(roomId, limi){ //server
20       //here the context is the same for a Publications, that mean you have access to this.userId who are asking for subscribe.
21       // for example
22       return isLoggedAndHasAccessToSeeMessage(this.userId)
23    },
24    allow: function(message, roomId, username, avatar, name){
25       //here the context is the same for a Methods, thats mean you hace access to this.userId also
26       // for example
27       return isLoggedAndHasAccessSendMessages(this.userId)
28        return true
29    },
30    onNewMessage:function(msg){  //both
31    },
32    onReceiveMessage:function(id, message, room){ //server
33        
34    },
35    onJoin:function(roomId, username, name,date){  //server
36    },
37    onLeft:function(roomId, username, name,date) { //server
38    },
39    height: '300px', // Configure the height of the chat
40    inputTemplate: 'SimpleChatInput', // In case you want to overwrite the template
41    loadMoreTemplate: 'LoadMore', // In case you want to overwrite the template
42})
43
44})

These options can be overwrite individually on:

{{>SimpleChatWindow roomId=<roomId> username=<username> avatar=<avatar> limit=<limit> showViewed=true  showJoined= true publishChats=publishChats allow=allow}}

Styling

Chat html was taken from https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html with direct chat widget.

Icons: http://simpleschat.herokuapp.com/icons.html

Specials

To Jetbrains.com for give us a free licences of their amazing softwares

Contributing

1. Please help me with my english
2. Open an issue
3. Pull request are very welcome:
   1. Fork the repo
   2. Make changes
   3. Commit
   4. make a pull request