laravel-websockets를 사용하여 '로우 프로파일' 방송 시스템을 구축하는 방법을 가르쳐주세요.

이 글은 Laravel에 대한 관련 지식을 제공합니다. 주로 laravel-websocket을 사용하여 "낮은 구성" 브로드캐스트 시스템을 구현하는 방법을 소개합니다. 관심 있는 친구들이 꼭 읽어보시기 바랍니다. .

머리말

인터넷에서 여러 튜토리얼을 찾아봐도 성공하지 못하다가, 하나의 튜토리얼에 매달리고 계속 공부해서 마침내 성공했습니다. 그런 다음 나는 나만큼 어리석은 사람들을 돕기 위해 이 튜토리얼을 썼습니다. 또한 독자들에게 오해를 불러일으키지 않기를 바랍니다. 독자들이 내 튜토리얼을 너무 믿지 않기를 바랍니다. 실제로 멍하니 성공했는데, 튜토리얼에 함정이 있을 수도 있습니다. 또 다른 점은 제 연구 과정이 꽤 유익하다고 생각한다는 것입니다. 시간이 충분하다면 직접 연구해 보시는 것도 좋습니다.

튜토리얼 초반에, 이번 튜토리얼에서 소개한 방법을 제가 어떻게 생각해냈는지 간략하게 소개하겠습니다. 튜토리얼을 읽는 사람들은 이 부분에 주의를 기울일 것을 제안합니다. Laravel이나 관련 라이브러리가 업데이트되면 호환되지 않거나 혼란스러워지고 다시 문제가 발생할 수 있다고 생각하기 때문입니다. 그 때에는 독자들이 스스로 조사를 해야 할 수도 있습니다.

왜 일반 소개라고 할까요? 많은 곳이 저의 맹목적인 결과라고 느끼기 때문입니다. 게다가 말로 표현할 수 없는 경험이 필요할 수도 있습니다.

실험 대상의 크기를 줄이고 더 적은 단계로 튜토리얼을 찾아보세요

처음에는 중국어 버전의 공식 문서를 따라했는데 나중에 이것이 너무 복잡해서 만들면 실패할 수도 있다는 것을 알았습니다. 잘못된 단계. 그리고 때로는 오류 메시지조차 나타나지 않을 때도 있습니다. 오류 메시지가 있어도 찾을 수 없거나 전혀 다른 답변이 있는 질문이 너무 많습니다. 규모를 최대한 줄이면 많은 함정을 피할 수 있을 것입니다.

하위 작업의 성공 여부에 대한 피드백을 받을 수 있도록 작업을 분해합니다

처음에는 단계별로 따라해 보다가 마침내 성공했는지 확인해보니 이 방법이 너무 비효율적이었습니다. 그런 다음 일부 하위 단계가 성공 여부를 확인하기 위해 몇 가지 방법으로 판단될 수 있음을 발견했습니다. 예를 들어 laravel-websockets가 성공적으로 설치된 후 대시보드가 ​​열릴 수 있습니다. /laravel-websockets 입니다. 브로드캐스트를 보내는 코드도 있습니다. 성공하면 위에서 언급한 대시보드에서 효과를 확인할 수 있습니다. 마지막으로 모든 것이 성공하면 브라우저에서 효과를 볼 수 있습니다. 그래서 나중에 현 단계에서 성공하지 못하면 계속하지 않고, 이 단계에서 무엇이 잘못됐는지 계속 연구하게 됐어요.

Log more

누락된 매개변수로 인해 클라이언트의 Echo가 전혀 성공적으로 초기화되지 않은 것을 로깅을 통해 발견했습니다. 이전에도 오류 메시지가 있었던 것 같은데, 이해를 못한 것 같습니다. Echo 초기화 전후에 서로 다른 두 개의 Log를 출력해 보니 전자만 실행되고 후자는 전혀 실행되지 않는 것을 발견하여 오류가 발생하면 프로그램이 실행을 멈춘다는 결론을 내렸습니다.

테스트 대상에 최대한 익숙해지도록 노력하세요

예를 들어 특정 오류 보고서에 대한 관련 정보를 찾지 못했습니다. 그런데 나중에 구성에 그 안에 특정 단어가 나오는 걸 발견해서 그냥 구성만 바꿨더니 괜찮더라고요. "캐치되지 않은 옵션 개체는 클러스터를 제공해야 합니다"입니다. 그러다가 인터넷에서 나와 똑같은 방법을 발견했는데, 아마도 그 방법은 예전에 봤던 것 같은데, 포스터에 쓸모없다고 해서 시도하지 않았던 것 같다.

모든 당사자, 특히 성공한 사람들의 포괄적인 정보

사용하기 쉽지 않을 수도 있고 심지어 오해의 소지가 있을 수도 있지만, 더 많은 정보가 문제 해결에 더 도움이 될 것이라고 믿습니다. 예를 들어 Bilibili에서 "laravel Broadcast"를 검색하고 몇 가지 동영상을 시청했습니다. 또한 비공식 문서 튜토리얼도 검색했습니다.

