RxJS subcribe in React js component
Question
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. The following code in vanilla.Js + html is working perfectly.
<!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.
//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. We are using this to receive activities from the bot into our react component and it is originally implemented using RxJS. I am new to React and I have no clue where to insert the following piece of code in a react component.
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. Any Help is appriciated, Thanks in Advance.
1 answers
solution1
0 2017-12-12 23:09:39
Do you have the botframework-webchat module?
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.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.