React js组件中的RxJS订阅

Question

我正在尝试将Microsoft bot框架聊天机器人集成到我的react网站中。我正在使用带有backchannel机制的directlineJS库来完成此任务。 vanilla.Js + html中的以下代码运行正常。

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Bot Chat</title> <link href="../../botchat.css" rel="stylesheet" /> </head> <body> <section class="example"> <h2>Type a color into the Web Chat!</h2> <button onclick="postButtonMessage()" style="height: 60px; margin-left: 80px; margin-top: 20px; padding: 20px; width: 120px;">Click Me!</button> </section> <div id="BotChatGoesHere"></div> <script src="../../botchat.js"></script> <script> const params = BotChat.queryParams(location.search); const user = { id: params['userid'] || 'userid', name: params['username'] || 'username' }; const bot = { id: params['botid'] || 'botid', name: params['botname'] || 'botname' }; window['botchatDebug'] = params['debug'] && params['debug'] === 'true'; const botConnection = new BotChat.DirectLine({ domain: params['domain'], secret: params['s'], token: params['t'], webSocket: params['webSocket'] && params['webSocket'] === 'true' // defaults to true }); BotChat.App({ bot: bot, botConnection: botConnection, // locale: 'es-es', // override locale to Spanish user: user }, document.getElementById('BotChatGoesHere')); botConnection.activity$ .filter(function (activity) { return activity.type === 'event' && activity.name === 'changeBackground'; }) .subscribe(function (activity) { console.log('"changeBackground" received with value: ' + activity.value); changeBackgroundColor(activity.value); }); function changeBackgroundColor(newColor) { document.body.style.backgroundColor = newColor; } function postButtonMessage() { botConnection .postActivity({ from: { id: 'me' }, name: 'buttonClicked', type: 'event', value: '' }) .subscribe(function (id) { console.log('"buttonClicked" sent'); }); }; </script> </body> </html>

我正在尝试使用ReactJS重写代码。

 //Dependencies import React, { Component } from 'react'; import {Icon} from 'react-materialize'; import { Link } from 'react-router-dom'; import { Chat } from 'botframework-webchat'; import { DirectLine } from 'botframework-directlinejs'; //Internals import PRODUCTS from '../Data'; import './styles.css'; class General extends Component { constructor(){ super() this.directLine = new DirectLine({ secret: "DirectLine_KEY" }) } componentWillMount (){ this.directLine.activity$ .subscribe(activity => console.log(activity)); render() { const current_category = this.props.match.params.cat; console.log(current_category) return( <div className="general"> <div className="chatbot" id="botGoesHere"> <Chat directLine= {this.directLine} user={{ id: 'user_id', name: 'user_name' }}/> </div> <div className="General Box"> <div className="general-title"> <h4>Matched Products</h4> </div> </div> </div> ); } } export default General;

我在实现reactJS中的以下代码部分时遇到困难。 我们正在使用它来接收来自机器人的活动到我们的react组件中，它最初是使用RxJS实现的。 我是React的新手，我不知道将以下代码插入React组件的位置。

 botConnection.activity$ .filter(function (activity) { return activity.type === 'event' && activity.name === 'changeBackground'; }) .subscribe(function (activity) { console.log('"changeBackground" received with value: ' + activity.value); changeBackgroundColor(activity.value); });

我尝试在componentWillMount（）中实现它，但是没有用。 希望得到任何帮助，在此先感谢。

Answer 1

您有botframework-webchat模块吗？

另外，您可以看一下这篇文章，其中介绍了如何为您的网站自定义网络聊天，包括一个将Webchat嵌入到React应用程序中的小代码示例。

希望这可以帮助！

React js组件中的RxJS订阅

问题描述

1 个解决方案

解决方案1
0 2017-12-12 23:09:39

React js组件中的RxJS订阅

问题描述

1 个解决方案

解决方案1 0 2017-12-12 23:09:39

解决方案1
0 2017-12-12 23:09:39