Building a Live Online Chat Room Based on Laravel + Swoole + Vue (P9)

Building a Live Online Chat Room Based on Laravel + Swoole + Vue (P9): Realizing the Chat Function of Customer Service Robots

Earlier we have completed the basic components of user authentication and Websocket server. Next, we formally started to build the core functions of the chat room. First, we will implement the robot chat function. The robot chat backend calls a third-party robot interface. Communication is not based on a Websocket server, but based on the HTTP protocol.

Before we start, we still need to adjust the front-end Muse UI components. Because the previous interface was built based on the Muse UI 2.0 version, there are some problems with the current component display.

Chat room related Muse UI component adjustment

Entry page

The first is the chat room entry page resources/js/pages/Loan.vue. In Muse UI 3.0, mu-list the implementation of the list component has been adjusted, so we need to adjust the template code of this Vue component as follows:

<template>
    <div class="hello">
        <div>
            <mu-list>
                <mu-sub-header>Recent chat history</mu-sub-header>
                <mu-list-item avatar button :ripple="false" @click="chatwindow('1')">
                    <mu-list-item-action>
                        <mu-avatar>
                            <img :src="house1">
                        </mu-avatar>
                    </mu-list-item-action>
                    <mu-list-item-title>Chat room 1</mu-list-item-title>
                    <mu-list-item-action>
                        <mu-icon value="chat_bubble"></mu-icon>
                    </mu-list-item-action>
                </mu-list-item>
                <mu-list-item avatar button :ripple="false" @click="chatwindow('2')">
                    <mu-list-item-action>
                        <mu-avatar>
                            <img :src="house2">
                        </mu-avatar>
                    </mu-list-item-action>
                    <mu-list-item-title>Chat room 2</mu-list-item-title>
                    <mu-list-item-action>
                        <mu-icon value="chat_bubble"></mu-icon>
                    </mu-list-item-action>
                </mu-list-item>
            </mu-list>
            <mu-divider></mu-divider>
            <mu-list>
                <mu-sub-header>Customer service</mu-sub-header>
                <mu-list-item avatar button :ripple="false" @click="chatRobot()">
                    <mu-list-item-action>
                        <mu-avatar>
                            <img :src="robot">
                        </mu-avatar>
                    </mu-list-item-action>
                    <mu-list-item-title>Customer Service Dabai (WeChat group, author contact information, find me)</mu-list-item-title>
                    <mu-list-item-action>
                        <mu-icon value="chat_bubble"></mu-icon>
                    </mu-list-item-action>
                </mu-list-item>
            </mu-list>
        </div>
    </div>
</template>

After the adjustment is complete, run npm run dev recompiled front-end resources, then visit the chat room home http://webchats.test/#/, you can see a list of chat rooms and customer service robot components can be displayed on:

This is image title

Room Page

Next, let’s chat room page components resources/js/pages/Chat.vue and resources/js/pages/Robot.vue that the two are used in page templates mu-icon-button and mu-raised-button button components, while in Muse UI 3.0, these two components to merge mu-button, so we need to adjust these two pages Muse UI button component code.

Revision of the chat room page resources/js/pages/Chat.vue template associated button assembly code is as follows:

<div class="title">
    <mu-appbar title="Title">
        <mu-button icon slot="left" @click="goback">
            <mu-icon value="chevron_left"></mu-icon>
        </mu-button>
      <div class="center">
        to chat with({{Object.keys(getUsers).length}})
      </div>
        <mu-button icon slot="right" @click="openSimpleDialog">
            <mu-icon value="people"></mu-icon>
        </mu-button>
    </mu-appbar>
</div>

...

<mu-button class="demo-raised-button" primary @click="submess">Send</mu-button>

Adjust the robot chat room page resources/js/pages/Robot.vue template associated button assembly code is as follows:

<div class="title">
        <mu-appbar title="Title">
            <mu-button icon slot="left" @click="goback">
                <mu-icon value="chevron_left"></mu-icon>
            </mu-button>
            <div class="center">
            </div>
            <mu-button icon slot="right">
                <mu-icon value="expand_more"></mu-icon>
            </mu-button>
        </mu-appbar>
