푸셔를 사용하여 Laravel에 실시간 알림을 추가하는 방법

이 기사는 Rafie Younes와 Wern Ancheta가 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에!

최신 웹 사용자는 애플리케이션 내에서 발생하는 모든 일을 알 수 있습니다. 당신은 알림 드롭 다운이있는 모든 소셜 미디어 웹 사이트뿐만 아니라 요즘 다른 곳에서도 발견되지 않은 하나의 웹 사이트가되고 싶지 않습니다.

운 좋게도 Laravel과 Pusher와 함께이 기능을 구현하는 것은 산들 바람입니다. 이 튜토리얼에 쓸 코드는 여기에서 찾을 수 있습니다. pusher.com을 통한 이미지

키 테이크 아웃

---

Laravel 및 Pusher를 활용하여 사용자 활동에 대한 즉각적인 피드백을 제공하여 실시간 알림을 구현하고 사용자 상호 작용을 향상시킵니다. 푸셔는 websockets를 사용하여 실시간 양방향 기능의 통합을 단순화하며, 이는 Ajax와의 간격으로 서버를 폴링하는 것보다 더 효율적입니다. 간단한 Laravel 블로그 응용 프로그램을 설정하고 MySQL 데이터베이스를 구성하고 마이그레이션을 사용하여 사용자 상호 작용을위한 팔로워 시스템을 만듭니다. Laravel의 내장 알림 시스템을 사용하여 새로운 팔로어 및 게시물에 대한 알림을 보내 응용 프로그램의 동적 상호 작용 기능을 향상시킵니다. 푸셔를 사용하여 실시간 알림을 구현하여 페이지를 새로 고칠 필요없이 이벤트가 발생할 때 알림을 즉시 수신 할 수 있습니다. 개인 채널 및 인증을 사용하여 실시간 응용 프로그램을 보호하여 의도 된 사용자 만 알림을 받도록하십시오.

실시간 알림 사용자에게 좋은 경험을 제공하기 위해서는 실시간으로 알림을 표시해야합니다. 한 가지 방법은 Ajax 요청을 정기적으로 백엔드로 보내고 최신 알림이 존재하는 경우 가장 새로운 알림을 가져 오는 것입니다. 더 나은 접근 방식은 WebSockets의 힘을 활용하고 전송되는 순간 알림을받는 것입니다. 이것이 우리 가이 튜토리얼에서 사용할 것입니다.

푸셔 푸셔는 의 웹 서비스입니다

그것은 매우 간단한 API를 가지고 있지만 Laravel Broadcasting과 Laravel Echo와 함께 더 간단하게 사용할 것입니다. . 이 자습서에서는 기존 블로그에 실시간 알림을 추가 할 것입니다. 기본 기능은 Stream과 함께 실시간 Laravel 알림과 유사합니다. Christopher Vundi가 만든이 저장소부터 시작하겠습니다. 프로젝트 초기화 먼저 우리는 간단한 라벨 블로그를 복제합니다 :

<span>git clone https://github.com/vickris/simple-blog
</span>

그런 다음 MySQL 데이터베이스를 생성하고 환경 변수를 설정하여 응용 프로그램에 데이터베이스에 액세스 할 수 있습니다. ev.example을 .env로 복사하고 데이터베이스 관련 변수를 업데이트하겠습니다.

.env

<span>cp .env.example .env
</span>

이제 프로젝트 의존성을 로 설치하겠습니다

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

및 마이그레이션 및 파종 명령을 실행하여 데이터베이스를 일부 데이터로 채우십시오.

응용 프로그램 및 방문 /게시물을 실행하면 생성 된 게시물 목록을 볼 수 있습니다. 응용 프로그램을 확인하고 사용자를 등록하고 게시물을 만듭니다. 매우 기본적인 앱이지만 데모를 완벽하게 제공합니다.

사용자 관계를 따르십시오 우리는 사용자가 다른 사용자를 팔로우 할 수있는 능력을 제공하고 사용자가이어야하므로 사용자간에 많은 관계를 만들어야합니다.

. 사용자를 사용자와 관련시키는 피벗 테이블을 만들어 봅시다. 새로운 추종자를 마이그레이션하십시오 :

우리는 해당 마이그레이션에 일부 필드를 추가해야합니다. user_id는 팔로우하는 사용자를 나타내려면 user_id와 팔로우를 따르는 사용자를 나타내는 follows_id 필드입니다. 다음과 같이 마이그레이션을 업데이트하십시오

