ارسال ویس از طریق چت
سلام وقت بخیر
من برای سیستم چت که با لایووایر و laravel echo و pusher پیاده سازی کردم
میخام ویس هم از طریق چت ارسال کنم
ولی موفق نشدم
کدهامو میزارم لطفا راهنمایی کنید مشکل کارم کجاست و چیکار کنم
ویو کار
<div id="controls">
<button wire:click.prevent="startRecording" id="recordButton" class="upload-btn-wrapper border-0">
<i class="fa fa-microphone pe-2 ps-2"></i>
</button>
<button wire:click.prevent="stopRecording" id="stopButton" disabled class="upload-btn-wrapper border-0">
<i class="fa fa-stop" aria-hidden="true"></i>
</button>
</div>
<div id="recordingsList">
@foreach($recordings as $recording)
<audio controls src="{{$recording}}"></audio>
@endforeach
</div>component
protected $listeners = ['updateSendMessage' , 'dispatchMessageSent' , 'resetComponent' , 'recordingSaved' => 'handleRecordingSaved'];
public function startRecording()
{
$this->recording = 'recording_' . Str::random(8) . '.webm';
$this->recordings[] = $this->recording;
$this->dispatchBrowserEvent('startRecording', [
'recording' => $this->recording
]);
}
public function pauseRecording()
{
$this->dispatchBrowserEvent('pauseRecording');
}
public function stopRecording()
{
$this->dispatchBrowserEvent('stopRecording');
$path = $this->recording;
$user_id = Auth::user()->id;
$recording = Message::create([
'user_id' => $user_id,
'path' => $path
]);
$this->emit('chat.send-message', $recording->id);
}
public function handleRecordingSaved($recordingId)
{
$recording = Message::find($recordingId);
// handle the recording
// ...
}گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام من این کار رو بلدم ارسال ویس در چت رو و قبلا انجام دادم
فقط نمیتونم به طور رایگان یاد بدم چون پدر خودم در اومده
سلام،
برای ارسال فایل‌های ویس از طریق چت، می‌توانید از ویژگی فایل اپلود لایووایر به نام Wire:file استفاده کنید. با استفاده از این ویژگی، شما می‌توانید فایل ویس را انتخاب کرده و به جای آن که آپلود شود، در سمت کلاینت، با یک رویداد و به روش پیام رسانی سفارشی، به سرور ارسال کنید.
در ویو کار، کد زیر را قرار دهید:
<div id="controls">
<button wire:click.prevent="startRecording" id="recordButton" class="upload-btn-wrapper border-0">
<i class="fa fa-microphone pe-2 ps-2"></i>
</button>
<button
wire:click.prevent="stopRecording"
wire:file="recordingFile" <!-- این ویژگی برای ارسال فایل ویس استفاده می‌شود -->
id="stopButton"
disabled
class="upload-btn-wrapper border-0"
>
<i class="fa fa-stop" aria-hidden="true"></i>
</button>
</div>داخل کامپوننت خودتان نیز کد زیر را قرار بدهید:
use Livewire\WithFileUploads;
class YourComponent extends Component
{
use WithFileUploads;
public $recording;
public $recordingFile;
public function startRecording()
{
$this->recording = 'recording_' . Str::random(8) . '.webm';
}
public function stopRecording()
{
$path = $this->recording;
$user_id = Auth::user()->id;
$recording = Message::create([
'user_id' => $user_id,
'path' => $path
]);
$this->dispatchBrowserEvent('chat.send-message', $recording->id, $this->recordingFile->getFilename()); // اینجا فایل را هم داخل رویداد ارسال می‌کنیم.
}
}در کامپوننت، ابتدا یک متغیر recordingFile را تعریف کنید، که برای نگهداری فایل ویس انتخاب شده توسط کاربر استفاده می‌شود.
سپس در تابع stopRecording، مسیر فایل را به همراه شناسه کاربر (یا شناسه پیام) به سمت سرور ارسال می‌کنیم. به منظور ارسال فایل به صورت همزمان با رویداد، می‌توانید از پکیج laravel-echo-file-upload استفاده کنید.
@mrahmadi
خیلی ممنونم ازتون
وقتی روی ویس کلیک میکنم متاسفانه هیچ اتفاقی نمیفته
تو کنسول هم خطایی وجود نداره
دلیل خاصی داره این مشکل هست ؟ کدهای قبلی هم به همین شکل بود هیچ اتفاقی نمیفتاد تو صفحه