README

streamlab.io 实时消息服务

安装

使用 composer 运行此命令 composer require 5dmatweb/streamlab:dev-master

添加服务提供者

打开 config/app 并将此行添加到 provider 数组中

StreamLab\StreamLabProvider\StreamLabServiceProvider::class,

然后发布此供应商

php artisan vendor:publish

此命令将添加以下文件
1-stream-lab.php 到配置文件
2-StreamLab.js 到 public/StreamLab/StreamLab-soket.js
3-test.blade.php 到 resources/views/test.blade.php

如何使用

1-将帐户添加到 https://streamlab.io

获取 app_id 和密钥，然后添加到 config/stream-lab.php

2-转到此路由

yourserver /sl
127.0.0.1:8000/sl

这将加载测试视图，您必须首先创建用户
访问我们网站上的此链接以创建用户 Apps
选择您的应用，然后转到“用户”选项卡，添加新用户，然后将此 ID 添加到您的链接中

连接到套接字

您可以通过这种方式监听频道：首先从我们的库 StreamLabSocket 创建新对象
然后将此对象添加到此类中

  var sls = new StreamLabSocket({
   appId:"",
   channelName:"",
   channelSecret:"",
   event:"*",
   user_id:"",
   user_secret:""
 });

appId = 您要连接的应用，我们从配置文件中获取此值
channelName = 您要监听的频道名称
channelSecret = 如果频道是秘密的，您必须在此处添加密钥代码
event = 如果您想监听特定事件，您可以 * 监听所有事件或仅添加事件名 'event' 或
您可以像这样监听多个事件：event1,event2,event3
user_id = 您创建的用户，在此处添加用户 ID
user_secret = 如果您创建了用户，请在此处添加 user_secret
查看此处用户部分用户部分

示例

  var sls = new StreamLabSocket({
   appId:"{{ config('stream_lab.app_id') }}",
   channelName:"test",
   channelSecret:"",
   event:"*",
   user_id:1000,
   user_secret:"asdasdlkkjkleke040e_sdsdklekj"
 });

如果您想允许任何人订阅此频道，只需添加 ID 和频道名称即可

  var sls = new StreamLabSocket({
   appId:"{{ config('stream_lab.app_id') }}",
   channelName:"test",
 });

获取数据

完成此步骤后，现在可以连接到套接字，您现在可以从我们的 API 接收数据
现在您必须使用此函数获取这些数据

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);
}

从我们的 API 获取数据后，现在您必须从我们的 HTML 处理类创建新对象，此类将使您能够轻松地执行许多操作
class 将允许您轻松执行许多操作

获取消息

您现在可以通过我们的 StreamLabHtml 类的此函数获取消息

slh.getMessage()

获取在线状态

您可以通过 StreamLabHtml 的此函数获取此频道上的在线人数

slh.getOnline()

向用户展示数据

有两种方法向用户展示数据：首先
使用 StreamLabHtml 类中的此函数
第一种方法

  slh.setMessages(id);
  slh.setOnline(id);

这些函数接受您将显示消息或在线人数的标签的 ID
第二种方法

  slh.setOnlineAndMessages(onlineID , messagesID);

onlineID = 将显示在此 ID 中的在线人数
messagesID = 将显示在此 ID 中的消息

您可以为显示消息创建模板

  slh.msgTemplate = ['li' , 'id' , 'calss']

li = 我们将消息放入此标签中，每个消息都会推入此标签
id = id 属性
calss = class 属性

向频道发送消息

现在您必须了解如何将消息推送到频道，我们为您创建了函数以使其变得简单

  sls.sendMessage(url,data,callback);

url = 将获取所有用户的 URL，不用担心，我们为您设置了这些路由
data = 它必须是包含 _token 和 message 属性的对象
callback = 当您获取用户时将调用的函数

示例

 sls.sendMessage("{{ url('streamLab/post/message') }}",
 {
   _token:"{{ csrf_token()}}"
   ,message:slh.getVal('messageText'),
   channelName:"public",
   eventName:"SendMessages"
 }
 ,function(){
  slh.setVal('messageText' , ' ');
 });

slh.setVal 和 slh.getVal 函数是我们构建的辅助函数，用于方便地访问数据
我们可以通过添加监听函数来使其更易用，如下所示

  slh.addEventListener('sendMessage' , 'click' , function(){
        sls.sendMessage("{{ url('streamLab/post/message') }}",
          {
            _token:"{{ csrf_token()}}",
            message:slh.getVal('messageText')
          },
          function(){
           slh.setVal('messageText' , ' ');
        });
  });

