GitHub - PHPJunior/laravel-video-chat: Laravel Video Chat using Socket.IO and We...
source link: https://github.com/PHPJunior/laravel-video-chat
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Laravel Video Chat
Laravel Video Chat using Socket.IO and WebRTC
Installation
composer require php-junior/laravel-video-chat
Laravel 5.5 uses Package Auto-Discovery, so doesn't require you to manually add the ServiceProvider.
If you don't use auto-discovery, add the ServiceProvider to the providers array in config/app.php
PhpJunior\LaravelVideoChat\LaravelVideoChatServiceProvider::class,
php artisan vendor:publish --provider="PhpJunior\LaravelVideoChat\LaravelVideoChatServiceProvider"
php artisan migrate
php artisan storage:link
change APP_URL in .env
This is the contents of the published config file:
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 App\Providers\BroadcastServiceProvider
in the providers array of your config/app.php
configuration file
Install the JavaScript dependencies:
npm install
npm install --save laravel-echo js-cookie vue-timeago socket.io socket.io-client webrtc-adapter vue-chat-scroll
If you are running the Socket.IO server on the same domain as your web application, you may access the client library like
<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
in your application's head
HTML element
Next, you will need to instantiate Echo with the socket.io
connector and a 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'
});
Finally, you will need to run a compatible Socket.IO server. Use tlaverdure/laravel-echo-server GitHub repository.
In resources/assets/js/app.js
file:
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')
}
})
Run npm run dev
to recompile your assets.
Features
- One To One Chat ( With Video Call )
- Accept Message Request
- Group Chat
- File Sharing
Usage
Get All Conversation and Group Conversation
$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>
Start Conversation
Chat::startConversationWith($otherUserId);
Accept Conversation
Chat::acceptMessageRequest($conversationId);
Get Conversation Messages
$conversation = Chat::getConversationMessageById($conversationId);
<chat-room :conversation="{{ $conversation }}" :current-user="{{ auth()->user() }}"></chat-room>
Send Message
You can change message send route in component
Chat::sendConversationMessage($conversationId, $message);
Start Video Call ( Not Avaliable On Group Chat )
You can change video call route . I defined video call route trigger/{id}
method POST
Use $request->all()
for video call.
Chat::startVideoCall($conversationId , $request->all());
Start Group Conversation
Chat::createGroupConversation( $groupName , [ $otherUserId , $otherUserId2 ]);
Get Group Conversation Messages
$conversation = Chat::getGroupConversationMessageById($groupConversationId);
<group-chat-room :conversation="{{ $conversation }}" :current-user="{{ auth()->user() }}"></group-chat-room>
Send Group Chat Message
You can change message send route in component
Chat::sendGroupConversationMessage($groupConversationId, $message);
Add Members to Group
Chat::addMembersToExistingGroupConversation($groupConversationId, [ $otherUserId , $otherUserId2 ])
Remove Members from Group
Chat::removeMembersFromGroupConversation($groupConversationId, [ $otherUserId , $otherUserId2 ])
Leave From Group
Chat::leaveFromGroupConversation($groupConversationId);
File Sharing
Run this command php artisan storage:link
Send Files in Conversation
Chat::sendFilesInConversation($conversationId , $request->file('files'));
Send Files in Group Conversation
Chat::sendFilesInGroupConversation($groupConversationId , $request->file('files'));
- Add Members to Group
- Remove Member From Group
Next Version
- Group Video Call
Credits
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
Support on Beerpay
Hey dude! Help me out for a couple of !
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK