前面的话
最近玩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>