Electron中实现`聊天机器人`功能

前面的话

最近玩Electron，实现了一个聊天机器人功能，下面介绍该功能如何实现。
项目接口调用的是图灵机器人的api。

功能展现

项目模块功能大致就是这样的：

步骤

• 第一步：注册并新建机器人然后获取APIKEY（官方文档）。TuringRobot 官方给出了详细的Web API-帮助中心 ，使用流程中包含注册账号，获取APIKEY，请求方式等详细信息，最初开发者在使用的时候不妨详细阅读此卡发文档。文档内有详细说明。
  

• 第二步： 准备工作（以下4点都要遵循）
  1、编码方式：UTF-8（调用图灵API的编码方式均为UTF-8）
  2、接口地址：http://openapi.tuling123.com/openapi/api/v2
  3、请求方式：HTTP POST
  4、请求参数：格式为 json

  官方示例：请求参数的格式：

  {
  	"reqType":0,
      "perception": {
          "inputText": {
              "text": "附近的酒店"
          },
          "inputImage": {
              "url": "imageUrl"
          },
          "selfInfo": {
              "location": {
                  "city": "北京",
                  "province": "北京",
                  "street": "信息路"
              }
          }
      },
      "userInfo": {
          "apiKey": "",
          "userId": ""
      }
  }
  

  也就是说：我们请求的参数一般由下面这几个属性构成：
  5、响应输出的参数，请求成功后返回的数据如下。小柒这里直接获取results下面的text值。
  

• 第三步：代码实现

  1、当点击发送按钮后，渲染进程的ipcRenderer发送http-request事件告知主进程发起http请求，并将发送的信息传给主进程：

   	// 通知主进程发请求
     ipcRenderder.send('http-request', {
          text: this.msg  // 这里的msg就是你在输入框中输入的信息
      })
  

  2、 主进程监听到http-request事件后，发起http请求：

  const http = require('http');
  let server = null;
  
  // 监听http-request事件
  ipcMain.on('http-request', (e, config) => {
    if (!server) {
        httpRequest(config);
    }
  });
  
  function httpRequest(config) {
    let info = combineInfo(config);
    console.log(info);
    // 请求配置
    var options = {  
        hostname: 'openapi.tuling123.com',
        path: '/openapi/api/v2',
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    };
  
    var robotServer = http.request(options, function (res) {
        let data = '';
        res.setEncoding('utf8');  
        // console.log('STATUS: ' + res.statusCode);
        res.on('data', function (chunk) {
            data += chunk;
        });  
        res.on('end', function() {
            // 接受完成，发送给页面
            mainWindow.webContents.send('http-response', {
              dataStr: data
            });
           // console.log('datadatadatadatadata: ' + data);
        })
    });
  
    robotServer.write(info);
    robotServer.end();  
  }
  
  // 将输入的信息整合成正确的请求参数信息
  function combineInfo(config) {
    let info = config.text,
      msg = {
      "reqType":0,
      "perception": {
          "inputText": {
              "text": info
          }
      },
      "userInfo": {
          "apiKey": "ece8ccf9c4e44520ba5b28cbafa04940",
          "userId": ~~(Math.random() * 99999)
      }
    };
    // 返回json类型
    return JSON.stringify(msg);
  }
  

  3、渲染进程监听到http-response事件之后，就可以获取响应获得的数据：

    // 监听主进程发回的消息
        ipcRenderder.on('http-response',(event,data)=>{
         // console.log('aa');
         //  获取响应的数据(json字符串转对象)
        let response = JSON.parse(data.dataStr).results[0].values.text;
   });
  

最后：

附上整个机器人模块组件的完整代码：

<template>
    <div>
        <div class="content-box">
            <div class="content-msg-box"
                 v-for="(mg, msgID) in talk" :key="msgID">
                 <p :class="[mg.belongTo + '-msg']">{{mg.content}}</p>
            </div>
        </div>

        <div class="message-box">
            <input type="text" 
                    v-model="msg" 
                    class="message-input"
                    placeholder="输入信息"
                    @keypress.enter="sendToRobot"/>
            <el-button   size="medium" class="message-button" @click.native="sendToRobot">发送</el-button>
        </div>
       
    </div>
   
</template>
<script>
const ipcRenderder = require('electron').ipcRenderer;
let _this = null;
    export default {
        data() {
            return {
                msg: '',// 用户输入的内容
                talk:[] ,// 当前的聊天记录,
                msgID: 1
            }
        },
        methods: {
            sendToRobot () {
                if(!this.msg){
                    this.$message('您没有输入内容');
                    return;
                }
                 // 通知主进程发请求
                ipcRenderder.send('http-request', {
                    text: this.msg
                })
                // 点击发送或者回车，向talk中插入一条my msg
                this.talk.push({
                    msgID: this.msgID,
                    content: this.msg,
                    belongTo: 'my'

                })
                this.msgID ++ ;
                this.msg = '';
               
            }
        },
        mounted() {
            _this = this;
            // 组件挂载时，向对话框中插入一条robot的msg
            this.talk.push({
                msgID: 0,
                content: '你好啊',
                belongTo: 'robot'
            });

            // 监听主进程发回的消息
            ipcRenderder.on('http-response',(event,data)=>{
                // console.log('aa');
                //  获取响应的数据(json字符串转对象)
                let response = JSON.parse(data.dataStr).results[0].values.text;
                _this.talk.push({
                    msgID: _this.msgID,
                    content: response,
                    belongTo: 'robot'
                });
                _this.msgID++;
            });

        }
    }
</script>
<style lang="scss" scoped>
.content-box {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 3em;
    left: 0px;
    padding: 20px;
    overflow: scroll;
 }
.content-msg-box {
    overflow:hidden;
    width: 100%;
    margin-bottom: 1em;
    p {
        max-width: 60%;
        padding: 5px 10px;
        border-radius: 5px;
        word-wrap: break-word;
        word-break: break-all;
    }
    .robot-msg {
        float: left;
        background-color: pink;
    }
    .my-msg {
        float: right;
        background-color:  #DCDFE6;
    }
}

.message-box {
    padding: 5px;
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0px;
    height: 2em;
    line-height: 2em;
    border-top: 1px solid  #DCDFE6;
    background-color:#EBEEF5;
    .message-input {
        border: 1px solid #ccc;
        height: 2em;
        line-height: 2em;
        padding: 0 10px;
        border-radius: 6px;
        display: block;
        margin-right: 60px;
        width: -webkit-fill-available;
        &:focus {
            outline: none;
        }
    }
    .message-button {
        background-color: pink;
        padding: 0px;
        width: 3.6em;
        height: 2.4em;
        line-height: 28px;
        position: absolute;
        top: 0.2em;
        right: 0.2em;
        color: #fff;
        bottom: 0.2px;
    }
}
</style>