0

我是 React JS 的新手。我正在尝试连接到 XMPP 服务器并从中获取存在、消息事件。之前我只使用纯 JavaScript 并且我能够轻松地做到这一点，但在 React JS 的情况下。

我可以使用以下代码登录到 XMPP 服务器，但是当状态发生变化或有新消息时，我没有得到函数回调或来自套接字连接的事件回调。

我在这里做错了什么？

import React, {Component} from 'react';
import logo from './logo.svg';
import  { Strophe, $pres, $iq } from 'strophe.js'

import './App.css';

var BOSH_SERVICE = 'wss://chat.example.com:7443/ws';
var connection = null;
connection = new Strophe.Connection(BOSH_SERVICE, { 'keepalive': true });

class App extends Component {
 
  constructor(){
    super();
    this.state ={
      string: ""
    }
    console.log("Strophe is "  ,  Strophe);
  }

  componentDidMount() {
    
    connection.connect("user@chat.example.com","rajan", onConnect);
    connection.send($pres().tree());
    connection.addHandler(onMessage, null, 'message', null, null, null);
    connection.addHandler(onPresence, null, "presence");
    console.log("New Connection is " , connection);

  }
  
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

  
}

function onConnect(status) {

  if (status == Strophe.Status.CONNECTING) {
      console.log('Synergy is connecting.');
  } else if (status == Strophe.Status.CONNFAIL) {
    console.log('Synergy failed to connect.');

  } else if (status == Strophe.Status.DISCONNECTING) {
    console.log('Synergy is disconnecting.');
  } else if (status == Strophe.Status.DISCONNECTED) {
    console.log('Synergy is disconnected.');

  } else if (status == Strophe.Status.CONNECTED) {
    console.log('Synergy is connected.');
      // set presence
      connection.send($pres().tree());
      connection.addHandler(onMessage, null, 'message', null, null, null);
      connection.addHandler(onPresence, null, "presence");
    
  }
} 

function onMessage(message){
  console.log("Message is" , message); 
}

function onPresence(presence){
  console.log("Message is" ,presence); 
}
export default App;

在传统的 JavaScript 代码中，下面的代码对我有用。每当我收到消息或用户的状态发生变化时，我都会获取更新。

这是 JavaScript 代码。

var BOSH_SERVICE = 'wss://chat.example.com:7443/ws';
var connection = null;
var con;

$(document).ready(function () {
    connection = new Strophe.Connection(BOSH_SERVICE);  
    connection.rawInput = rawInput;
    connection.rawOutput = rawOutput;
});    

function onConnect(status)
{
    if (status == Strophe.Status.CONNECTING) {
        console.log('Strophe is connecting.');
        
    } else if (status == Strophe.Status.CONNFAIL) {
        console.log('Strophe failed to connect.');
    } else if (status == Strophe.Status.DISCONNECTING) {
        console.log('Strophe is disconnecting.');
    } else if (status == Strophe.Status.DISCONNECTED) {
        console.log('Strophe is disconnected.');
    } else if (status == Strophe.Status.CONNECTED) {
       console.log('Strophe is connected.');
    }
}

function onPresence(presence) {
  
    console.log("Presence changed" , presence);  
    var presence_type = $(presence).attr('type'); // unavailable, subscribed, etc...
    var from = $(presence).attr('from'); // the jabber_id of the contact
  
    var actualjid= from.substr(0, from.indexOf('/')); 
  
    var escaped  = actualjid.replace(/@/g, "_");
    var bareJID  = escaped.replace(/\./g,"_");  
  
    return true;
  }

function onRoster(stanza) {

    $(stanza).find("item").each(function() {
         console.log(" Status " + $(this).attr("jid") +" ::: "+ presense);
     });
}
4

1 回答 1

0

我不熟悉Strophe，但是您有两行在 react 变体中不存在：

    connection.rawInput = rawInput;
    connection.rawOutput = rawOutput;

如果rawInput并且rawOutput实际上是jQuery变体中的函数，那么您还必须在反应变体中提供它们。也就是说，我非常怀疑这是问题所在，所以接下来要尝试一下。反应组件是一个类组件，处理程序我需要绑定。很可能这是根本原因，因此请尝试：


class App extends Component {
 
  constructor(){
    super();
    this.state ={
      string: ""
    }
    console.log("Strophe is "  ,  Strophe);
  }

  onConnect(status) {
    if (status == Strophe.Status.CONNECTING) {
      console.log('Synergy is connecting.');
    } else if (status == Strophe.Status.CONNFAIL) {
      console.log('Synergy failed to connect.');
    } else if (status == Strophe.Status.DISCONNECTING) {
      console.log('Synergy is disconnecting.');
    } else if (status == Strophe.Status.DISCONNECTED) {
      console.log('Synergy is disconnected.');
    } else if (status == Strophe.Status.CONNECTED) {
      console.log('Synergy is connected.');
      // set presence
      connection.send($pres().tree());
      connection.addHandler(this.onMessage.bind(this), null, 'message', null, null, null);
      connection.addHandler(this.onPresence.bind(this), null, "presence");
    }
  } 

  onMessage(message){
    console.log("Message is" , message); 
  }

  onPresence(presence){
    console.log("Message is" ,presence); 
  }

  componentDidMount() {
    connection.connect("user@chat.example.com","rajan", this.onConnect.bind(this));
    connection.send($pres().tree());
    connection.addHandler(this.onMessage.bind(this), null, 'message', null, null, null);
    connection.addHandler(this.onPresence.bind(this), null, "presence");
    console.log("New Connection is " , connection);

  }
  
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;
于 2022-02-19T20:12:32.410 回答