在 reactJS 应用程序中使用 stropheJS 库

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 is primary purpose is to enable web-based, real-time XMPP applications that run in any browser. Client Library which bind to window object.

像下面这样在你的 React 视图中使用它。

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 对象可以在我的 class 中作为本地变量使用，但由于它没有导出到 strophe 库中，所以我无法访问它。

Answer 3

作为另一个参考，如果您从包中导入 Strophe 库并使用 新 Strophe.Connection("http://localhost:7070/http-bind/") 这种语法。为此，您需要使用 import { Strophe } from "strophe.js";。这就是在没有 window 对象的情况下使用新的 Strophe.Connection 的方法。

在 reactJS 应用程序中使用 stropheJS 库

Working with stropheJS library in reactJS app

javascript

strophe

reactjs

如果你想在节点端使用它。使用 `Node Strophe` 下面是代码片段。

在 reactJS 应用程序中使用 stropheJS 库

Working with stropheJS library in reactJS app

javascript

strophe

reactjs

如果你想在节点端使用它。使用 Node Strophe 下面是代码片段。

如果你想在节点端使用它。使用 `Node Strophe` 下面是代码片段。