close

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');  
}

JavaScript ਸਕ੍ਰਿਪਟ: ਸਰਵਰ ਤੋਂ ਇਵੈਂਟਾਂ ਨੂੰ ਸੁਣਨ ਅਤੇ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ। 

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