이런 느낌

Pusher란?

Pusher는 웹 서버에서 RESTful API를 전송하여
클라이언트와 websocket 통신을 해주는 멋진 서비스입니다.

Pusher 등록

먼저, 여기로 로그인하십시오.

GitHub 계정으로 로그인할 수 있습니다.

앱 이름은 자유롭게 부디
3은 JS, 4는 이번에는 Laravel을 선택합니다.

만든 후 app keys를 기록해 둡니다.

Laravel 측

config

먼저 config/app.php의 175행 근처에

App\Providers\BroadcastServiceProvider::class,

의 코멘트를 제거

.env

.env 변경

BROADCAST_DRIVER pusher

여기에서 pusher의 app keys 값을 써 갑니다.

PUSHER_KEY에 key
PUSHER_SECRET에 secret
PUSHER_APP_ID에 app_id

각각 작성

Pusher 사용

pusher를 사용하기 위해

composer require pusher/pusher-php-server

실행

또한 브로드캐스트 이벤트를 위해 이벤트 클래스를 만듭니다.

php artisan make:event PusherEvent

app/Events/아래에 만들어집니다

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class PusherEvent
{
    use InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('channel-name');
    }
}

이것을


<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

use Illuminate\Console\Scheduling\Event;

class PusherEvent extends Event implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return ['my-channel'];
    }
}

로 변경

js 측에 보내고 싶은 정보를 public 변수에 건네주면 브로드 캐스트됩니다

route.php

Route::get('/', function() {
    return view('pusher');
});

Route::get('/pusher', function() {
    event(new App\Events\PusherEvent('こんにちわ!'));
});

로 변경

JS측

pusher.blade.php 만들기

<!DOCTYPE html>
<html>
<head>
    <title>Pusher</title>
</head>
<body>
<input type="button" value="push" onclick='push()'>
<ul id="messages"></ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://js.pusher.com/3.1/pusher.min.js"></script>
<script>
    //Pusherキー
    var pusher = new Pusher( '{{ env('PUSHER_KEY') }}' , {
        encrypted: true
    });

    //LaravelのEventクラスで設定したチャンネル名
    var channel = pusher.subscribe('my-channel');

    //Laravelのクラス
    channel.bind('App\\Events\\PusherEvent', addMessage);

    function addMessage(data) {
        $('#messages').prepend(data.message);
    }

    function push(){
        $.get('/pusher');
    }
</script>
</body>
</html>

push 버튼을 누르면 '안녕하세요! '이 추가됩니다!

질문 등 있으면 부디!

Reference

이 문제에 관하여(laravel5.3에서 websocket 통신 자습서 (Pusher)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sizukutamago/items/007c281670a17e09f74b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다