在 reactJS 应用程序中使用 stropheJS 库
Working with stropheJS library in reactJS app
我正在尝试使用 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
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);
终于找到了我的代码的问题。 Strophe 是 Strophe 库中的一个全局对象,只要我在我的 React 应用程序中导入这个库,它就会成为 window 对象的一部分。因此我需要像这样使用它:
new window.Strophe.Connection("http://localhost:7070/http-bind/")
而不是
new Strophe.Connection("http://localhost:7070/http-bind/")
早些时候我希望 strophe 对象可以在我的 class 中作为本地变量使用,但由于它没有导出到 strophe 库中,所以我无法访问它。
作为另一个参考,如果您从包中导入 Strophe 库并使用
新 Strophe.Connection("http://localhost:7070/http-bind/") 这种语法。为此,您需要使用 import { Strophe } from "strophe.js";。
这就是在没有 window 对象的情况下使用新的 Strophe.Connection 的方法。
我正在尝试使用 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
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);
终于找到了我的代码的问题。 Strophe 是 Strophe 库中的一个全局对象,只要我在我的 React 应用程序中导入这个库,它就会成为 window 对象的一部分。因此我需要像这样使用它:
new window.Strophe.Connection("http://localhost:7070/http-bind/")
而不是
new Strophe.Connection("http://localhost:7070/http-bind/")
早些时候我希望 strophe 对象可以在我的 class 中作为本地变量使用,但由于它没有导出到 strophe 库中,所以我无法访问它。
作为另一个参考,如果您从包中导入 Strophe 库并使用 新 Strophe.Connection("http://localhost:7070/http-bind/") 这种语法。为此,您需要使用 import { Strophe } from "strophe.js";。 这就是在没有 window 对象的情况下使用新的 Strophe.Connection 的方法。