이제 테이블을 만들기 위해 마이그레이션합시다

스트림 접근 기사를 따른 경우이 시점까지는 상황이 거의 동일하다는 것을 알게 될 것입니다. 다음 부분에서는 다른 접근 방식으로 동일한 추적 기능을 달성 할 것입니다. 사용자 모델에 관계 메소드를 추가하겠습니다

<span>composer install
</span>

<.> app/user.php

php artisan migrate <span>--seed
</span>

이제 사용자 모델에 필요한 관계가 있으므로 추종자는 사용자의 모든 추종자를 반환하고 다음을 반환합니다. 우리는 사용자가 다른 사용자를 팔로우하고 사용자가 특정 사용자를 팔로우하는지 확인하기 위해 일부 도우미 기능이 필요합니다.

<.> app/user.php

완벽합니다. 모델 세트를 사용하면 사용자를 나열해야합니다 리스팅 사용자 필요한 경로를 설정하여 시작하겠습니다

lours/web.php

php artisan make:migration create_followers_table <span>--create=followers
</span>

그러면 이제 사용자를위한 새로운 컨트롤러를 만들 시간입니다.

우리는 인덱스 메소드를 추가 할 것입니다 :

app/http/컨트롤러/UsersController.php

<span>public function up()
</span><span>{
</span>    <span>Schema<span>::</span>create('followers', function (Blueprint $table) {
</span>        <span>$table->increments('id');
</span>        <span>$table->integer('user_id')->index();
</span>        <span>$table->integer('follows_id')->index();
</span>        <span>$table->timestamps();
</span>    <span>});
</span><span>}
</span>

이 방법은보기가 필요합니다. 사용자를 만들어 봅시다. index view 와이 마크 업을 넣으십시오.

리소스/views/user/index.blade.php php artisan migrate

이제 /사용자 페이지를 방문하여 사용자 목록을 볼 수 있습니다.

를 따라 가거나 팔로우하지 않으려면 userController에는 팔로우 및 팔로우가 부족합니다. 이 부분을 마무리하기 위해 완료합시다.

<span>// ...
</span>
<span>class extends Authenticatable
</span><span>{
</span>    <span>// ...
</span>
    <span>public function followers() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'follows_id', 'user_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span>
    <span>public function follows() 
</span>    <span>{
</span>        <span>return $this->belongsToMany(<span>self::</span>class, 'followers', 'user_id', 'follows_id')
</span>                    <span>->withTimestamps();
</span>    <span>}
</span><span>}
</span>

app/http/컨트롤러/UsersController.php

우리는 다음 기능을 수행합니다. 이제 /사용자 페이지에서 사용자를 팔로우하여 팔로우 할 수 있습니다.

알림 Laravel은 여러 채널을 통해 알림을 보내기위한 API를 제공합니다. 이메일, SMS, 웹 알림 및 기타 유형의 알림은 모두 알림 클래스를 사용하여 보낼 수 있습니다. 우리는 두 가지 유형의 알림이 있습니다 :

<: :> 알림 팔로우 : 다른 사용자가 뒤 따르는 경우 사용자에게 전송 게시물 생성 알림 : 새 게시물을 생성 할 때 주어진 사용자의 팔로워에게 전송

사용자는 알림을 따랐다 장인 명령을 사용하여 알림을 위해 마이그레이션을 생성 할 수 있습니다.

이 새 테이블을 마이그레이션하고 만들어 봅시다

우리는 다음 알림으로 시작합니다. 이 명령을 실행하여 알림 클래스를 생성합니다 :

그런 다음 방금 만든 알림 클래스 파일을 업데이트합니다.

• app/altifications/userfollowed.php
• 이 몇 줄의 코드를 사용하면 많은 것을 달성 할 수 있습니다. 먼저이 알림이 생성 될 때 $ 추종자의 인스턴스를 주입해야합니다. VIA 방법을 사용하여 Laravel에게 데이터베이스 채널을 통해이 알림을 보내라고 지시합니다. Laravel이이를 만나면 알림 테이블에 새 레코드가 생성됩니다.
user_id 및 알림 유형이 자동으로 설정되며 확장 할 수 있습니다. 더 많은 데이터가있는 알림. 그것이 바로 Todatabase의 것입니다. 반환 된 배열은 알림의 데이터 필드에 추가됩니다.

마지막으로, 멍청이를 구현함으로써 Laravel 은이 알림을 큐 안에 자동으로 배경으로 실행하여 응답 속도를 높입니다. 나중에 푸셔를 사용할 때 HTTP 통화를 추가 할 것이기 때문에 이것은 의미가 있습니다. 사용자가 따를 때 알림을 시작하겠습니다

app/http/컨트롤러/UsersController.php

우리는 이미 알 수없는 특성을 사용하고 있기 때문에 사용자 모델에서 Notify 메소드를 호출 할 수 있습니다. 알림을 받으려는 모든 모델은 Notify 메소드에 액세스하려면이를 사용해야합니다.

<span>git clone https://github.com/vickris/simple-blog
</span>

알림을 읽으십시오 알림에는 일부 정보와 리소스 링크가 포함됩니다. 예를 들어, 사용자가 새 게시물에 대한 알림을 받으면 알림에 유익한 텍스트를 표시하고 클릭하면 사용자를 게시물로 리디렉션하고 읽기로 표시해야합니다. 우리는 요청에 a? read = notification_id 입력이 있는지 확인하고 읽은대로 플래그를 표시하는 미들웨어를 만들 것입니다. 다음 명령으로 미들웨어를 만들어 보자

그런 다음,이 코드를 미들웨어의 핸들 메소드 안에 넣어 봅시다 :

<span>cp .env.example .env
</span>

app/http/middleware/marknotificationAsread.php 각 요청에 대해 미들웨어를 실행하려면 $ MiddlewareGroups에 추가합니다.

app/http/kernel.php <span>git clone https://github.com/vickris/simple-blog </span>

이 완료되면 몇 가지 알림을 보여 봅시다 알림 표시 Ajax를 사용하여 알림 목록을 표시 한 다음 Pusher로 실시간으로 업데이트해야합니다. 먼저 컨트롤러에 알림 메소드를 추가하겠습니다

app/http/컨트롤러/UsersController.php

이것은 마지막 5 개의 읽지 않은 알림을 반환합니다. 접근하기 위해 경로를 추가하면됩니다.

lours/web.php

이제 헤더에 알림에 대한 드롭 다운을 추가하십시오

<span>cp .env.example .env
</span>

리소스/뷰/레이아웃/app.blade.php

우리는 또한 스크립트 내부에 Global Window.laravel.userid 변수를 추가하여 현재 사용자의 ID를 얻었습니다.

javaScript 및 Sass 우리는 Laravel Mix를 사용하여 JavaScript와 Sass를 컴파일 할 것입니다. 먼저 NPM 패키지를 설치해야합니다

이제이 코드를 app.js에 추가 해 봅시다

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

> app/resources/assets/js/app.js

이것은 단지 초기화 일뿐입니다. 우리는 알림을 사용하여 Ajax 또는 Pusher를 통해 검색되는지 여부에 관계없이 모든 알림 객체를 저장할 것입니다. 당신은 아마 그것을 추측했을 것입니다. notification_types에는 알림 유형이 포함되어 있습니다 다음, Ajax를 통한 알림을 "받으십시오

> app/resources/assets/js/app.js 이를 통해 API로부터 최신 알림을 받고 드롭 다운 안에 넣습니다.

<span>composer install
</span>

내부 ADDNOTIFICATIOS 우리는 현재 알림을 LODASH를 사용하는 새로운 알림과 연결하고 최신 5를 보여줍니다.

작업을 완료하려면 몇 가지 기능이 필요합니다.

> app/resources/assets/js/app.js

이 함수는 모든 알림 문자열을 구축하여 드롭 다운 안에 넣습니다. 알림을받지 못하면 "알림 없음"을 보여줍니다.

도 드롭 다운 버튼에 클래스를 추가하면 알림이 존재할 때 색상이 변경됩니다. Github의 알림과 비슷합니다 마지막으로 일부 도우미는 알림 문자열을 만들기 위해 기능합니다

> app/resources/assets/js/app.js 이제 우리는 이것을 app.scss 파일에 추가하겠습니다 :

php artisan migrate <span>--seed
</span>

> 앱/리소스/자산/sass/app.scss

php artisan make:migration create_followers_table <span>--create=followers
</span>

자산을 컴파일하자 :

지금 사용자를 시도하고 팔로우하면 알림이 나타납니다. 클릭하면 클릭하면 /사용자에게 리디렉션되며 알림은 사라집니다. 새로운 게시물 알림 사용자가 새 게시물을 만들 때 팔로어에게 알릴 것입니다. 알림 클래스를 생성하여 시작하겠습니다

<span>git clone https://github.com/vickris/simple-blog
</span>

다음과 같이 생성 된 클래스를 업데이트하겠습니다

앱/알림/newarticle.php

<span>cp .env.example .env
</span>

다음으로, 우리는 알림을 보내야합니다. 우리가 이것을 할 수있는 몇 가지 방법이 있습니다. 나는 웅변적인 관찰자를 사용하는 것을 좋아합니다.

게시물에 대한 관찰자를 만들고 이벤트를 들어 보겠습니다. App/Observers/PostObserver.php

라는 새로운 클래스를 만들 것입니다

그런 다음 appServiceProvider에 관찰자를 등록하십시오

앱/제공자/appserviceprovider.php

이제 우리는 JS에 표시 될 메시지를 작성해야합니다.

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

> app/resources/assets/js/app.js

<span>composer install
</span>

voilà! 사용자는 다음과 새 게시물에 대한 알림을 받고 있습니다! 계속해서 시도해보십시오!

푸셔로 실시간으로 이동 푸셔를 사용하여 WebSockets를 통해 실시간으로 알림을받을 시간입니다. pusher.com에서 무료 푸셔 계정에 가입하고 새 앱을 만듭니다. 브로드 캐스트 구성 파일 내에서 계정 옵션을 설정하십시오

config/broadcasting.php

php artisan migrate <span>--seed
</span>

그러면 제공자 배열에 AppRovidersBroadcastServiceProvider를 등록합니다

config/app.php

우리는 푸셔의 PHP SDK와 Laravel Echo를 설치해야합니다.

우리는 알림 데이터를 방송되도록 설정해야합니다. userfollowed 알림을 업데이트하겠습니다 :

app/altifications/userfollowed.php 및 NewPost :

앱/알림/newpost.php php artisan make:migration create_followers_table <span>--create=followers </span>

마지막으로해야 할 일은 JS를 업데이트하는 것입니다. app.js를 열고 다음 코드를 추가하십시오

<span>public function up()
</span><span>{
</span>    <span>Schema<span>::</span>create('followers', function (Blueprint $table) {
</span>        <span>$table->increments('id');
</span>        <span>$table->integer('user_id')->index();
</span>        <span>$table->integer('follows_id')->index();
</span>        <span>$table->timestamps();
</span>    <span>});
</span><span>}
</span>

> app/resources/assets/js/app.js

그리고 우리는 여기서 끝났습니다. 알림이 실시간으로 추가되고 있습니다. 이제 앱으로 플레이하고 알림이 어떻게 업데이트되는지 확인할 수 있습니다.

결론 푸셔에는 실시간 이벤트를 수신하는 매우 간단한 API가있어 매우 간단한 API가 있습니다. Laravel 알림과 함께 한 곳에서 여러 채널 (이메일, SMS, 슬랙 등)을 통해 알림을 보낼 수 있습니다. 이 튜토리얼에서는 간단한 블로그에 사용자가 팔로우하는 기능을 추가하고 앞서 언급 한 도구로 향상되어 실시간 기능을 원활하게 실시간으로 제공했습니다.

php artisan migrate

. 푸셔와 라벨 알림에는 더 많은 것이 있습니다. 사용자의 온라인/오프라인 상태를 얻을 수있는 존재 API도 있습니다.

각 문서 (Pusher Docs, Pusher Tutorials, Laravel Docs)를 확인하여 더 깊이 탐색하고 진정한 잠재력을 활용하십시오. 의견 에이 기술로 구축 한 내용을 들어 보겠습니다.

푸셔와 함께 Laravel의 실시간 알림에 대한 자주 묻는 질문 (FAQ) Laravel 및 Pusher Integration의 문제를 해결할 수있는 방법은 무엇입니까?

Laravel 및 Pusher 통합 문제 해결 문제는 특히 플랫폼을 처음 접하는 경우 약간 까다로울 수 있습니다. 가장 먼저해야 할 일은 .env 파일을 확인하여 푸셔 앱 자격 증명이 올바르게 입력되었는지 확인하는 것입니다. 자격 증명이 올바른 경우 푸셔 디버그 콘솔을 사용하여 오류를 확인할 수 있습니다. 여전히 문제가있는 경우 Laravel의 내장 로깅 기능을 사용하여 방송 과정에서 발생하는 오류를 기록 할 수 있습니다. 이렇게하면 문제가 발생하는 위치를 정확히 정확히 찾아 낼 수 있습니다.

모바일 알림에 Laravel과 Pusher를 사용할 수 있습니까?

