时间戳

首页 > 解决方案 > 带有 Reactjs 的 Botframework 不适用于 IE11

reactjs - 带有 Reactjs 的 Botframework 不适用于 IE11

问题描述

带有 react 的 botframework 在 IE 中不起作用，

我正在使用类似于
https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react的索引 html 文件，它在 chrome 中工作但不在 IE 中，我也尝试使用 webchat-es5.js。

我正在使用机器人团队提供的令牌。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Integrate with React</title>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <script src="https://unpkg.com/react@16.5.0/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/react-redux@5.0.7/dist/react-redux.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }
      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
    <div id="webchat" role="main"></div>

   <script type="text/babel">
      function start() {
            const { createStore, ReactWebChat } = window.WebChat;
            const { Provider } = window.ReactRedux;
            const store = createStore();

            window.ReactDOM.render(
             <Provider store={ store }>
               <ReactWebChat
                  directLine={ window.WebChat.createDirectLine({ token:'mytoken' }) }
                 storeKey="webchat"
               />
             </Provider>,
             document.getElementById('webchat')
           );

            document.querySelector('#webchat > *').focus();
      }
      start();

    </script>
  </body>
</html>

在 Chrome 中工作但不在 IE 中工作，请有人帮助我。

标签： reactjsbotframeworkchatbotweb-chat

解决方案

不幸的是，“webchat-es5.js”包是为通过该window.WebChat.renderWebChat方法实例化网络聊天而设计的。虽然“webchat.js”包确实允许使用window.ReactDOM.render，但它不是为旧版浏览器设计的，例如 IE。

window.ReactDOM.render尽管使用了任意数量的 polyfill，但我在 IE 中也玩过这个游戏，但根本无法使用 IE 来呈现网络聊天。话虽如此，我能够让托管的 React 网络聊天示例在适当的 React 项目中工作，并进行一些修改。请注意，这也使用了 webpack。

希望有帮助！

index.js：这里没有什么特别或意外的。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import './css/index.css';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

app.js：只是一些必要的路由。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import WebChatView from './webChatView';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact component={WebChatView} />
        </div>
      </Router>
    );
  }
}

export default App;

webChatView.js：呈现网络聊天页面（带有一些必要的样式）

import React, { Component } from 'react';
import WebChatView from './webchatView';

const FragmentStyling = {
  'container': {
    'display': 'flex',
    'justifyContent': 'center'
  },
  'div': {
    'height': '40rem',
    'minHeight': '20rem',
    'width': '1200px',
    'display': 'flex',
    'justifyContent': 'space-around',
    'marginTop': '2rem'
  }
}

class WebChatView extends Component {
  render() {
    return (
      <div style={FragmentStyling.container}>
        <div style={FragmentStyling.div}>
          <WebChatView id="webchat" role="main" />
        </div >
      </div>
    )
  }
}

export default WebChatView;

webchat.js：需要注意的几点：

  1. 要么import '@babel/polyfill'需要包含，要么需要包含下面列出的所有“core-js”导入。Babel 建议只导入所需的 polyfill（以减小包大小）。下面显示的是需要的。但是，使用 '@babel' 选项也可以。
  2. 由于兼容性问题，只需fetch按原样使用中断。可能还有其他选项，但下面的“whatwg-fetch”选项在 IE 和 Chrome 中都有效。我测试的其他人没有。
  3. “获取”令牌需要基于承诺。在 IE 中使用 async/await 会中断 React 网络聊天。
import 'core-js/es6/map';
import 'core-js/es6/promise'
import 'core-js/es6/set';
import 'core-js/es6/symbol';
import 'core-js/fn/array/find-index';
import 'core-js/fn/array/includes';
import 'core-js/fn/math/sign';
import 'core-js/fn/object/assign';
import 'core-js/fn/string/starts-with';

import { fetch as fetchPolyfill } from 'whatwg-fetch';

import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';

export default class WebChat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      directLine: null
    };
  }

  componentDidMount() {
    this.fetchToken();
  }

  fetchToken(token) {
    fetchPolyfill('http://localhost:3500/directline/token', { method: 'POST' })
      .then(res => res.json()) // expecting a json response
      .then(json =>
        this.setState(() => ({
          directLine: createDirectLine(
            {
              token: json.token
            }
          )
        }))
      )
  }

  render() {
    return (
      this.state.directLine ?
        <ReactWebChat
          directLine={this.state.directLine}
        />
        :
        <div>Connecting to bot&hellip;</div>
    )
  }
}

index.html：需要包含“react-polyfill.min.js”包，并且应该在可能存在于此处的任何其他脚本之前。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//pitzcarraldo.github.io/react-polyfill/react-polyfill.min.js" charSet="UTF-8"></script>
    <title>React Web App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

webpack.config.js：需要import 'script!react-polyfill'包含在这个文件的顶部。

import 'script!react-polyfill';

const path = require('path');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'development'
};

推荐阅读