In my last post, I created an Echo only Chatbot using @livechat/ uI-kit using React hooks with ahooks.

Next, this article describes how to implement Echo using Laravel (a PHP framework) and let the front and back end communicate.

Because you debug locally, you don’t need cross-domain problems. If you put it on a server, you need to resolve cross-domain issues. Cross-domain matters are covered in a separate article. (In the latest update, there will be cross-domain content in the second half of the article. When debugging, react ports are not consistent with Laravel ports, so as long as you don’t end up generating static files and putting them in Laraval templates, there will be cross-domain problems.)

Install Laravel

The prerequisite is to install php7.3 and PHP’s package management tool composer.

For details, see getcomposer.org/doc/00-intr…

Enter the following command to install the Laravel framework:

composer global require laravel/installer
Copy the code

Generate the botformDashboard project

Create an empty Laravel framework project by entering the following command

composer create-project --prefer-dist laravel/laravel botformdashboard
Copy the code

After that, go to the project directory and start the PHP server:

cd botformdashboard
php artisan serve
Copy the code

At this point, visit http://localhost:8000/ to see the effect:

3. Write routes to complete the echo function

1. Create a controller

php artisan make:controller Chatbot --echo
Copy the code

Open the Http/app/Controllers/Chatbot. PHP, find public function echo function, enter the following contents:

$data = $request->json()->all();
$text = $data['text'];
$echoText = "$text too";
return response()->json($text);
Copy the code

This completes the echo function, but it must also be mounted in the route.

2, in routes/web.php, mount controller:

Route::post('/api/echo'.'Chatbot@echo');
Copy the code

Using curl

curl -i \
    -H "Accept: application/json" \
    -H "X-HTTP-Method-Override: POST" \
    -X POST -d '{"text":"hello"}' \
    http://localhost:8000/api/echo
Copy the code

Or test with HttPIE

Httpie can be installed using any package management tool:

<tool> install httpie
Copy the code
http POST http://localhost:8000/api/echo  text=hello
Copy the code

As a result, an error occurs:

The key errors are:

"message": "CSRF token mismatch."
Copy the code

This is for safety reasons. To do that, simply remove the restriction.

Find the app/Http/Middleware/VerifyCsrfToken. PHP, need to cancel the CSRF is added in the protected $except the name of the function:

protected $except = [
    "echo"
];
Copy the code

Now, continue testing:

http POST http://localhost:8000/api/echo text=hello
Copy the code

You can see that hello Too is returned:

The back-end API is available.

Next comes the integration phase.

Actually removing that validation is problematic because of the security implications, so you need to add some validation if necessary. But here, temporarily do not add, first strive to run through.

4. The front end uses fetch to call echo

Add a code for requesting the Echo service asynchronously in the React project

const requestBot = async(text)=>{
const response = await fetch("http://localhost:8000/api/echo",{
    headers:{
        'Accept': 'application/json'.'Content-Type': 'application/json'
    },
    method:"POST",
    body:JSON.stringify({
        text: text
    })
    });
    console.log(response);
}
Copy the code

The result is an error:

So it’s cross-domain.

Next, install the CORS plugin in Laravel:

composer require fruitcake/laravel-cors
Copy the code

Then, generate the CORS configuration file:

php artisan vendor:publish --tag="cors"
Copy the code

Next, put the app/Http/Middleware/VerifyCsrfToken PHP file defined in the echo into API / *

protected $except = [
    "api/*"
];
Copy the code

In app/Console/ kernel.php, add:

protected $middleware = [
    \Fruitcake\Cors\HandleCors::class,
];
Copy the code

In addition, it takes effect globally. Now react will send normally.

Five, the final effect and source code:

Laravel (PHP) back-end source code: github.com/botform/das…

React front-end source code github.com/botform/bot