作者：温新

时间：2021-07-31

hi，我是温新，一名PHPer

本系列采用Laravel8.x演示。

由于我在使用基于Redis广播时不成功（无报错、无任何错误日志、广播已触发、服务已在运行、redis数据库无数据），若你知道如何解决，请不吝赐教。

尽管使用起来简单，但是为了完整性，本篇记录使用一个全新的Laravel作为演示记录，遍于理解，更希望走过坑的人避免。

对于私有广播系列，采用一个小型项目的方式进行记录。

基于Vue来演示的Laravel私有广播

需要注意的是，我使用的是PHPStrom，控制台中多开命令行操作。

第一步：创建项目

composer create-project laravel/laravel demo

第二步：安装laravel/ui

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">composer</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">require</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">laravel</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">/</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">ui</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">artisan</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ui</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">bootstrap</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">artisan</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ui</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">vue</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">--</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">auth</span></span>

第三步：安装

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">npm</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">install</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">npm</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">run</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">dev</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">npm</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">run</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">watch</span></span>

第四步：编写vue组件

<span style="box-sizing: border-box;padding-right: 0.1px">// resources/js/components/TopicComponent.vue</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"container"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"row justify-content-center"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">class</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"col-md-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>test vue<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">h3</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">export</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">default</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">name</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"TopicComponent"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">style</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">scoped</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>

第五步：注册vue组件

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// resoucres/js/app.js</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'topic'</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'./components/TopicComponent.vue'</span>).<span style="box-sizing: border-box;color: rgb(0, 0, 0)">default</span>);</span>

第六步：修改登录后的主页

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// resources/views/home.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">@extends</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'layouts.app'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">@section</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'content'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"container"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"row justify-content-center"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"col-md-8"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">topic</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">topic</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">@endsection</span></span>

第七步：配置数据库并生成用户表

1）.env文件中配置数据库

2）生成数据表

php artisan migrate

第八步：注册用户

访问register路由注册两个用户，后面要用到。

到这里，准备工作完成。注册完成后即可看到topic组件中的内容。

我是温新

每天进步一点点，就一点点