Gina Real-Time Aikace-aikacen Taɗi tare da Laravel WebSocket

Aikace real-time -aikacen taɗi kyakkyawan misali ne na yadda WebSocket za a iya canza real-time hanyar sadarwa ta yanar gizo. A cikin wannan labarin, za mu yi tafiya ta hanyar gina aikace-aikacen taɗi mai sauƙi ta amfani Laravel da haɗawa WebSocket ta amfani da laravel-websockets package don isar da ƙwarewar sadarwa mai ma'ana ga masu amfani.

Makasudin Aikace-aikacen

Za mu gina real-time aikace-aikacen taɗi tare da fasali masu zuwa:

Aika da Karɓan Saƙonni Nan take: Masu amfani za su iya aikawa da karɓar saƙonni nan take ba tare da buƙatar sabunta shafin ba.

Jerin Masu Amfani Kan Kan Layi: Aikace -aikacen zai nuna jerin masu amfani da kan layi da matsayinsu na taɗi.

Aika Hotuna da Fayiloli: Masu amfani za su iya raba hotuna da fayiloli a cikin taɗi.

Farawa tare da Shigarwa da Kanfigareshan

Don farawa, muna buƙatar shigar da laravel-websockets package kuma saita shi don haɗawa WebSocket da Laravel. Bi waɗannan matakan:

Shigar da laravel-websockets package: Fara ta hanyar shigar da ta package amfani da Composer.

composer require pusher/pusher-php-server

Buga fayil ɗin sanyi: Bayan shigarwa, buga fayil ɗin sanyi don tsara saitunan.

 

php artisan vendor:publish --tag=websockets-config

Gudu migration: Ƙirƙiri da ake bukata tebur tebur don WebSocket.

php artisan migrate

Fara WebSocket uwar garken: Kaddamar da WebSocket uwar garken don sarrafa real-time haɗi

php artisan websockets:serve

Gina Interface Mai Amfani

Za mu ƙirƙiri sauƙi mai sauƙi na mai amfani ta amfani da HTML, CSS, da JavaScript don nuna jerin saƙo, akwatin shigarwa, da jerin masu amfani da kan layi.

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>  

Hadawa WebSocket da Broadcasting

Za mu yi amfani da su Laravel Broadcasting don haɗawa WebSocket da aikace-aikacen.

Shigar Pusher: Shigar da pusher/pusher-php-server package don amfani Pusher da matsayin Broadcasting direba.

composer require pusher/pusher-php-server

Sanya Broadcasting: A cikin config/broadcasting.php fayil ɗin, saita direba kuma samar da Pusher takaddun shaidarka.

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],  

Ƙirƙirar taron da watsawa: Ƙirƙiri taron ChatMessageSent kuma watsa shi lokacin da mai amfani ya aika sako.

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}  

Rubutun JavaScript: Yi amfani da JavaScript don sauraron abubuwan da suka faru daga uwar garken da sabunta masarrafar mai amfani.

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});  

Kammalawa

Ta hanyar kammala wannan koyawa, kun yi nasarar gina real-time aikace-aikacen taɗi ta amfani da WebSocket a cikin Laravel. Masu amfani za su iya aikawa da karɓar saƙon nan take, kuma kun shaida yadda WebSocket ake ba da amsa da ƙwarewar sadarwa.