Wallogit.com
2017 © Pedro Peláez
RealTime messages services streamlab.io
RealTime messages services streamlab.io, (*1)
run this command form composer
composer require 5dmatweb/streamlab:dev-master, (*2)
# add service provider open config/app add this line to provider array, (*3)
StreamLab\StreamLabProvider\StreamLabServiceProvider::class,
php artisan vendor:publish, (*4)
this command will add to files
1-stream-lab.php on config file
2-StreamLab.js on public/StreamLab/StreamLab-soket.js
3-test.blade.php on resources/views/test.blade.php
, (*5)
1-add account to https://streamlab.io
, (*6)
get app_id and key then add to config/stream-lab.php
, (*7)
2- go to this route
, (*8)
yourserver /sl
127.0.0.1:8000/sl
this will load test view in your first thing you must
create user go to this link in our web site Apps
choose your app then go to users tab add new user then add this id in your link
, (*9)
you can listen to channels by this way frist make new object form our lib StreamLabSocket
the add this objec to this class
, (*10)
var sls = new StreamLabSocket({
appId:"",
channelName:"",
channelSecret:"",
event:"*",
user_id:"",
user_secret:""
});
appId = the app you connect we get htis value from config file
channelName = the name of channel you want to listen
channelSecret = if the channel is secret you must add the secret code here
event = if you want to listn on specific evnet you can * for listen to all event or just add event name 'event'or
you can listen to more than one like this event1,event2,event3
user_id = you make user add user id here
user_secret = if you make user add user_seceret here
look to user section from here user section
, (*11)
example, (*12)
var sls = new StreamLabSocket({
appId:"{{ config('stream_lab.app_id') }}",
channelName:"test",
channelSecret:"",
event:"*",
user_id:1000,
user_secret:"asdasdlkkjkleke040e_sdsdklekj"
});
if you want to allow to any one to subscribe this channel just add the id and the channel name, (*13)
var sls = new StreamLabSocket({
appId:"{{ config('stream_lab.app_id') }}",
channelName:"test",
});
after this step to connect to soket now you can recive data from our api
now you must get this data with this funciton
, (*14)
var slh = new StreamLabHtml()
sls.socket.onmessage = function(res){
///res is data send from our api
///set this data to our class so you can use our helper function
slh.setData(res);
}
after you get data from our api now you must make new object from our html handel class this
class will allow you to make alot of things easy
, (*15)
you can get message now from our class StreamLabHtml by this function, (*16)
slh.getMessage()
you can get number of online on this channel from StreamLabHtml by this function, (*17)
slh.getOnline()
ther are two ways to show data to user frist one
by this funcitons from StreamLabHtml class
first way, (*18)
slh.setMessages(id); slh.setOnline(id);
this functions take the id of the tag that you will show the messages or the online number
second way, (*19)
slh.setOnlineAndMessages(onlineID , messagesID);
onlineID = the online number will show in this id
messagesID = the message will show in this id
, (*20)
you can make tamplate to show message, (*21)
slh.msgTemplate = ['li' , 'id' , 'calss']
li = the tag we will put the message in this tag each message will push inside this tag
id = id attribute
calss = class attribute
, (*22)
now you must know how you can push message to channel we make function to make it easy to you, (*23)
sls.sendMessage(url,data,callback);
url = the url will get all users do not worry we set this routes for you
data = it must be object contain _token , message property
callback = the function will call when you get users
, (*24)
example, (*25)
sls.sendMessage("{{ url('streamLab/post/message') }}",
{
_token:"{{ csrf_token()}}"
,message:slh.getVal('messageText'),
channelName:"public",
eventName:"SendMessages"
}
,function(){
slh.setVal('messageText' , ' ');
});
the slh.setVal and the slh.getVal functions are helper function we build to make easy access to data
and we can make it more usable by add listner function like this, (*26)
slh.addEventListener('sendMessage' , 'click' , function(){
sls.sendMessage("{{ url('streamLab/post/message') }}",
{
_token:"{{ csrf_token()}}",
message:slh.getVal('messageText')
},
function(){
slh.setVal('messageText' , ' ');
});
});
addEventListener is helper function we bulid for you see how to use, (*27)
when we send you data will have property that show you the type of data so you can get this source
by this fucntion
, (*28)
slh.getSource()
this will return
1- messages = this mean that someone on this channel send message
2- user.offline = this mean that one user left your channel
3- user.online = this mean that one user login your channel
4- channels = this will come if user or vistor subscribe or left the channel
, (*29)
you can use this function to get all users we make it easy to extract this info for you you can use this function, (*30)
slh.showOnlineUsers(id , data , [property]);
id = the tag id will show user inside it
data = user online data for this function
[property] = array of property that you want to show we will by default show users status
, (*31)
example, (*32)
slu.getAllUser("{{ url('streamLab/app/user') }}" ,function(online){
slh.showOnlineUsers('onlineusers' , online , ['name']);
}, 10 ,0 , 'test');
you can add users inside specific by this property, (*33)
slh.onlineTemplate = ['div' , 'id' , 'well']
li = the tag we will put the user in this tag each user will push inside this tag
id = id attribute
calss = class attribute
, (*34)
after you show online user you must update if user log out or another user login you must update
user list with the new data so you can use this function in this action after user set data to our lib you can now updat the list of online user this function will
append new user to list and update if user logout this function will update his status, (*35)
slh.updateUserList(online , offline)
online = function call if user come online offline = function call if user come offline, (*36)
example, (*37)
slh.updateUserList(function(id){
///here where user online
///check if user exist
slu.userExist("{{ url('streamLab/app/checkuser') }}" , id , function(response){
if(response.status){
///append user to user list
slh.showOnlineUsers('onlineusers' , response , ['name']);
sln.makeNotification('User ' , 'User Login');
}
})
} , function(id){
///what you will do if user ofline here
sln.makeNotification('User ' , 'User Logout');
});
makeNotification is class that handel browser notfication look more form here, (*38)
we make this function to help you to get all channel you have on you app, (*39)
slh.getAllChannel(id , callback , url);
id = the id we will show channel in
callback = optional if you not set we will show the channel name and how many online on it
url = do not worry abot that we set it for you but you can change if if you want
example
javascript
//show channels on channels id
slh.getAllChannel('channels');
you can make this more usable bys set channelTemplate by this code
javascript
slh.channelTemplate = ['div' , 'id' , 'class'];
now each channel you show in div this div will have data-channel attribute and we show online on span
this span will have attribute call data-channel-online that is aviable if you not set the callback function
, (*40)
# create new channel we make it easy to create channel you can use this funciton, (*41)
```javascript slh.createChannel(channelName , callback , secret , url);, (*42)
```, (*43)
channelName = Channe name must be unique in the same app
callback = is function return what the api say
type = ture you will make private channel do not add this if his channel will be public
url = the url to add channel do not worry about this we set it for you
Example for private channel
```javascript
slh.createChannel('private' , function(response){
alert(response.status);
}, 'true');, (*44)
Example for public channeljavascript
slh.createChannel('public' , function(response){
alert(response.status);
});, (*45)
```, (*46)
# delete channel, (*47)
you can delete exist channel like this, (*48)
javascript
slh.deleteChannel(channelName , callback , url), (*49)
channelName = Channe name must be unique in the same app
callback = is function return what the api say
url = the url to add channel do not worry about this we set it for you
, (*50)
Example
javascript
slh.deleteChannel('private' , function(response){
alert(response.status);
});, (*51)
#update channel online user
now after you show all channel maybe you want to update online user
if user login or log out
use this function inside message action
javascript
slh.updateChannelOnline();
this code will update the cahnnel test when user login or logout, (*52)
if you want to get channel info you can use this funciton, (*53)
slh.getChannel(channelName , channelSecret , callback , url)
channelName = the channel name
channelSecret = if it was private you must have secret
callback = what happen when you have response this call back will have the return data
url = the route do not worry about that we set it for you but you still can change it
, (*54)
example, (*55)
slh.getChannel('test' , null , function(response){
/// here will get the channel info you
/// can extract the channel info
console.log(response);
});
this will return with public channel info call test, (*56)
we support to save your users info in our api this cool thing to check if users online or not
and where are they connect or in any channel they subscribe
, (*57)
first make object form our lib call StreamLabUser
then make data object data object must have id ,secret , _token properties
then call createUser function
, (*58)
slu = new StreamLabUser();
var data = {
id:100,
secret:123,
_token:"{{ csrf_token() }}",
name:"hassan",
age:20
};
slu.createUser("{{ url('streamLab/create/user') }}" , data , function(response){
console.log(response);
});
you can add any number of property to save in our api, (*59)
first make object form our lib call StreamLabUser
then make data object data object must have id ,secret , _token properties
then call updateUser function
, (*60)
slu = new StreamLabUser();
var data = {
id:100,
secret:123,
_token:"{{ csrf_token() }}",
name:"hassan",
age:20
};
slu.updateUser("{{ url('streamLab/create/user') }}" , data , function(response){
console.log(response);
});
this option you can get all user register in your app with thier status if they online or offline,
or you can get online users on channels
, (*61)
slu.getAllUser(url , callback , limit , offset , channel);
url = the url will get all users do not worry we set this routes for you
callback = the function will call when you get users
limit = the user limit
offset = get form recorecd number
channel = if you put this prams this funciton will return with online user on this cahnnel if you leave it
empty will return with all users on this app
note :: if you put channel name you will get the online users only put if leave it empty will return with online
offline users
example
, (*62)
slu.getAllUser("{{ url('streamLab/app/user') }}" ,function(response){
/// online users on channel test
console.log(response);
}, 10 ,1 , 'test');
another example, (*63)
slu.getAllUser("{{ url('streamLab/app/user') }}" ,function(response){
/// all users on this app
console.log(response);
}, 10 ,1);
you can delete users from our service with this function, (*64)
slu.userExist(url , userID ,callback)
url = the url will get all users do not worry we set this routes for you
userID = user id
callback = this will call when get response
example, (*65)
slu.deleteUser("{{ url('streamLab/app/user/delete') }}" , userId , function(response){
/// user deleted
console.log(response)
});
you can check if user exist in our api or not just call this function, (*66)
slu.userExist(url , userID ,callback)
url = the url will get all users do not worry we set this routes for you
userID = user id
callback = this will call when get response
example, (*67)
slu.userExist("{{ url('streamLab/app/checkuser') }}" , 30 , function(response){
if(response.status){
///user found
var json = slu.json(response).data.data;
alert("Hi " + json.name);
}else{
//user not found
alert('Error login')
}
});
we make class that handel browser notification, (*68)
when you make object form browser notification the browserNotification will be true that mean you can use it turn it to
false if you need to not use it
sln = new StreamLabNotification();
sln.browserNotification = false, (*69)
# icon
this lib allow to add icon to your notification so the default icon you will find it on public/streamlab/fb-pro.png
you can replace it or you can add new path or new url like this, (*70)
sln.icon = "/StreamLab/fb-pro.png"; ///or icon = "https://streamlab.io/";
you can add how many time you need to show this notification the default is 500, (*71)
sln.time = 1000
now after this option you can add new notifiction by this fucntion, (*72)
sln.makeNotification(title , message);
we add a lot of helper function to make it easy to show or set or get data we use StreamLabHtml class for this, (*73)
this function return with data form the id you set, (*74)
slh.getVal(id)
this function set data to input by id, (*75)
slh.setVal(id , value);
this function return with tag innerhtml, (*76)
slh.html(id);
this function will append data to html tag, (*77)
slh.append(id , data);
this function will hide html tag by add style display none, (*78)
slh.hide(id);
this function will show html tag by remove style display none, (*79)
slh.show(id);
this function will add custome attribute to tag, (*80)
slh.setAttr(id , attrName , attrValue);
this function will get attribute value, (*81)
slh.getAttr(id , attrName);
this function will remove attribute, (*82)
slh.removeAttr(id , attrName);
you can decet user behavior and add some action depend on this behaviorby this function, (*83)
slh.addEventListener(id , action , callback)
example, (*84)
slh.addEventListener('login' , 'submit' , function(){
alert('Hi you press login btn');
})
RealTime messages services streamlab.io
MIT
laravel realtime messages streamlab