laravel video chat
vis CI
socket.io 및 webrtc를 사용한 Laravel 비디오 채팅
composer require php-junior/laravel-video-chatLaravel 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 '
]
]; Uncomment AppProvidersBroadcastServiceProvider config/app.php 구성 파일의 제공 업체 배열
JavaScript 종속성을 설치하십시오.
npm install
npm install -- save laravel - echo js - cookie vue - timeago socket . io socket . io - client webrtc - adapter vue - chat - scroll웹 응용 프로그램과 동일한 도메인에서 Socket.io 서버를 실행중인 경우 다음과 같은 클라이언트 라이브러리에 액세스 할 수 있습니다.
< 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). 자세한 내용은 라이센스 파일을 참조하십시오.
데모 프로젝트
이봐 야! 몇 가지를 도와주세요?!
