Real-Time İle Sohbet Uygulaması Oluşturma Laravel WebSocket

Bir sohbet uygulaması, web üzerindeki etkileşimli iletişimde nasıl devrim yaratılabileceğinin real-time mükemmel bir örneğidir. Bu makalede, kullanıcılara hızlı yanıt veren ve etkileşimli iletişim deneyimleri sunmak için kullanarak ve kullanarak entegre olan basit bir sohbet uygulaması oluşturmayı inceleyeceğiz. WebSocket real-time Laravel WebSocket laravel-websockets package

Uygulamanın Amaçları

real-time Aşağıdaki özelliklere sahip bir sohbet uygulaması oluşturacağız:

Anında Mesaj Gönderin ve Alın: Kullanıcılar, sayfayı yenilemeye gerek kalmadan anında mesaj gönderip alabilir.

Çevrimiçi Kullanıcı Listesi: Uygulama, çevrimiçi kullanıcıların bir listesini ve sohbet durumlarını görüntüler.

Görüntüler ve Dosyalar Gönder: Kullanıcılar, sohbet içinde görüntü ve dosya paylaşabilir.

Kurulum ve Yapılandırmaya Başlarken

laravel-websockets package Başlamak için, onu kurmamız ve onu entegre olacak şekilde WebSocket yapılandırmamız gerekiyor Laravel. Bu adımları takip et:

Şunları yükleyin laravel-websockets package: package kullanarak yüklemeye başlayın Composer.

composer require pusher/pusher-php-server

Yapılandırma dosyasını yayınlayın: Kurulumdan sonra, ayarları özelleştirmek için yapılandırma dosyasını yayınlayın.

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

Çalıştır migration: için gerekli veritabanı tablolarını oluşturun WebSocket.

php artisan migrate

Sunucuyu başlat WebSocket: Bağlantıları WebSocket yönetmek için sunucuyu başlatın real-time

php artisan websockets:serve

Kullanıcı Arayüzünü Oluşturma

İleti listesini, giriş kutusunu ve çevrimiçi kullanıcıların listesini görüntülemek için HTML, CSS ve JavaScript kullanarak basit bir kullanıcı arabirimi oluşturacağız.

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

entegre WebSocket ve Broadcasting

Uygulama ile Laravel Broadcasting entegre etmek için kullanacağız. WebSocket

Yükle Pusher: Sürücü olarak pusher/pusher-php-server package kullanmak için yükleyin. Pusher Broadcasting

composer require pusher/pusher-php-server

Yapılandır Broadcasting: Dosyada config/broadcasting.php, sürücüyü yapılandırın ve Pusher kimlik bilgilerinizi sağlayın.

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

Bir etkinlik oluşturun ve yayınlayın: Bir ChatMessageSent etkinliği oluşturun ve bir kullanıcı mesaj gönderdiğinde bunu yayınlayın.

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

JavaScript Komut Dosyası: Sunucudan olayları dinlemek ve kullanıcı arayüzünü güncellemek için JavaScript'i kullanın.

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

Çözüm

Bu öğreticiyi tamamlayarak, kullanarak bir real-time sohbet uygulamasını başarıyla oluşturdunuz. Kullanıcılar anında mesaj gönderip alabilir ve nasıl duyarlı ve etkileşimli bir iletişim deneyimi sağladığına tanık oldunuz. WebSocket Laravel WebSocket