இணையத்தில் ஊடாடும் தகவல்தொடர்புகளில் எவ்வாறு புரட்சியை ஏற்படுத்தலாம் என்பதற்கு அரட்டை 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