設(shè)置Laravel并安裝依賴項(xiàng)，包括Laravel Sanctum和Laravel Echo。 2。將Pusher配置為.env中的廣播驅(qū)動程序，并啟用廣播服務(wù)器。 3。創(chuàng)建一個(gè)帶有遷移的消息模型，其中包括用戶_ID和消息字段。 4。使用Laravel的內(nèi)置系統(tǒng)實(shí)現(xiàn)身份驗(yàn)證。 5。創(chuàng)建一個(gè)消息事件，該事件實(shí)現(xiàn)應(yīng)橫掃并使用PresenceChannel進(jìn)行在線用戶跟蹤。 6.構(gòu)建一個(gè)使用方法來獲取和發(fā)送消息的方法，廣播消息事件。 7.設(shè)計(jì)帶有刀片或VUE的前端，集成Laravel Echo，并聆聽實(shí)時(shí)活動。 8。編譯資產(chǎn)，運(yùn)行服務(wù)器并跨多個(gè)用戶測試實(shí)時(shí)消息傳遞。 Laravel中的實(shí)時(shí)聊天應(yīng)用程序通過推動器和Laravel Echo成功構(gòu)建，從而實(shí)現(xiàn)了即時(shí)消息廣播和動態(tài)UI更新。

通過將Laravel的后端功能與使用WebSocket的實(shí)時(shí)廣播相結(jié)合，可以通過Laravel構(gòu)建實(shí)時(shí)聊天應(yīng)用程序。這是一份實(shí)用指南，可幫助您逐步創(chuàng)建功能性的實(shí)時(shí)聊天應(yīng)用程序。

1。設(shè)置Laravel和Laravel Echo服務(wù)器

首先創(chuàng)建一個(gè)新的Laravel項(xiàng)目：

作曲家創(chuàng)建項(xiàng)目Laravel/Laravel實(shí)時(shí)聊天
CD實(shí)時(shí)聊天

安裝Laravel Sanctum進(jìn)行API身份驗(yàn)證（如果使用水療中心）或使用Laravel的內(nèi)置會話AUTH：

作曲家需要Laravel/Sanctum
PHP工匠供應(yīng)商：出版-provider =“ Laravel \ Sanctum \ SanctumserviceProvider”
PHP工匠遷移

安裝Laravel Echo和Pusher JS以進(jìn)行客戶端廣播：

 NPM安裝 - 彈藥laravel-echo推動器-JS

注意： Laravel Echo允許您的JavaScript收聽Laravel的廣播活動。

2。使用推動器進(jìn)行實(shí)時(shí)廣播

Laravel支持幾個(gè)廣播司機(jī)（Redis，Pusher，Soketi）。 Pusher是為初學(xué)者設(shè)置的最簡單的之一。

配置廣播

在.env中，設(shè)置：

 Broadcast_Driver = Pusher
pusher_app_id = your_app_id
pusher_app_key = your_app_key
pusher_app_secret = your_app_secret
pusher_app_cluster = mt1

在config/broadcasting.php中，請確保推送器設(shè)置正確。

啟用廣播

在bootstrap/app.php中取消注釋：

 App \ Provister \ BroadcastServiceProvider :: class，class，

3。創(chuàng)建聊天模型和遷移

生成Message模型：

 PHP工匠制造：模型消息-M

在遷移文件中：

 schema :: create（'消息'，函數(shù)（藍(lán)圖$ table）{
    $ table-> id（）;
    $ table-> unsignedBiginteger（'user_id'）;
    $ table-> text（'消息'）;
    $ table-> timestamps（）;

    $ table->外國（'user_id'） - > references（'id'） - > on（'用戶'） - > ondelete（'cascade'）;
}）;

運(yùn)行遷移：

 PHP工匠遷移

4。設(shè)置身份驗(yàn)證

使用Laravel的內(nèi)置身份驗(yàn)證：

 PHP Artisan Make：Auth

對于Laravel 8，您可能需要使用laravel/ui ：

作曲家需要Laravel/UI
PHP Artisan UI Vue-作者
NPM運(yùn)行開發(fā)

5。創(chuàng)建廣播活動

生成一個(gè)新事件：

 PHP Artisan Make：事件消息人

編輯app/Events/MessageSent.php ：

 <？php

名稱空間應(yīng)用\事件;

使用Illuminate \ Broadcasting \ Channel;
使用Illuminate \ Broadcasting \ InteractswithSockets;
使用Illuminate \ Broadcasting \ PresenceChannel;
使用Illuminate \ Broadcasting \ PrivateChannel;
使用Illuminate \ Contracts \ Broadcasting \ shoseBroadcast;
使用Illuminate \ Foundation \ Events \ Dispatchable;
使用照明\隊(duì)列\(zhòng) serializeSmodels;
使用App \ Models \ Message;

class Messageentsmentness shosshoadboadcast
{
    使用可調(diào)度的，Interactswithsocket，序列化模型；

    公共消息；

