React实现聊天机器人

本文原创地址链接：http://blog.csdn.net/zhou_xiao_cheng/article/details/52512434，未经博主允许不得转载。

用React实现了一个聊天机器人，结合使用fetch工具对网络数据进行读取，这些数据由图灵API提供。

前期工作

需要注册一个图灵帐号（http://www.tuling123.com/），然后创建机器人，拿到API地址及APIkey,就OK了。

废话不多说，一起来看代码：

class FetchDemo extends React.Component {//构造函数中初始化状态值，meg：输入的值，respon:机器人返回值，megArray:用户发送的值constructor() {super()this.state = {meg: '',respon: [],megArray: []}}//input的onChange绑定事件handleData(e) {this.setState({meg: e.target.value})}//自定义函数，处理发送数据及返回的网络数据的保存操作sendMessage() {var message = this.state.megif(message === ''){alert('不能发送空白消息哦')}else{this.setState({megArray: [...this.state.megArray, message]})//锁定当前环境var that = this//使用fetch工具var func = fetch('http://www.tuling123.com/openapi/api?key=f0d11b6cae4647b2bd810a6a3df2136f&info=' + message, {method: 'POST',type: 'cors'}).then(function(response) {return response.json()}).then(function(detail) {return (that.setState({respon: [...that.state.respon, detail.text]}, () => {//ReactDOM.findDOMNode()找到真正的节点var el = ReactDOM.findDOMNode(that.refs.msgList);el.scrollTop = el.scrollHeight;}))})this.state.meg = ''}}render() {var meg = this.state.megvar megArray = this.state.megArrayvar respon = this.state.responreturn (<div className="content">//ref的使用<div className="msg-list" ref="msgList">{megArray.map((elem,index) => (<div className="container" key={index}><div className="message">{elem}</div><div className="response">{respon[index]}</div></div>))}</div><div className="fixedBottom"><input className="input" value={meg} onChange={this.handleData.bind(this)} /><button className="button" onClick={this.sendMessage.bind(this)}>发送</button></div></div>)}
}ReactDOM.render(<FetchDemo />, document.getElementById('app'))

以上代码的实现都是比较简单的，需要特别说明的是refs，它的使用方法如下：

class Demo extends React.Component {method() {ReactDOM.findDOMNode(this.refs.refName);}render() {return (<div ref="refName"/>)}
}

这是因为，在React中，为了安全（防止XCC等），一个组件类中的render()方法返回的其实并不是真正的DOM（所以render()里面的<div />也不是真正的DOM节点）,它返回的是一棵最终会渲染成HTML的React组件树。那么，当你需要在某个DOM节点做什么的时候，就郁闷了。。。
但是，机智的facebook已经帮你想好解决方法啦，那就是使用refs。在render()方法中，你可以像上面一样，在标签（如<div />等）及组件里使用ref对这个标签或组件进行定位，接着，在组件类定义的方法里，使用ReactDOM.findDOMNode(this.refs.refName)就可以拿到已经渲染成HTML、且被定位了的该节点，然后，你想在该节点做什么（额，剩下就是你自己的事了）。。。

其次，在Demo中，我们使用的fetch工具返回的是一个Promise对象，不了解的可以戳阮兄-Promise对象。

好啦，大公告成，效果如下（发送消息按钮被RERUN遮得差不多了，郁闷…要和小机器人聊天的话，一定不要戳错按钮哦）：

height="585" scrolling="no" src="//codepen.io/zhouxiaocheng/embed/rrVXJm/?height=585&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true" width="100%'">


React实现聊天机器人相关推荐

用React实现小Q聊天机器人
前几篇讲过用Vue实现小Q聊天机器人,既然用了Vue,那React自然也是少不了的,本项目实现效果与vue实现的效果完全一样: GitHub源码:https://github.com/baiyulia ...
让我们聊聊聊天机器人
介绍(Introduction) While surfing a website, you must have come across a popup with an image of a perso ...
创建微信机器人和女朋友聊天_创建聊天机器人
创建微信机器人和女朋友聊天 by Rob Ellis 由Rob Ellis 创建聊天机器人 (Creating a Chat Bot) Human interaction has always fas ...
深度操作系统机器学习_深度学习如何构建情感聊天机器人，第2部分对话系统...
深度操作系统机器学习情感聊天机器人(emotional chatbot) From part 1, we have built the BERT sentiment predictor, we n ...
机器学习做自动聊天机器人_您不应该使用聊天机器人的3个原因
机器学习做自动聊天机器人现在,基于云的聊天机器人几乎是旧技术. 他们已经有四年了. 和接待肯定是混合的 . 上周,几家合作机构的研究人员公布了正式的书面内容,称为``第二次对话智能挑战赛'',这是聊 ...
python 机器人聊天_使用python构建您的第一个聊天机器人并将其集成到电报中
python 机器人聊天 Did you know? 你知道吗? "Chatbots can cut operational costs by up to 30%. eCommerce ch ...
slack 聊天机器人_构建自己的Slack机器人
slack 聊天机器人利用Slack的强大功能,您可以做很多很酷的事情-专用频道,嵌入各种内容,从一个位置搜索所有消息,共享文件和代码,使用许多可用的集成中的一些或自己构建. 在这篇文章中,我将重点 ...
html 简单机器人对话页面,简单的js聊天机器人框架BotUI
Botui是一款简单的js聊天机器人框架.Botui基于Vue.js,通过简单配置,就可以制作出一个功能简单的聊天机器人,非常神奇. 使用方法在页面中引入botui.min.css和botui-th ...
聊天机器人革命即将到来开发者入局需谨慎
10月12日消息,据VentureBeat报道,毫无疑问,聊天机器人是"现在的大事(Now Big Thing)",谁都想从中分一杯羹.可是如果你犯了错误,那可能会伤及自己的企业, ...

React实现聊天机器人

前期工作

React实现聊天机器人相关推荐

最新文章

热门文章