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