개시하다

Pusher를 사용하여 Laavel에서 실시간 통신이 가능합니다!
프로그래밍을 시작한 지 4개월이 지났는데 지금까지 가장 어려운 적이기 때문에 메모로 쓰고 싶어요.
※ 본고는 투고를 실시간으로 표시하는 메커니즘을 소개합니다!
※ 푸셔는 웹소스렛을 이용한 양방향 통신을 위한 API 서비스(비슷)
※ 자신이 아직 미숙하기 때문에 같은 수준의 초보자에게 전달하고 싶다.

앱 등록하세요.

push의 회원을 등록한 후 응용 프로그램을 등록합니다.
이번에는 라벨과 JQuery로 실시한다.

등록이 완료되면 Getting Started 페이지로 이동합니다.
많은 필요한 정보가 이 페이지에 기재되어 있다
여러 번 왔다 갔다 하는 형식이 될 것 같아서요.

Laavel 폴더에서 수행

그 하나."/config/app.php"의providers"를 떼어냅니다.

        App\Providers\AuthServiceProvider::class,
        //下記の１行をコメントアウトから外す
        App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,

둘.다양한 설치

composer require pusher/pusher-php-server "~3.0"

npm install --save laravel-echo pusher-js

composier를 사용하여push를 사용할 때 필요한 파일을 설치합니다.
Laavel Echo와 puusherJs를 모두 설치합니다.
resource/js 내bootstrap.js에서push.js와 관련된 기술이 추가되었기 때문에
변경은 다음과 같습니다.

window.Pusher = require("pusher-js");

window.Echo = new Echo({
  broadcaster: "pusher",
  key: "your app key",
  cluster: "ap3",
  encrypted: true
});

3. 엔비에 대한 추기

등록된 Pusher의 Getting Start에 필요한 정보를 입력합니다.env에 기입하다.

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your app id 
PUSHER_APP_KEY=your app key
PUSHER_APP_SECRET=your app secret
PUSHER_APP_CLUSTER=ap3

※ 따옴표는 필요 없습니다.
※BROADCAST_DRIVER 기본값은 PUSHER앱과 분리된 곳이기 때문에 빠뜨리지 않도록 주의해야 한다!

그것조직 이벤트

php artisan make:event Event名

App/Events 내에서 파일을 만들 수 있습니다.
이 파일을 이용해서 Pusher와 작업이 연결됩니다.

<?php

namespace App\Events;

//利用したいデータベースを参照
use App\Post;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class PusherEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    //利用する変数追加
    public $posts;

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('channelName');
    }
}

이용하고 싶은 데이터베이스를 참조하여public로 변수를 얻은 후constant에서 받아들인다.
bradcastOn()에 채널 이름을 지정합니다.(※ 후술)

그 5.채널 연결

route/channel.php에서 다음 내용으로 고칩니다.

<?php
Broadcast::channel('channelName', function (){
    return true;
});

bradcastOn()에 정의된 채널 이름을 기록합니다.

여섯.컨트롤러에서 작업

격식으로 발언 처리를 하는 곳에push 처리를 추가합니다.

 　　　　 // Eloquent モデル
        $posts = new Post;
        $posts->title = $request->title;
        $posts->description = $request->description;
        $posts->save();
        //pusherの処理
    　   event(new PusherEvent($posts));

작업이 끝난 후 form에서 입력한 값이push의 Debag Constore에 도착하면
준비됐습니다.

그 7.실제로 해봤어요.

창 보내기

 <!-- 送信フォーム -->
<form enctype="multipart/form-data" action="" method="POST" class="form-horizontal">
{{ csrf_field() }}
 <!-- postで送る時は必ず {{ csrf_field() }}をつける。セキリュティを上げる為のトークンとして利用 -->
<div class="form-group">
<div class="col-sm-6">
 <input type="text" name="title" class="form-control" placeholder="タイトル" id="title">
 <textarea name="description"  cols="30" rows="10"  class="form-control" placeholder="入力してください" id="description"></textarea>
 </div>
 </div>
 <!-- 登録ボタン -->
<div class="form-group">
 <div class="col-sm-offset-3 col-sm-6">
 <button type="submit" class="btn btn-primary" id="submit">投稿</button>
</form> 
 <!-- 表示される部分 -->
 <td class="table-text" id="board">
 <div><label for="title">タイトル：</label>{{ $write->title }}</div> 
<div><label for="description">内容：</label>{{ $write->description }}</td>

나는 아래의 보도를 참고하여 실시하였다.(정말 고마워요!)
https://nextat.co.jp/staff/archives/213
JS 파트.

$(document).ready(function() {
  $.ajaxSetup({
    headers: {
      "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
    }
  });
  $("#submit").click(function() {
    const url = "/posts";
    $.ajax({
      url: url,
      data: {
        title: $("#title").val(),
        description: $("#description").val(),
      },
      method: "POST"
    });
    return false;
  });
  window.Echo.channel("channelName").listen("PusherEvent", e => {
    $("#board").prepend(
      "<div><label>タイトル：</label>" + e.posts.title + "</div>"
    );
    $("#board").prepend(
      "<div><label>内容：</label>" + e.posts.description + "</div>"
    );
  });
});

window.Echo.채널에 네 개의 이벤트로 만든 채널의 이름을 입력하고, 표시할 때 같은 파일로 정의된 변수를 입력하십시오.
나는 퍼블릭에서 js 파일을 만들어서 보내는 형식으로 읽었다.
로컬에서 두 개의 브라우저를 열고 Form 태그로 만든 입력 표시줄에서 값을 보냅니다.
만약 두 브라우저에 실시간으로 반영할 수 있다면 성공할 것이다.
여기까지 3일이 걸렸는데 완성할 때 참지 못하고 승리 포즈를 취했어요!!!!!

개인이 막다른 골목에 이르다

env와bootstrap.js에 대한 기술 부족 (특히.env의 BROADCACAST DRIVER는 찾기 어렵다)
/JS 파일 읽기 오류
https://qiita.com/u-dai/items/83766b69a0e18488b005
나는 이 보도의 해설을 몰라서 줄곧 고민하고 있다😅
app.js와 2로 추적된bootstrap입니다.발송 형식에서 js를 읽지 않으면 오류가 발생합니다.또한 JS의 버전을 컴파일할 필요가 있으며, 상술한 방법은 이번 해설이다.

참조 기사 및 소스 코드

실장 과정에서 가장 중요한 나무 줄기 부분이 생생하게 설명됐다.
https://nextat.co.jp/staff/archives/213
영어 문서에는 해설 문장과 원본 코드가 매우 많다.
https://github.com/tlaverdure/laravel-echo-server/issues/158
https://github.com/jacurtis/Packt-Laravel-Echo
JS 읽기 오류 시 이쪽 발언 확인
https://stackoverflow.com/questions/52994606/laravel-echo-uncaught-typeerror-cannot-read-property-channel-of-undefined