Ag Tógáil Real-Time Feidhmchlár Comhrá le Laravel WebSocket

real-time Is sampla iontach é feidhmchlár comhrá den chaoi ar féidir WebSocket cumarsáid real-time idirghníomhach ar an ngréasán a athbheochan. San Airteagal seo, beimid ag siúl trí fheidhmchlár comhrá simplí a thógáil ag baint úsáide as Laravel agus ag comhtháthú WebSocket úsáid a bhaint as laravel-websockets package chun eispéiris chumarsáide fhreagracha agus idirghníomhacha a sheachadadh d'úsáideoirí.

Cuspóirí an Iarratais

Tógfaimid real-time feidhmchlár comhrá leis na gnéithe seo a leanas:

Seol agus Faigh Teachtaireachtaí Láithreach: Is féidir le húsáideoirí teachtaireachtaí a sheoladh agus a fháil láithreach gan gá a athnuachan an leathanach.

Liosta Úsáideoirí Ar Líne: Taispeánfaidh an feidhmchlár liosta úsáideoirí ar líne agus a stádas comhrá.

Seol Íomhánna agus Comhaid: Is féidir le húsáideoirí íomhánna agus comhaid a roinnt laistigh den chomhrá.

Tús a chur le Suiteáil agus Cumraíocht

Chun tús a chur leis, ní mór dúinn an comhad a shuiteáil laravel-websockets package agus a chumrú chun comhtháthú WebSocket le Laravel. Lean na céimeanna seo:

Suiteáil an laravel-websockets package: Tosaigh trí package úsáid a bhaint as Composer.

composer require pusher/pusher-php-server

Foilsigh an comhad cumraíochta: Tar éis a shuiteáil, foilsigh an comhad cumraíochta chun na socruithe a shaincheapadh.

 

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

Rith migration: Cruthaigh na táblaí bunachar sonraí riachtanacha le haghaidh WebSocket.

php artisan migrate

Freastalaí tosaithe WebSocket: Seoladh an WebSocket freastalaí chun real-time naisc a láimhseáil

php artisan websockets:serve

Tógáil an Chomhéadain Úsáideora

Cruthóimid comhéadan úsáideora simplí ag úsáid HTML, CSS, agus JavaScript chun an liosta teachtaireachtaí, an bosca ionchuir agus liosta na n-úsáideoirí ar líne a thaispeáint.

<!-- 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>  

Comhtháthú WebSocket agus Broadcasting

Bainfimid úsáid Laravel Broadcasting as a chomhtháthú WebSocket leis an bhfeidhmchlár.

Suiteáil Pusher: Suiteáil an pusher/pusher-php-server package a úsáid Pusher mar an Broadcasting tiománaí.

composer require pusher/pusher-php-server

Cumraigh Broadcasting: Sa config/broadcasting.php chomhad, cumraigh an tiománaí agus cuir do Pusher dhintiúir ar fáil.

'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,  
    ],  
],  

Cruthaigh imeacht agus craoladh: Cruthaigh imeacht ChatMessageSent agus craoladh é nuair a sheolann úsáideoir teachtaireacht.

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

JavaScript Script: Úsáid JavaScript chun éisteacht le haghaidh imeachtaí ón bhfreastalaí agus chun an comhéadan úsáideora a nuashonrú.

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

Conclúid

Tríd an rang teagaisc seo a chomhlánú, d'éirigh leat real-time feidhmchlár comhrá a thógáil ag baint úsáide as WebSocket in Laravel. Is féidir le húsáideoirí teachtaireachtaí a sheoladh agus a fháil láithreach, agus tá sé feicthe agat conas a WebSocket sholáthraíonn eispéireas cumarsáide freagrúil agus idirghníomhach.