addEventListener 是我们为您构建的辅助函数，您可以通过它了解如何使用

数据源

当我们发送数据时，数据将具有显示数据类型的属性，您可以通过此函数获取此数据源

  slh.getSource()

这将返回
1- messages = 这意味着有人在频道中发送消息
2- user.offline = 这意味着一个用户离开了您的频道
3- user.online = 这意味着一个用户登录了您的频道
4- channels = 如果用户或访客订阅或离开频道，将会返回

显示在线用户

您可以使用此函数获取所有用户，我们使其易于提取此信息，您可以使用此函数

  slh.showOnlineUsers(id , data , [property]);

id = 该标签 ID 将显示用户
data = 此函数的用户在线数据
[属性] = 您想要显示的属性数组，我们将默认显示用户状态

示例

  slu.getAllUser("{{ url('streamLab/app/user') }}" ,function(online){
        slh.showOnlineUsers('onlineusers' , online , ['name']);
  }, 10 ,0 , 'test');

您可以通过此属性添加用户

slh.onlineTemplate = ['div' , 'id' , 'well']

li = 我们将用户放入此标签，每个用户将推入此标签
id = id 属性
calss = class 属性

添加登录用户

在您显示了在线用户后，如果用户注销或另一个用户登录，您必须更新
用户列表与新的数据，因此您可以使用此函数在此动作中，在用户将数据设置到我们的库后，您现在可以更新在线用户列表，此函数将
将新用户添加到列表，并更新用户注销时的情况

  slh.updateUserList(online , offline)

online = 用户上线时调用的函数，offline = 用户下线时调用的函数

示例

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 是处理浏览器通知的类，更多信息请参见此处

获取所有频道

我们构建此函数以帮助您获取您在应用程序中拥有的所有频道

  slh.getAllChannel(id , callback , url);

id = 我们将在其中显示频道的 ID
callback = 可选的，如果您未设置，我们将显示频道名称和在线人数
url = 请放心，我们已为您设置，但如果您想，您可以更改它
示例

 //show channels on channels id
 slh.getAllChannel('channels');

您可以通过设置 channelTemplate 通过此代码使它更易用

 slh.channelTemplate = ['div' , 'id' , 'class'];

现在，您在 div 中显示的每个频道都将具有 data-channel 属性，我们在 span 中显示在线人数
此 span 将具有名为 data-channel-online 的属性，如果没有设置回调函数，则可用

创建新频道

我们使创建频道变得容易，您可以使用此函数

  slh.createChannel(channelName , callback , secret ,  url);

channelName = 频道名称必须在同一应用程序中是唯一的
callback = 是函数，返回 API 的响应
type = 如果您要创建私有频道，则设置为 true，否则请不要添加此参数，如果频道将是公开的
url = 添加频道的 URL，请放心，我们已为您设置
私有频道的示例

   slh.createChannel('private'  , function(response){
                alert(response.status);
   }, 'true');

公开频道的示例

   slh.createChannel('public'  , function(response){
                alert(response.status);
   });

删除频道

您可以像这样删除现有频道

  slh.deleteChannel(channelName , callback , url)

channelName = 频道名称必须在同一应用程序中是唯一的
callback = 是函数，返回 API 的响应
url = 添加频道的 URL，请放心，我们已为您设置

示例

   slh.deleteChannel('private' , function(response){
                alert(response.status);
  });

在您展示所有频道后，现在更新在线用户数，也许您想更新在线用户数
如果用户登录或登出
在消息中使用此功能操作

  slh.updateChannelOnline();

此代码将在用户登录或登出时更新频道测试

获取频道信息

如果您想获取频道信息，可以使用此函数

  slh.getChannel(channelName , channelSecret , callback , url)

channelName = 频道名称
channelSecret = 如果是私有的，您必须有密钥
callback = 当您对此调用做出响应时，此回调将返回返回数据
url = 路径，不用担心，我们为您设置了它，但您仍然可以更改它

示例

   slh.getChannel('test' , null , function(response){
      /// here will get the channel info you 
      /// can extract the channel info
      console.log(response);
  });

这将返回公开频道信息 call test

用户控制

我们支持将您的用户信息保存到我们的API中，这是一件很酷的事情，可以检查用户是否在线，以及他们在何处连接，或者他们订阅了哪些频道
和他们在任何频道中是否在线

