React+Laravel 全方位构建聊天机器人：后端 Echo 聊天机器人篇

前言

在上一篇文章中，我们已经使用 React hooks 配合 ahooks，用 @livechat/ui-kit 制作了一个仅有 echo 功能的 chatbot。接下来，本篇文章将介绍用 Laravel（PHP 框架）来实现 echo，并让前后端通信。因为在本机调试，并不需要跨域问题。如果放到服务器上，为了解决跨域问题，可以参照上一篇文章中的方法进行设置。

搭建 Laravel 环境

首先，我们需要搭建 Laravel 环境。

composer create-project laravel/laravel chatbot
cd chatbot
php artisan serve

安装 Echo Server

在 Laravel 中，我们使用 laravel/echo-server 包来实现 Echo。

composer require laravel/echo-server

然后，在 .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=YOUR_APP_CLUSTER

你可以在 Pusher 网站上获取这些值。

创建 Echo 事件

接下来，我们需要创建一个 Echo 事件类。

php artisan make:event ChatMessageEvent

这个类将在服务器端触发，当有新的聊天消息时，它将广播该消息到客户端。

配置 Echo Server

在 config/broadcasting.php 文件中，我们需要配置 Echo Server。

'default' => 'pusher',

'connections' => [

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
    ],

],

创建 ChatController

现在，我们需要创建一个 ChatController 来处理聊天消息。

php artisan make:controller ChatController

在这个控制器中，我们将编写一个 sendMessage 方法来处理聊天消息。

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Events\ChatMessageEvent;

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $message = $request->input('message');

        event(new ChatMessageEvent($message));

        return response()->json(['success' => true]);
    }
}

创建聊天前端

在 React 前端中，我们需要安装以下包：

npm install @pusher/chatkit-client

然后，在组件中使用 @pusher/chatkit-client 来连接到 Echo Server。

import { ChatManager, TokenProvider } from '@pusher/chatkit-client';

const tokenProvider = new TokenProvider({
  url: 'http://localhost:8000/api/chat/token',
});

const chatManager = new ChatManager({
  instanceLocator: 'YOUR_INSTANCE_LOCATOR',
  userId: 'YOUR_USER_ID',
  tokenProvider: tokenProvider,
});

在组件中，我们还可以监听 Echo Server 的事件，并在收到新消息时更新聊天记录。

chatManager.on('message', (message) => {
  // 更新聊天记录
});

总结

在这篇文章中，我们介绍了如何使用 Laravel 来实现 Echo，并让前后端通信。我们搭建了 Laravel 环境，安装了 Echo Server，创建了 Echo 事件，配置了 Echo Server，创建了 ChatController，并在 React 前端中使用 @pusher/chatkit-client 来连接到 Echo Server。

通过这些步骤，我们创建了一个完整的聊天机器人系统。希望本文对您有所帮助！