laravel video chat

Laravel视频聊天

Laravel视频聊天使用socket.io和webrtc

安装

composer require php-junior/laravel-video-chat

Laravel 5.5使用包装自动发现，因此不需要您手动添加ServiceProvider。

如果您不使用自动发现，请在config/app.php中的提供商数组中添加ServiceProvider

 PhpJunior  LaravelVideoChat LaravelVideoChatServiceProvider::class,

php artisan vendor:publish --provider=" PhpJunior  LaravelVideoChat  LaravelVideoChatServiceProvider "

和

php artisan migrate
php artisan storage:link

change APP_URL in .env

这是已发布的配置文件的内容：

 return [
    ' relation '  => [
        ' conversations ' =>  PhpJunior  LaravelVideoChat  Models  Conversation Conversation::class,
        ' group_conversations ' => PhpJunior  LaravelVideoChat  Models  Group  Conversation GroupConversation::class
    ],
    ' user ' => [
        ' model ' =>  App User::class,
        ' table ' =>  ' users ' // Existing user table name
    ],
    ' table ' => [
        ' conversations_table '   =>  ' conversations ' ,
        ' messages_table '        =>  ' messages ' ,
        ' group_conversations_table ' =>  ' group_conversations ' ,
        ' group_users_table '     =>  ' group_users ' ,
        ' files_table '           =>  ' files '
    ],
    ' channel '   =>  [
        ' new_conversation_created '  =>  ' new-conversation-created ' ,
        ' chat_room '                 =>  ' chat-room ' ,
        ' group_chat_room '           =>  ' group-chat-room '
    ],
    ' upload ' => [
        ' storage ' => ' public '
    ]
];

config/app.php配置文件中的“ uncomment AppProvidersBroadcastServiceProvider

安装JavaScript依赖项：

    npm install
    npm install -- save laravel - echo js - cookie vue - timeago socket . io socket . io - client webrtc - adapter vue - chat - scroll

如果与Web应用程序在同一域上运行socket.io服务器，则可以访问客户库库

 < script src = "//{{ Request::getHost() }}:6001/socket.io/socket.io.js" > </ script >

在您应用程序的head HTML元素中

接下来，您需要使用socket.io连接器和host实例化回声。

 require('webrtc-adapter');
 window.Cookies = require('js-cookie');
 
 import Echo from "laravel-echo"
 
 window.io = require('socket.io-client');
 
 window.Echo = new Echo({
     broadcaster: 'socket.io',
     host: window.location.hostname + ':6001'
 });

最后，您需要运行兼容socket.io服务器。使用tlaverdure/laravel-echo-server github存储库。

在resources/assets/js/app.js文件中：

 import VueChatScroll from 'vue-chat-scroll';
 import VueTimeago from 'vue-timeago';
 
 Vue.use(VueChatScroll);
 Vue.component('chat-room' , require('./components/laravel-video-chat/ChatRoom.vue'));
 Vue.component('group-chat-room', require('./components/laravel-video-chat/GroupChatRoom.vue'));
 Vue.component('video-section' , require('./components/laravel-video-chat/VideoSection.vue'));
 Vue.component('file-preview' , require('./components/laravel-video-chat/FilePreview.vue'));
 
 Vue.use(VueTimeago, {
     name: 'timeago', // component name, `timeago` by default
     locale: 'en-US',
     locales: {
         'en-US': require('vue-timeago/locales/en-US.json')
     }
 })

运行npm run dev以重新编译您的资产。

特征

• 一对一聊天（带视频通话）
• 接受消息请求
• 小组聊天
• 文件共享

用法

进行所有对话和小组对话

 $ groups = Chat:: getAllGroupConversations ();
$ conversations = Chat:: getAllConversations ()

< ul class = " list-group " >
    @foreach ( $conversations as $conversation )
        < li class = " list-group-item " >
        @if ( $conversation -> message -> conversation -> is_accepted )
            < a href = " # " >
                < h2 > {{ $conversation -> user -> name } } </ h2 >
                @if ( ! is_null ( $conversation -> message ) )
                    < span > {{ substr ( $conversation -> message -> text , 0 , 20 ) } } </ span >
                @endif
            </ a >
         @else
            < a href = " # " >
                < h2 > {{ $conversation -> user -> name } } </ h2 >
                @if ( $conversation -> message -> conversation -> second_user_id == auth () -> user () -> id )
                    < a href = " accept_request_route " class = " btn btn-xs btn-success " >
                        Accept Message Request
                    </ a >
                @endif
            </ a >
         @endif
        </ li >
    @endforeach

    @foreach ( $groups as $group )
        < li class = " list-group-item " >
            < a href = " # " >
                < h2 > {{ $group -> name } } </ h2 >
                < span > {{ $group -> users_count } } Member</ span >
            </ a >
        </ li >
    @endforeach
</ ul >

开始对话

Chat:: startConversationWith ( $ otherUserId );

接受对话

Chat:: acceptMessageRequest ( $ conversationId );

获取对话消息

 $ conversation = Chat:: getConversationMessageById ( $ conversationId );

< chat-room :conversation = " {{ $conversation } } " :current-user = " {{ auth () -> user () } } " ></ chat-room >

发送消息

您可以更改邮件发送组件中的路由

Chat:: sendConversationMessage ( $ conversationId , $ message );

启动视频通话（在小组聊天中不可避免）

您可以更改视频通话路线。我定义了视频通话路由trigger/{id}方法POST使用$request->all()用于视频呼叫。

Chat:: startVideoCall ( $ conversationId , $ request -> all ());

开始小组对话

Chat:: createGroupConversation ( $ groupName , [ $ otherUserId , $ otherUserId2 ]);

获取小组对话消息

 $ conversation = Chat:: getGroupConversationMessageById ( $ groupConversationId );

< group-chat-room :conversation = " {{ $conversation } } " :current-user = " {{ auth () -> user () } } " ></ group-chat-room >

发送组聊天消息

您可以更改邮件发送组件中的路由

Chat:: sendGroupConversationMessage ( $ groupConversationId , $ message );

将成员添加到组

Chat:: addMembersToExistingGroupConversation ( $ groupConversationId , [ $ otherUserId , $ otherUserId2 ])

从小组中删除成员

Chat:: removeMembersFromGroupConversation ( $ groupConversationId , [ $ otherUserId , $ otherUserId2 ])

离开小组

Chat:: leaveFromGroupConversation ( $ groupConversationId );

文件共享

运行此命令php artisan storage:link

在对话中发送文件

Chat:: sendFilesInConversation ( $ conversationId , $ request -> file ( ' files ' ));

在小组对话中发送文件

Chat:: sendFilesInGroupConversation ( $ groupConversationId , $ request -> file ( ' files ' ));

托多

• 将成员添加到组
• 从小组中删除成员

下一个版本

• 小组视频通话

学分

• 所有贡献者

执照

麻省理工学院许可证（麻省理工学院）。请参阅许可证文件以获取更多信息。

演示项目

支持Beerpay

嘿，伙计！帮我几个？！