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

결론

이 자습서를 완료하면 in을 real-time 사용하여 채팅 애플리케이션을 성공적으로 구축했습니다. 사용자는 즉시 메시지를 보내고 받을 수 있으며 응답성이 뛰어난 대화형 통신 환경을 제공하는 방법을 목격했습니다. WebSocket Laravel WebSocket