</div>

...

<mu-button class="demo-raised-button" primary @click="sendmessage">Send</mu-button>

Re-run npm run dev the compiler front-end resources, from chat rooms gateway interface into the general chat rooms and chat room interface robot respectively, it can be seen, page components are properly rendered out:

This is image title

The page component rendering problem is solved. Next, let’s implement the robot chat function.

Robot chat function implementation

Turing Robot Interface

Here we choose the API interface provided by Turing Robot to implement the function of customer service robot. This API interface is http://www.tuling123.com/openapi/api. For detailed access guide of this interface, please refer to the official document introduction: http://www.tuling123.com/help/h_cent_webapi.jhtml , to access this API, you need to register an account on the Turing Robot website, create a robot, and then obtain the API KEY in the specific robot project, and bring this KEY every time you request an interface, otherwise the request will fail.

Note: The default number of test interface calls is very limited. You can choose to increase the number of times through personal certification.

For administrative purposes, we will define an API interface configuration config/services.php in which:

'turingapi' => [
    'url' => 'http://www.tuling123.com/openapi/api',
    'key' => env('ROBOT_KEY')
]

API KEY is sensitive data, the configuration to .env the ROBOT_KEY configuration items inside.

Define Laravel backend API interface

The process of the chat function of the customer service robot is like this:

The user initiates a conversation on the customer service chat room interface;
After Laravel receives the request in the background, it organizes the data format required by the Turing Robot API interface and initiates a request to the Turing API interface;
After receiving the data returned by the Turing API interface, the Laravel background organizes the data format that the front end can parse and send the response information to the user.

As you can see, the Laravel background interface is an intermediary role. In this interface, you need to send HTTP requests and process responses. Here we introduce the Guzzle library as a PHP HTTP client component. Before introducing, download it through Composer:

composer require guzzlehttp/guzzle

After the download is complete, in routes/api.php the definition robot(after user authentication is required to access) route is as follows:

Route::middleware('auth:api')->group(function () {
    Route::get('/user', function (Request $request) {
        return $request->user();
    });
    Route::get('/robot', function (Request $request) {
        $info = $request->input('info');
        $userid = $request->input('id');
        $key = config('services.robot.key');
        $url = config('services.robot.api');
        $client = new \GuzzleHttp\Client();
        $response = $client->request('POST', $url, [
            'json' => compact("info", "userid", "key")
        ]);
        return response()->json(['data' => $response->getBody()]);
    });
});

The business logic is very simple, it is to receive the front-end request parameters, and forward these parameters plus API KEY as request data to the Turing Robot Interface again, and finally forward the information returned by the Turing Robot Interface to the front-end user.

In this way, the back-end interface is written.

Front-end request parameter adjustment

Finally, we open the front of the robot chat interface file resources/js/pages/Robot.vue, where we need to click the send button to send information on the user, put api_token request field, so that the rear end through auth:api user authentication is completed automatically based middleware API interface:

methods: {
    ...
    sendmessage() {
        ...
        const id = this.userid;
        const api_token = this.auth_token;
        const data = {
            info,
            id,
            api_token
        };
        ...
    }
},
computed: {
    ...mapGetters(["getRobotMsg"]),
    ...mapState({
        userid: state => state.userInfo.userid,
        src: state => state.userInfo.src,
        auth_token: state => state.userInfo.token,
    })
},

The code tuning is complete, run npm run dev recompiled front-end resources, then we can test the robot chat.

Test customer service bot chat

Open the chat interface of the customer service robot http://webchats.test/#/robot and send the message as follows:

This is image title

It can be seen white customer service can answer the message we are sending a very intelligent, the number of calls to test the API is very limited, if you see 暂不支持此类对话 this answer, most likely the number of requests has reached the limit, you can select individual authentication methods will be called every day The limit is increased to 100 times.

#laravel #swoole #vue