검색 오류 메시지가 쓸모가 없거나 검색 결과가 너무 많으면 코드를 살펴보세요

하지만 이것이 유용할 확률은 낮다고 생각하므로 다른 옵션이 없을 때 그냥 사용하십시오. 이 방법을 통해서 코드의 주석 처리를 해제할 때 한 줄을 덜 주석 처리를 해제했는데, 아주 이상한 오류 메시지가 나타나는 것을 발견했습니다.

성공해도 너무 기뻐하지 말고 몇 번 더 연습하세요

단계가 많을수록 문제가 생기기 쉽습니다. 이 방송 시스템에는 단계가 너무 많습니다. 연습을 많이 할수록 익숙해질 것입니다.

업데이트된 튜토리얼을 선택해보세요

저는 보통 검색엔진에 1년 이내에 조건을 추가합니다.

검색 엔진을 위한 프로그래밍

이번 문제의 절반 이상이 검색 엔진을 통해 해결된 것 같고, 혼자서 완전히 해결한 부분은 거의 없는 것 같았습니다.

Ontology

내 튜토리얼의 일부 측면은 프로젝트 생성으로 시작하고 데이터베이스 구성에 대해서도 언급합니다. 고급 독자는 일부 내용을 무시할 수 있습니다. 고급 독자들에게는 이런 종류의 나의 글을 읽을 필요가 없을 것입니다. 하지만 기본적으로 명령어에 대한 소개가 없습니다. 필요하신 분은 다음 영문 글을 읽어보시길 권합니다.
Memo

공개 채널입니다. 개발 환경에서만 사용된다고 하는 기본 동기화를 사용하는 큐도 있습니다. 간단히 말해서, 내 튜토리얼은 아마도 상당히 형편없을 것입니다. 그러나 그것을 실행해 보면 이를 시작점으로 사용하여 공식 문서에 따라 새로운 구성을 실험하고 새로운 기능을 추가할 수 있을 것입니다.

내 튜토리얼은 주로 Laravel WebSockets 사용 방법 문서를 참조합니다.

프로젝트 만들기

Apache24htdocs 또는 유사한 위치에서 다음 명령을 실행합니다.

composer create-project laravel/laravel bc

프로젝트 경로에서 다음 명령을 실행합니다.

php artisan serve

위 명령을 실행한 후에는 일반적으로 현재 명령줄 창에서 명령을 실행할 수 없습니다. 다시 시작해야 합니다. 명령줄 창. 백그라운드에서 실행되는 명령에 협력하지 않는 한 현재 명령줄 창에서 명령을 계속 실행하려고 합니다.

데이터베이스 정보 구성

테스트를 사용하는 데이터베이스를 구성하기 전에 데이터베이스를 생성해야 합니다. 단, 생성하지 않더라도 마이그레이션 시 생성하라는 메시지가 표시됩니다. 나는 이전에 이 데이터베이스를 삭제한 적이 없기 때문에 이 사실을 거의 잊어버렸습니다.

.env

DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=testDB_USERNAME=rootDB_PASSWORD=1234

데이터베이스의 실제 정보를 주의해서 입력하세요. 내 구성을 복사하지 마세요.

Beyondcode/laravel-websockets

서버측 패키지 설치

프로젝트 경로에서 다음 명령을 실행하세요.

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Install pusher

프로젝트 경로에서 다음 명령을 실행하세요. 아니요, 제가 설치한 버전은 최신 버전이어야 합니다. 원본 텍스트에 특정 버전이 있는 것 같습니다.

Configuring Laravel WebSockets

.env

composer require pusher/pusher-php-server

참고로 제가 언급한 영어 글과도 다릅니다. 저는 강박 장애가 있어서 .env로 변경하는 것이 더 우아하다고 느낍니다. 결국 다른 곳에서는 .env를 먼저 읽습니다. .env는 한 위치를 변경하면 모든 호출 위치를 수정할 필요가 없는 것처럼 느껴집니다. 이전 문장에 뭔가 문제가 있는 것 같습니다. 아마도 그것이 의미하는 것일 수도 있습니다.

두 번째부터 네 번째 항목까지의 값은 아무렇지도 않게 채워져 있으니 다시 한 번 참고해주세요.

Laravel WebSockets 서버 실행

프로젝트 경로에서 다음 명령을 실행하세요:

BROADCAST_DRIVER=pusherPUSHER_APP_ID=12345PUSHER_APP_KEY=ABCDEFGPUSHER_APP_SECRET=HIJKLMNOPPUSHER_HOST=127.0.0.1PUSHER_PORT=6001PUSHER_SCHEME=httpPUSHER_APP_CLUSTER=mt1

이는 또한 실행 후 현재 명령줄 창에서 명령을 입력할 수 없음을 의미합니다. [추천 학습: laravel 동영상 튜토리얼]

