在reactJS app

Question

我正在尝试使用StropheJS库连接到XMPP服务器，但无法找到将其集成到reactJS应用程序中的正确方法。现在我通过在node_modules文件夹中的strophe.js包文件中添加此行来导出Strophe对象，从而使我的代码正常工作 module.exports = Strophe; 但我不认为这是正确的方法。有人可以指导我如何去做。 在我的js文件中，我通过添加行导入strophe：

    // This is JS
    import React, { Component } from 'react';    
    import Strophe from "strophe";

    class Login extends Component {
      constructor(){
        super();
        this.state = {
          connection: null
        }
      }
      componentWillMount(){
        this.setState({
          connection : new Strophe.Connection("http://localhost:7070/http-bind/")
        });
      }

我想要一个出路而不修改原始的strophe包文件。如果你想看一下我的完整代码：https://github.com/cravi24/clientApp/blob/master/src/Components/Login.js

Answer 1

  

Strophe的主要目的是启用在任何浏览器中运行的基于Web的实时XMPP应用程序。绑定到窗口对象的客户端库。

使用以下内容在您的React View中使用它。

import React, {Component} from 'react';
import Strophe from "strophe";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      connection: null
    }
  }
  componentWillMount() {
    this.setState({
      connection: new window.Strophe.Connection("http://localhost:7070/http-bind/")
    });
  }

如果要在节点侧使用它。使用Node Strophe及以下是代码段。

// Configuration 
var server = 'bosh.my-server.com';
var jid = 'user@my-server.com';
var password = '';

// Requirements 
var strophe = require("node-strophe").Strophe;
var Strophe = strophe.Strophe;

// Set-up the connection 
var BOSH_SERVICE = 'https://' + server + '/http-bind';
var connection = new Strophe.Connection(BOSH_SERVICE);

// Log XMPP 
connection.rawInput = connection.rawOutput = console.log;

// Connect 
connection.connect(jid, password);

Answer 2

最后找出了我的代码问题。 Strophe是Strophe库中的一个全局对象，只要我在我的react应用程序中导入这个库，它就会成为window对象的一部分。因此我需要像这样使用它：

new window.Strophe.Connection("http://localhost:7070/http-bind/")

而不是

new Strophe.Connection("http://localhost:7070/http-bind/")

早些时候我期待strophe对象在我的类中可用作本地var，但由于它没有在strophe库中导出，所以我无法访问它。

Answer 3

有关另一个参考，您可以从软件包中导入Strophe库并使用 新的Strophe.Connection（“ http://localhost:7070/http-bind/”）这种语法。为此，您需要使用 import“ Strophe.js”中的{Strophe}; 。 这样便可以在没有窗口对象的情况下使用新的 Strophe.Connection 。