Chatify 및 Laravel Livewire를 사용하여 간단한 Laravel 채팅 애플리케이션 만들기

Laravel은 표현력이 풍부하고 우아한 구문을 가진 웹 애플리케이션 프레임워크입니다. 현재 가장 많이 사용되는 PHP 프레임워크입니다. 사용하기 매우 쉽고 개발하려는 거의 모든 종류의 PHP 애플리케이션에 강력합니다.

오늘은 Laravel을 사용하여 실시간 채팅 애플리케이션을 빠르게 구축하는 방법을 보여드리겠습니다.

이 자습서를 계속하려면 다음이 필요합니다.
  • Laravel 프레임워크(애플리케이션 생성, 패키지 설치, 경로 추가 등)에 대한 충분한 이해가 있어야 합니다.
  • Pusher API 계정, 여기에서 만들 수 있습니다Pusher account.
  • 라라벨 제트스트림Read about it here
  • Chatify 패키지, 여기에서 자세한 내용을 읽을 수 있습니다: Chatify docs 또는 보기 Github repo

  • 왜 채팅을 하나요?
    다음은 이 채팅 응용 프로그램을 위한 최고의 선택이 되는 chatify의 일부 기능입니다.
  • 실시간 연락처 목록 업데이트.
  • 즐겨찾기 연락처 목록(좋아요 스토리 스타일) 및 즐겨찾기 버튼에 추가.
  • 저장된 메시지 - Telegram 메신저 앱처럼 온라인에 메시지를 저장합니다.
  • 검색 기능.
  • 연락처 항목의 마지막 메시지 표시기(예: You: ....).
  • 실시간 사용자의 활성 상태입니다.
  • 실시간 타이핑 표시기.
  • 실시간으로 본 메시지 표시기.
  • 실시간 인터넷 연결 상태입니다.
  • 첨부 파일을 업로드합니다(사진/파일).
  • 사진 공유, 대화 삭제. (사용자 정보 오른쪽).
  • 모든 장치에서 반응형 디자인.
  • 사용자 설정 및 채팅 사용자 정의: 사용자의 프로필 사진, 어두운 모드 및 채팅 색상. 간단하고 멋진 UI 디자인으로.

  • Chatify 패키지는 Pusher Api를 사용하므로 Pusher 계정에 새 채널을 설정하고 해당 자격 증명을 Larael ".env"파일에 추가해야 합니다.

    아래 단계에 따라 Pusher 계정에 새 채널을 만들고 앱 키를 Laravel 앱에 연결하십시오.
  • Pusher 대시보드에 로그인하고 채널로 이동하여 새 앱을 만듭니다or click this link.


  • 코드 스니펫을 가져오려면 선호하는 프런트엔드 및 백엔드 언어를 선택하십시오(나중에 변경할 수 있음). 이 앱에서는 프론트엔드와 백엔드로 jQuery와 Laravel을 각각 선택했습니다.


  • 표시된 대로 앱 키로 이동하여 Laravel에 값을 복사합니다
  • .


  • 푸셔 응용 프로그램에서 클라이언트 이벤트 활성화:


  • .env Laravel에서 이 값을 온라인 앱 키에서 복사한 적절한 값으로 바꿉니다.

  • PUSHER_APP_ID=
    PUSHER_APP_KEY=
    PUSHER_APP_SECRET=
    PUSHER_APP_CLUSTER=
    

    튜토리얼을 계속하기 전에 Laravel 앱에서 Laravel Jetstream/Livewire를 설정했는지 확인하고 애플리케이션에서 설정하는 단계를 따르십시오.



    이제 Pusher 세부 정보로 Laravel 앱을 구성하고 애플리케이션에서 Jetstream/Livewire를 설정했으므로 계속해서 Chatify를 설치합니다.

    다음 명령을 실행하여 Chatify를 설치합니다.

    $ composer require munafio/chatify
    


    Chatify 자산, 마이그레이션 및 스토리지 symlink 구성 및 게시:

    $ php artisan chatify:install
    


    마이그레이션 실행:

    $ php artisan migrate
    


    이 모든 작업을 완료하면 애플리케이션을 제공할 수 있습니다.

    php artisan serve
    


    로 이동
    http://127.0.0.1:8000/chatify ,/chatify는 chatify 패키지의 기본 경로이지만 지침에 따라 구성할 수 있습니다here.

    채팅 애플리케이션이 실시간으로 표시되어야 합니다.
    다음은 최종 지원서의 모습을 보여주는 스크린샷입니다.



    이 튜토리얼을 따라 주셔서 감사합니다. 도움이 되셨다면 좋아요 잊지마세요.

    좋은 웹페이지 즐겨찾기