후 브라우저 주소 표시줄에 127.0.0.1:8000/laravel-websockets 을 입력하여 이전 작업이 성공했는지 확인하세요. "php artisan Serve"를 통해 서버를 실행하지 않는 경우 포트가 다를 수 있습니다. 연결 버튼을 클릭하고 이벤트 아래에 무언가가 나타나면 단계적으로 성공한 것입니다. 이 웹페이지는 이 기능이 없으면 여는 속도가 매우 느립니다. 적어도 저에게는 매우 느립니다. 다운로드 속도가 매우 느린 js 라이브러리가 있기 때문입니다. 블레이드 템플릿을 변경하는 다음 동작은 선택 사항입니다! 그리고 아래 CDN에 문제가 있는지는 모르겠습니다. 결국 메이저 제조사의 CDN은 아닌 것 같습니다. 너무 느리고 그렇게 하고 싶지 않다면 Vendorbeyondcodelaravel-websocketsresourcesviewsdashboard.blade.php의

php artisan websockets:serve

를

<script  src="https://www.php.cn/link/19e0c9edc141240b5de750fa83ba1bed"></script>

로 바꿀 수 있습니다. 저는 VS를 사용하여 cdn.plot.ly/plotly-latest를 직접 검색했습니다. 코드 검색 기능.min.js 이 파일을 찾았습니다. 게다가 Firefox 개발자 도구 네트워크에서 이 js 라이브러리의 로딩 속도가 느린 것을 발견했습니다. 또한, 그러한 장소에서 파일을 직접 변경하는 것은 우아하지 않습니다.

이벤트 생성

프로젝트 경로에서 다음 명령을 실행하세요:

<script  src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.17.0/plotly.min.js"></script>

appEventsNewTrade.php

php artisan make:event NewTrade

프로젝트 경로에서 다음 명령을 실행하세요:

<?php
namespace App\Events;use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class NewTrade implements ShouldBroadcast{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $trade;

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

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

이 명령을 실행하면 Laravel의 대화형 인터프리터가 시작됩니다. 이해합니다. 몇 가지 명령문을 입력하면 바로 실행할 수 있습니다. 다른 실용적인 명령도 있습니다. 이는 또한 실행 후 현재 명령줄 창에서는 일반 시스템 명령을 입력할 수 없지만 이 명령줄 창 이후에는 PHP 문을 입력해야 함을 의미합니다. 그런데 VS Code의 터미널은 Tinker에서 Ctrl + V를 사용할 수 없지만 마우스 오른쪽 버튼 클릭 기능을 사용하여 붙여넣을 수 있습니다.

그런 다음 위에서 php artisan Tinker가 실행된 명령줄 창에서 다음 명령을 실행합니다.

php artisan tinker

그러면 위에서 언급한 127.0.0.1:8000/laravel-websockets 페이지에서 전송된 메시지를 볼 수 있습니다. 보이면 무대가 성공했다는 뜻이다.

클라이언트 패키지 laravel-echo를 설치하세요

프로젝트 경로에서 다음 명령을 실행하세요.

event (new \App\Events\NewTrade('test'))

resourcesjsbootstrap.js

npm installnpm install --save-dev laravel-echo pusher-js

이 내용도 제가 참고한 영어 글과 다릅니다. 방금 해당 파일에서 해당 항목의 주석 처리를 제거하고 끝에 "cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER" 줄을 추가했습니다.

프로젝트 경로에서 다음 명령을 실행하세요.

import Echo from 'laravel-echo';import Pusher from 'pusher-js';window.Pusher = Pusher;window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,});

이 명령을 실행한 후에는 현재 명령줄 창에 더 이상 명령을 입력할 수 없습니다.

添加客户端脚本

在文件
resources\views\welcome.blade.php
的 head 标签的结尾添加以下代码：

        @vite('resources/js/app.js')        <script>
            window.onload = function(){
                Echo.channel('trades')
                .listen('NewTrade', (e) => {
                    console.log(e.trade);
                });
            };
        </script>
    </head>

注意这里也跟我参考的那篇英文文章不一样。改了两处，一个是导入 app.js 的方法换了。另外套了一层 window.onload。

然后在浏览器的地址栏输入 127.0.0.1:8000/ 启动开发者工具并切换到控制台标签页。然后再在前面运行过 php artisan tinker 的那个命令行窗口中执行以下命令：

event (new \App\Events\NewTrade('test'))

最后切换到前面提到的开发者工具中的控制台标签页，应该能看到一条“test”消息。能看到就说明最终成功了。

结语

我只是个菜狗，不要问我太复杂的问题。我从开始搞这个广播系统到最终成功好像用了两三天的时间，就凭这个时间你应该就能体会到我有多菜了。

最后因为我是菜狗，所以可能会有一些理解上的错误，欢迎指出来。不过按照我的这个教程做基本上应该是会成功的。我做完这个教程自己照着又做了两遍，没问题。不过也可能会因为我没注意到一些东西，或者读者的环境跟我的不一样导致读者不成功。所以我也不敢保证。感觉早晚会失效，失效了如果我没更新的话谁看到了就回复一下提醒一下别人吧。

原文地址：https://learnku.com/articles/74366

위 내용은 laravel-websockets를 사용하여 '로우 프로파일' 방송 시스템을 구축하는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!