laravel video chat
vis CI
Chat de video Laravel usando Socket.io y Webrtc
composer require php-junior/laravel-video-chatLaravel 5.5 utiliza el paquete de descubrimiento automático, por lo que no requiere que agregue manualmente el ServiceProvider.
Si no usa el descubrimiento automático, agregue el ServiceProvider a la matriz de proveedores en config/app.php
PhpJunior LaravelVideoChat LaravelVideoChatServiceProvider::class,php artisan vendor:publish --provider=" PhpJunior LaravelVideoChat LaravelVideoChatServiceProvider "Y
php artisan migrate
php artisan storage:link
change APP_URL in .envEste es el contenido del archivo de configuración publicado:
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 '
]
]; AppProvidersBroadcastServiceProvider en la matriz de proveedores de su archivo de configuración config/app.php
Instale las dependencias de JavaScript:
npm install
npm install -- save laravel - echo js - cookie vue - timeago socket . io socket . io - client webrtc - adapter vue - chat - scrollSi está ejecutando el servidor Socket.io en el mismo dominio que su aplicación web, puede acceder a la biblioteca de clientes como
< script src = "//{{ Request::getHost() }}:6001/socket.io/socket.io.js" > </ script > En el elemento HTML head de su aplicación
A continuación, deberá instanciar Echo con el conector socket.io y 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'
});
Finalmente, deberá ejecutar un servidor Socket.io compatible. Use el repositorio de github tlaverdure/laravel-eco-server.
En el archivo de 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')
}
})
Ejecute npm run dev para recompilar sus activos.
$ 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 >Puede cambiar el mensaje Enviar ruta en el componente
Chat:: sendConversationMessage ( $ conversationId , $ message ); Puede cambiar la ruta de videollamada. Definí trigger/{id} Método POST Use $request->all() para la videollamada.
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 >Puede cambiar el mensaje Enviar ruta en el componente
Chat:: sendGroupConversationMessage ( $ groupConversationId , $ message );Chat:: addMembersToExistingGroupConversation ( $ groupConversationId , [ $ otherUserId , $ otherUserId2 ])Chat:: removeMembersFromGroupConversation ( $ groupConversationId , [ $ otherUserId , $ otherUserId2 ])Chat:: leaveFromGroupConversation ( $ groupConversationId ); Ejecute este comando php artisan storage:link
Chat:: sendFilesInConversation ( $ conversationId , $ request -> file ( ' files ' ));Chat:: sendFilesInGroupConversation ( $ groupConversationId , $ request -> file ( ' files ' ));La licencia MIT (MIT). Consulte el archivo de licencia para obtener más información.
Proyecto de demostración
¡Hola amigo! ¡Ayúdame por un par de?!
