Real-Time அரட்டை விண்ணப்பத்தை உருவாக்குதல் Laravel WebSocket

இணையத்தில் ஊடாடும் தகவல்தொடர்புகளில் எவ்வாறு புரட்சியை ஏற்படுத்தலாம் என்பதற்கு அரட்டை real-time பயன்பாடு ஒரு சிறந்த எடுத்துக்காட்டு. இந்தக் கட்டுரையில், பயனர்களுக்குப் பதிலளிக்கக்கூடிய மற்றும் ஊடாடும் தகவல்தொடர்பு அனுபவங்களை வழங்குவதற்கு எளிய அரட்டை பயன்பாட்டைப் பயன்படுத்தி ஒருங்கிணைத்து உருவாக்குவோம். WebSocket real-time Laravel WebSocket laravel-websockets package

விண்ணப்பத்தின் நோக்கங்கள்

real-time பின்வரும் அம்சங்களுடன் அரட்டை பயன்பாட்டை உருவாக்குவோம்:

செய்திகளை உடனடியாக அனுப்பவும் பெறவும்: பயனர்கள் பக்கத்தைப் புதுப்பிக்கத் தேவையில்லாமல் உடனடியாக செய்திகளை அனுப்பலாம் மற்றும் பெறலாம்.

ஆன்லைன் பயனர் பட்டியல்: பயன்பாடு ஆன்லைன் பயனர்களின் பட்டியலையும் அவர்களின் அரட்டை நிலையையும் காண்பிக்கும்.

படங்கள் மற்றும் கோப்புகளை அனுப்பவும்: பயனர்கள் அரட்டையில் படங்களையும் கோப்புகளையும் பகிர்ந்து கொள்ளலாம்.

நிறுவல் மற்றும் உள்ளமைவுடன் தொடங்குதல்

தொடங்குவதற்கு, ஐ நிறுவி laravel-websockets package அதை ஒருங்கிணைக்க உள்ளமைக்க WebSocket வேண்டும் Laravel. இந்த வழிமுறைகளை பின்பற்றவும்:

நிறுவவும் laravel-websockets package: package பயன்படுத்தி நிறுவுவதன் மூலம் தொடங்கவும் Composer.

composer require pusher/pusher-php-server

உள்ளமைவு கோப்பை வெளியிடவும்: நிறுவிய பின், அமைப்புகளைத் தனிப்பயனாக்க உள்ளமைவு கோப்பை வெளியிடவும்.

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

இயக்கவும் migration: க்கு தேவையான தரவுத்தள அட்டவணைகளை உருவாக்கவும் WebSocket.

php artisan migrate

சேவையகத்தைத் தொடங்கவும் WebSocket: இணைப்புகளைக் WebSocket கையாள சேவையகத்தைத் தொடங்கவும் real-time

php artisan websockets:serve

பயனர் இடைமுகத்தை உருவாக்குதல்

செய்தி பட்டியல், உள்ளீட்டு பெட்டி மற்றும் ஆன்லைன் பயனர்களின் பட்டியலைக் காண்பிக்க HTML, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி எளிய பயனர் இடைமுகத்தை உருவாக்குவோம்.

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

ஒருங்கிணைத்தல் WebSocket மற்றும் Broadcasting

பயன்பாட்டுடன் Laravel Broadcasting ஒருங்கிணைக்கப் பயன்படுத்துவோம். WebSocket

நிறுவு Pusher: இயக்கியாகப் pusher/pusher-php-server package பயன்படுத்த நிறுவவும். Pusher Broadcasting

composer require pusher/pusher-php-server

கட்டமைக்கவும் Broadcasting: கோப்பில் config/broadcasting.php, இயக்கியை உள்ளமைத்து, உங்கள் Pusher சான்றுகளை வழங்கவும்.

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

நிகழ்வை உருவாக்கி ஒளிபரப்பு: ChatMessageSent நிகழ்வை உருவாக்கி, ஒரு பயனர் செய்தியை அனுப்பும்போது அதை ஒளிபரப்பவும்.

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

ஜாவாஸ்கிரிப்ட் ஸ்கிரிப்ட்: சர்வரில் இருந்து நிகழ்வுகளைக் கேட்கவும், பயனர் இடைமுகத்தைப் புதுப்பிக்கவும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்.

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

முடிவுரை

இந்த டுடோரியலை முடிப்பதன் மூலம், இல் real-time பயன்படுத்தி அரட்டை பயன்பாட்டை வெற்றிகரமாக உருவாக்கியுள்ளீர்கள். பயனர்கள் உடனுக்குடன் செய்திகளை அனுப்பலாம் மற்றும் பெறலாம், மேலும் பதிலளிக்கக்கூடிய மற்றும் ஊடாடும் தகவல்தொடர்பு அனுபவத்தை எவ்வாறு வழங்குகிறது என்பதை நீங்கள் பார்த்திருக்கிறீர்கள். WebSocket Laravel WebSocket