#首先创建用户，从我们的库中创建对象，调用 StreamLabUser
然后创建数据对象，数据对象必须具有 id、secret、_token 属性
然后调用 createUser 函数

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);
      });

您可以在我们的API中保存任何数量的属性

更新用户

首先从我们的库中创建对象，调用 StreamLabUser
然后创建数据对象，数据对象必须具有 id、secret、_token 属性
然后调用 updateUser 函数

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);
      });

#获取所有用户，此选项您可以使用状态获取所有注册在您的应用程序中的用户（他们在线或离线），
或者您可以使用频道上的在线用户

slu.getAllUser(url , callback , limit , offset , channel);

url = 将获取所有用户的 URL，不用担心，我们为您设置了这些路由
callback = 当您获取用户时将调用的函数
limit = 用户限制
offset = 从记录编号获取
channel = 如果您设置此参数，此函数将返回此频道上的在线用户，如果您留空，则返回此应用程序上的所有用户
注意：如果您设置频道名称，您将只获取在线用户，如果留空，则返回在线和离线的用户
note :: 如果您设置频道名称，您将只获取在线用户，如果留空，则返回在线用户
离线用户
示例

slu.getAllUser("{{ url('streamLab/app/user') }}" ,function(response){
      /// online users on channel test
      console.log(response);
}, 10 ,1 , 'test');

另一个示例

slu.getAllUser("{{ url('streamLab/app/user') }}" ,function(response){
      /// all users on this app
      console.log(response);
}, 10 ,1);

删除用户

您可以使用此函数从我们的服务中删除用户

slu.userExist(url , userID ,callback)

url = 将获取所有用户的 URL，不用担心，我们为您设置了这些路由
userID = 用户ID，callback = 当获取响应时调用
示例

slu.deleteUser("{{ url('streamLab/app/user/delete') }}" , userId , function(response){
      /// user deleted
      console.log(response)
});

检查用户是否存在

您可以通过调用此函数检查用户是否存在于我们的API中

slu.userExist(url , userID ,callback)

url = 将获取所有用户的 URL，不用担心，我们为您设置了这些路由
userID = 用户ID，callback = 当获取响应时调用
示例

 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')
       }
 });

浏览器通知

我们创建了一个处理浏览器通知的类

#允许使用浏览器通知，当您从浏览器通知创建对象时，browserNotification 将为 true，这意味着您可以使用它，将其更改为
false 如果您需要不使用它

 sln = new StreamLabNotification();
 sln.browserNotification = false

图标

此库允许您向通知添加图标，默认图标您可以在 public/streamlab/fb-pro.png 中找到
您可以替换它，或者您可以添加新的路径或新的URL，如下所示

  sln.icon = "/StreamLab/fb-pro.png";
  ///or
  icon = "https://streamlab.io/";

时间

您可以添加需要显示此通知的时间，默认为500

  sln.time = 1000

添加通知

现在在此选项之后，您可以通过此函数添加新的通知

  sln.makeNotification(title , message);

辅助函数

我们添加了许多辅助函数，使显示、设置或获取数据变得简单，我们使用 StreamLabHtml 类为此提供支持

通过ID获取输入数据

此函数返回您设置的ID的数据

  slh.getVal(id)

通过ID设置输入数据

此函数通过ID设置数据

  slh.setVal(id , value);

从HTML标签获取数据

此函数返回标签的内HTML

  slh.html(id);

向HTML标签添加数据

此函数将数据添加到HTML标签

  slh.append(id , data);

通过ID隐藏HTML元素

此函数将添加样式 display none 以隐藏HTML标签

  slh.hide(id);

通过ID显示HTML元素

此函数通过移除样式 display none 显示HTML标签

  slh.show(id);

通过ID设置标签属性

此函数将添加自定义属性到标签

  slh.setAttr(id , attrName , attrValue);

通过ID获取标签属性

此函数将获取属性值

  slh.getAttr(id , attrName);

通过ID删除标签属性

此函数将删除属性

  slh.removeAttr(id , attrName);

#addEventListener 您可以通过此函数检测用户行为，并根据此行为添加一些操作

  slh.addEventListener(id , action , callback)

示例

  slh.addEventListener('login' , 'submit' , function(){
      alert('Hi you press login btn');
  })

5dmatweb / streamlab

维护者

详细信息