예, 모바일 알림에 Laravel 및 Pusher를 사용할 수 있습니다. Pusher는 모바일 장치에 알림을 보내는 데 사용할 수있는 REST API를 제공합니다. Laravel의 이벤트 방송 기능을 사용하여 이러한 알림을 트리거 할 수 있습니다. 이벤트가 방송되면 모바일 앱에서 이벤트를 잡아 알림을 표시 할 수 있습니다.

알림 모양을 사용자 정의 할 수있는 방법

알림 모양 사용자 정의가 수행됩니다. 서버 측이 아닌 클라이언트 측. 즉, 알림을 사용자 정의하기 위해 JavaScript, CSS 또는 기타 클라이언트 측 기술을 사용해야합니다. Pusher는 이벤트를 듣고 알림을 표시하는 데 사용할 수있는 JavaScript 라이브러리를 제공합니다. 자신의 CSS와 함께이 라이브러리를 사용하여 알림의 모양을 사용자 정의 할 수 있습니다.

LARAVEL 및 PUSHER 통합을 어떻게 테스트 할 수 있습니까?

LARAVEL 및 PUSHER 통합 테스트를 수행 할 수 있습니다. Laravel의 내장 테스트 기능을 사용합니다. 이벤트를 트리거하는 테스트를 작성한 다음 푸셔 디버그 콘솔을 사용하여 이벤트가 방송되었는지 확인할 수 있습니다. 이벤트 청취자가 올바르게 작동하는지 확인하기 위해 테스트를 작성할 수 있습니다.

LARAVEL 및 PUSHER 통합을 어떻게 확보 할 수 있습니까?

LARAVEL 및 PUSHER 통합을 확보하는 것은 승인되지 않은 액세스를 방지하는 데 중요합니다. 귀하의 데이터. 개인 채널을 사용하여 통합을 보호 할 수 있습니다. 개인 채널에는 인증이 필요하므로 승인 된 사용자 만 구독 할 수 있습니다. Laravel의 내장 인증 기능을 사용하여 인증을 구현할 수 있습니다.

실시간 채팅 애플리케이션에 Laravel 및 Pusher를 사용할 수 있습니까?

예, Laravel 및 Pusher를 실시간 채팅에 사용할 수 있습니다. 응용 프로그램. Pusher는 메시지를 즉시 보내고받는 데 사용할 수있는 실시간 기능을 제공합니다. Laravel의 이벤트 방송 기능을 사용하여 이러한 메시지를 트리거 할 수 있습니다. Laravel 및 Pusher 통합에서 오류를 처리하려면 Laravel의 내장 오류 처리 기능을 사용하여 Laravel 및 Pusher 통합의 처리 오류를 처리 할 수 ​​있습니다. 방송 과정에서 발생하는 예외를 포착하여 그에 따라 처리 할 수 ​​있습니다. 푸셔 디버그 콘솔을 사용하여 오류를 확인할 수도 있습니다.

Laravel 및 Pusher 통합을 최적화하려면 어떻게해야합니까?

LARAVEL 및 PUSHER 통합 최적화를 수행 할 수 있습니다. 방송 된 이벤트. 너무 많은 이벤트를 방송하면 응용 프로그램을 늦추고 많은 리소스를 소비 할 수 있습니다. Laravel의 큐 시스템을 사용하여 백그라운드에서 이벤트를 처리하여 통합을 최적화 할 수 있습니다.

라이브 스트리밍 애플리케이션에 Laravel과 Pusher를 사용할 수 있습니까?

예, Laravel 및 Pusher를 사용할 수 있습니다. 라이브 스트리밍 응용 프로그램. Pusher는 라이브 비디오 스트림을 방송하는 데 사용할 수있는 실시간 기능을 제공합니다. Laravel의 이벤트 방송 기능을 사용하여 이러한 스트림을 트리거 할 수 있습니다.

Laravel 및 Pusher 통합을 모니터링하려면 어떻게해야합니까?

Laravel 및 Pusher 통합 모니터링은 Pusher의 분석 기능을 사용하여 수행 할 수 있습니다. 이러한 기능을 사용하여 보내는 메시지 수, 연결 수 및 기타 중요한 메트릭을 추적 할 수 있습니다. Laravel의 내장 로깅 기능을 사용하여 방송 과정에서 발생하는 오류를 기록 할 수도 있습니다.

위 내용은 푸셔를 사용하여 Laravel에 실시간 알림을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!