Real-Time チャットアプリケーションを構築する Laravel WebSocket

チャットアプリケーションは、Web 上のインタラクティブなコミュニケーションに革命をもたらす 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

前の投稿

WebSocket でのインストールと構成 Laravel

次の投稿