laravel video chat
vis CI
Chat vidéo Laravel utilisant socket.io et webrtc
composer require php-junior/laravel-video-chatLaravel 5.5 utilise la découverte automatique du package, il ne vous faut donc pas ajouter manuellement le serviceProvider.
Si vous n'utilisez pas de découverte automatique, ajoutez le service de service au tableau des fournisseurs dans config / app.php
PhpJunior LaravelVideoChat LaravelVideoChatServiceProvider::class,php artisan vendor:publish --provider=" PhpJunior LaravelVideoChat LaravelVideoChatServiceProvider "Et
php artisan migrate
php artisan storage:link
change APP_URL in .envCeci est le contenu du fichier de configuration publié:
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 '
]
]; Uncomment AppProvidersBroadcastServiceProvider dans le tableau des fournisseurs de votre fichier de configuration config/app.php
Installez les dépendances JavaScript:
npm install
npm install -- save laravel - echo js - cookie vue - timeago socket . io socket . io - client webrtc - adapter vue - chat - scrollSi vous exécutez le serveur socket.io sur le même domaine que votre application Web, vous pouvez accéder à la bibliothèque client comme
< script src = "//{{ Request::getHost() }}:6001/socket.io/socket.io.js" > </ script > Dans l'élément HTML head de votre application
Ensuite, vous devrez instancier Echo avec le connecteur socket.io et un 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'
});
Enfin, vous devrez exécuter un serveur Socket.io compatible. Utilisez le référentiel GitHub Tlaverdure / Laravel-Echo-Server.
Dans resources/assets/js/app.js Fichier:
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')
}
})
Exécutez npm run dev pour recompiler vos actifs.
$ 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 >Vous pouvez modifier le message d'envoi de message dans le composant
Chat:: sendConversationMessage ( $ conversationId , $ message ); Vous pouvez modifier l'itinéraire d'appel vidéo. J'ai défini trigger/{id} POST Utilisez $request->all() pour l'appel vidéo.
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 >Vous pouvez modifier le message d'envoi de message dans le composant
Chat:: sendGroupConversationMessage ( $ groupConversationId , $ message );Chat:: addMembersToExistingGroupConversation ( $ groupConversationId , [ $ otherUserId , $ otherUserId2 ])Chat:: removeMembersFromGroupConversation ( $ groupConversationId , [ $ otherUserId , $ otherUserId2 ])Chat:: leaveFromGroupConversation ( $ groupConversationId ); Exécutez cette commande php artisan storage:link
Chat:: sendFilesInConversation ( $ conversationId , $ request -> file ( ' files ' ));Chat:: sendFilesInGroupConversation ( $ groupConversationId , $ request -> file ( ' files ' ));La licence MIT (MIT). Veuillez consulter le fichier de licence pour plus d'informations.
Projet de démonstration
Hé mec! Aidez-moi pour quelques-uns ?!
