React js组件中的RxJS订阅
[英]RxJS subcribe in React js component
问题描述
I am trying to integrate a Microsoft bot framework chatbot into my react website.I am using the directlineJS library with backchannel mechanism to accomplish this. 
我正在尝试将Microsoft bot框架聊天机器人集成到我的react网站中。我正在使用带有backchannel机制的directlineJS库来完成此任务。 The following code in vanilla.Js + html is working perfectly. 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>
I am trying to rewrite the code using ReactJS. 我正在尝试使用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;
I am facing difficulty in implementing the following portion of the code in reactJS. 我在实现reactJS中的以下代码部分时遇到困难。 We are using this to receive activities from the bot into our react component and it is originally implemented using RxJS. 我们正在使用它来接收来自机器人的活动到我们的react组件中，它最初是使用RxJS实现的。 I am new to React and I have no clue where to insert the following piece of code in a react component. 我是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); });
I tried implementing it in componentWillMount() but that didn't work. 我尝试在componentWillMount（）中实现它，但是没有用。 Any Help is appriciated, Thanks in Advance. 希望得到任何帮助，在此先感谢。
1 个解决方案
解决方案1
0 2017-12-12 23:09:39
Do you have the botframework-webchat module? 您有botframework-webchat模块吗？
In addition you can take a look at this article which introduces how to customize web-chat for your websites, including a little code example for embedding webchat into React apps. 另外，您可以看一下这篇文章 ，其中介绍了如何为您的网站自定义网络聊天，包括一个将Webchat嵌入到React应用程序中的小代码示例。
Hope this helps! 希望这可以帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.