Δημιουργία Real-Time εφαρμογής συνομιλίας με Laravel WebSocket

Μια real-time εφαρμογή συνομιλίας είναι ένα εξαιρετικό παράδειγμα για το πώς WebSocket μπορεί να φέρει επανάσταση real-time στη διαδραστική επικοινωνία στον Ιστό. Σε αυτό το άρθρο, θα προχωρήσουμε στη δημιουργία μιας απλής εφαρμογής συνομιλίας χρησιμοποιώντας Laravel και ενσωματώνοντας WebSocket τη χρήση της laravel-websockets package για να προσφέρουμε ανταποκρινόμενες και διαδραστικές εμπειρίες επικοινωνίας στους χρήστες.

Στόχοι της Εφαρμογής

Θα δημιουργήσουμε μια real-time εφαρμογή συνομιλίας με τα ακόλουθα χαρακτηριστικά:

Άμεση αποστολή και λήψη μηνυμάτων: Οι χρήστες μπορούν να στέλνουν και να λαμβάνουν μηνύματα αμέσως χωρίς να χρειάζεται να ανανεώσουν τη σελίδα.

Online User List: Η εφαρμογή θα εμφανίσει μια λίστα με τους online χρήστες και την κατάσταση συνομιλίας τους.

Αποστολή εικόνων και αρχείων: Οι χρήστες μπορούν να μοιράζονται εικόνες και αρχεία εντός της συνομιλίας.

Ξεκινώντας με την εγκατάσταση και τη διαμόρφωση

Για να ξεκινήσουμε, πρέπει να εγκαταστήσουμε 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 Script: Χρησιμοποιήστε 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 παρέχει μια ανταποκρινόμενη και διαδραστική εμπειρία επικοινωνίας.