Unable to get socket event in ReactJS from XMPP Strophe

Question

I am new to React JS. I am trying to connect to XMPP Server and get the presence, message event from it. Earlier I used just plain JavaScript and I was able to do that easily, but in case of React JS.

I am able to login to XMPP server with the below code, but when presence changes, or there is new message I don't get the function call back or the event call back from socket connection.

What am I doing wrong here ?

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;

In traditional JavaScript code, the below code was working for me. Whenever I would receive a message or the presence changed for the user, I used to get the update.

Here is the JavaScript Code.

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

score 0 · Answer 1 · answered Feb 19 '22 at 20:12

I'm not familiar with Strophe, but you have two lines that do not exist in the react variant:

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

If rawInput and rawOutput are in fact functions in the jQuery variation, then you must also supply them in the react variant. That said, I highly doubt this is the problem so here's the next thing to try. The react component is a class component and the handlers my require binding. Most likely this is the root cause so try:


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;

Unable to get socket event in ReactJS from XMPP Strophe

1 Answers1