Question

我正在尝试将Microsoft bot框架聊天机器人集成到我的反应网站中。我正在使用带有反向通道机制的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中实现代码的以下部分时遇到了困难。我们使用它来接收从bot到我们的反应组件的活动，它最初是使用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模块吗？

此外，您还可以查看this article，其中介绍了如何为您的网站自定义网络聊天，包括将网络聊天嵌入到React应用中的一些代码示例。

希望这有帮助！

RxJS在React js组件中进行了描述

1 个答案: