README

使用Socket.IO和WebRTC的Laravel视频聊天

安装

composer require php-junior/laravel-video-chat

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

如果您不使用自动发现，请将 ServiceProvider 添加到 config/app.php 配置文件中的 providers 数组中

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 配置文件的 providers 数组中取消注释 App\Providers\BroadcastServiceProvider

安装JavaScript依赖项

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

如果您在运行 Socket.IO 服务器与您的Web应用程序相同的域名上，您可能可以这样访问客户端库

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

在您的应用的 head HTML 元素中

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

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

待办事项

将成员添加到群组
从群组中删除成员

下一个版本

群组视频通话

致谢

所有贡献者

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件

演示项目

在Beerpay上提供支持

嘿兄弟！帮帮我喝一杯啤酒！

php-junior / laravel-video-chat

维护者

详细信息