Electron中实现`聊天机器人`功能_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": ""
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

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

• 第三步：代码实现

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

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

  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);
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61

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

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

最后：

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147