    公共功能__construct（消息$消息）
    {
        $ this-> message = $消息;
    }

    公共功能廣播（）
    {
        返回新的PresenceChannel（&#39;Chat&#39;）;
    }

    公共功能broadcastWith（）
    {
        返回 [
            &#39;id&#39;=> $ this-> message-> id，
            &#39;user_id&#39;=> $ this-> message-> user_id，
            &#39;消息&#39;=> $ this-> message->消息，
            &#39;create_at&#39;=> $ this-> message-> create_at，
        ];
    }
}

使用PresenceChannel可讓您查看誰在線。您還可以根據(jù)您的需求使用PrivateChannel或Channel 。

6。創(chuàng)建聊天控制器

PHP Artisan Make：Controller ChatController

添加方法以獲取消息并發(fā)送消息：

使用App \ Models \ Message;
使用app \ events \ messageent;

公共功能fetchMessages（）
{
    返回消息:: with（'user'） - >最新（） - > limit（100） - > get（） - > recters（）;
}

公共功能sendmessage（請求$請求）
{
    $ message = auth（） - > user（） - > message（） - >創(chuàng)建（[[
        '消息'=> $ request->消息
    ）;

    廣播（new Messageent（$ message）） - > tohothors（）;

    返回['status'=>'消息發(fā)送！'];
}

在routes/web.php中添加路由：

使用App \ HTTP \ Controllers \ ChatController;

路由:: middleware（['auth']） - > group（function（）{
    路由:: get（'/chat'，function（）{
        返回視圖（'Chat'）;
    }）;
    路由:: get（'/sakse'，[chatcontroller :: class，'fetchMessages']）;
    route :: post（'/messages'，[chatcontroller :: class，'sendmessage']）;
}）;

7。構(gòu)建前端（刀片或VUE）

創(chuàng)建一個(gè)簡單的chat.blade.php ：

 <div id =“ app”>
    <ul ID =“消息”>
        <li v-for =“消息中的消息”>
            <strong>@{{message.user.name}}：</strong>
            @{{messages.message}}}
        </li>
    </ul>

    <輸入
        V-Model =“ newmessage”
        @keyup.enter =“ sendmessage”
        占位符=“鍵入消息...”
        type =“ text”
    >
</div>

<script src =“ {{asset（&#39;js/app.js&#39;）}}}”> </script>

在resources/js/bootstrap.js或app.js中初始化Laravel Echo：

從“ laravel-echo”中導(dǎo)入回聲；

window.pusher = require（'pusher-js'）;

window.echo =新回聲（{
    廣播公司：“推動器”，
    鍵：process.env.mix_pusher_app_key，
    群集：process.env.mix_pusher_app_cluster，
    forcetls：是的，
    authendpoint：'/broadcasting/auth'，
}）;

確保在.env中露出推動器密鑰：

 mix_pusher_app_key =“ $ {pusher_app_key}”
mix_pusher_app_cluster =“ $ {pusher_app_cluster}”

然后在您的VUE/JS邏輯中：

 const app = new vue（{{
    EL：'#App'，
    數(shù)據(jù)： {
        消息：[]，
        newmessage：''
    }，，
    安裝（）{
        this.fetchMessages（）;

        window.echo.join（'chat'）
            。here（（用戶）=> {
                console.log（'在線用戶：'，用戶）;
            }））
            .listen（'messagesent'，（e）=> {
                this.messages.push（e.message）;
            }）;
    }，，
    方法： {
        fetchMessages（）{
            axios.get（'/sexings'）。然后（響應(yīng)=> {
                this.messages = response.data;
            }）;
        }，，
        sendmessage（）{
            axios.post（'/messages'，{消息：this.newmessage}）
                然后（響應(yīng)=> {
                    this.newmessage ='';
                }）;
        }
    }
}）;

8。運(yùn)行和測試

編譯資產(chǎn)：

 NPM運(yùn)行開發(fā)

啟動Laravel開發(fā)服務(wù)器：

 PHP手工藝品

打開兩個(gè)瀏覽器窗口，登錄不同的用戶，然后測試實(shí)時(shí)消息傳遞。

最后筆記

• 為了生產(chǎn)，請通過身份驗(yàn)證保護(hù)您的廣播路線。
• 考慮限制消息發(fā)送消息。
• 使用PresenceChannel向在線用戶或PrivateChannel展示一對一聊天。
• 對于自托管Websocket服務(wù)器，請考慮使用Soketi而不是推送器。

一旦您了解流程，在Laravel構(gòu)建實(shí)時(shí)聊天應(yīng)用程序就不會太復(fù)雜：
用戶發(fā)送消息→控制器保存它→事件廣播→Echo Listens和更新UI。

借助Laravel Echo和Pusher，大多數(shù)辛勤工作都被抽象了，使您專注于UI和用戶體驗(yàn)。

基本上，就是這樣 - 您進(jìn)行了實(shí)時(shí)聊天。

以上是如何與Laravel構(gòu)建實(shí)時(shí)聊天應(yīng)用程序？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！