React js组件中的RxJS订阅
React js组件中的RxJS订阅
提问于 2017-12-11 12:55:33
我正在尝试将一个微软机器人框架聊天机器人集成到我的react网站中，我正在使用带有反向通道机制的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()中实现它，但不起作用。任何帮助都是有价值的，提前谢谢。
回答 1
Stack Overflow用户
发布于 2017-12-13 07:09:39
你有botframework-webchat模块吗？
此外，你还可以看看this article，它介绍了如何为你的网站定制网络聊天，包括一个将网络聊天嵌入到React应用程序中的小代码示例。
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47746653
复制相关文章
相似问题
腾讯云开发者
