javascript - XMPP Strophe から ReactJS でソケット イベントを取得できません

Question

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);
     });
}