Unable to connect to ejabberd server using strophe js while using a async

Question

I am attempting to connect to the Ejabberd server using StropheJS after executing an async action to get JWT token from the backend. Whenever I use async/await functions before making connection in strophe it shows the following issue,

WebSocket connection to 'wss://localhost:5443/ws/' failed,

Below is my code with which I am trying:

var url = 'wss://localhost:5443/ws/';
var JID = 'test@localhost';
var connection = null;

async function connectWithToken() {
  getJWTToken(JID)
  .then((jwtToken) => {
     connection = establishStropheConnection(jwtToken);
  })
  .catch((error) => {
    console.error('Error fetching JWT token:', error);
  });
}

// Function to fetch JWT token from the server for a given JID
async function getJWTToken(jid) {
  // Replace with your API endpoint to obtain the JWT token
  const response = await fetch('https://localhost:44322/api/chattoken', {
    method: 'POST',
    body: JSON.stringify({ jid: jid }),
    headers: {
      'Content-Type': 'application/json'
    }
  });

  const data = await response.json();
  return data.token; // Assuming the token is returned in the "token" field of the response
}

// Function to establish Strophe connection using the JWT token
function establishStropheConnection(jwtToken) {
  const conn = new Strophe.Connection(url);

  // Attach the JWT token to the connection
  conn.connect(JID, jwtToken, (status) => {
    if (status === Strophe.Status.CONNECTED) {
      console.log('Strophe connection established.');
      // Now you can use the connection for XMPP communication
      // For example, you can send/receive messages, subscribe to presence, etc.
    } else if (status === Strophe.Status.CONNFAIL) {
      console.log('Strophe connection failed.');
    } else if (status === Strophe.Status.DISCONNECTED) {
      console.log('Strophe connection disconnected.');
    }
  });

  // You can add more event handlers and logic here as needed
  return conn;
}

$('#connect').bind('click', connectWithToken);

I also tried calling a simple async function call and then connecting to ejabberd with strophejs, still the same error occurs.

function resolveAfter2Seconds(x) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
async function connectWithToken() {
  const x = await resolveAfter2Seconds(password);
  connection = new Strophe.Connection(url);
  connection.connect(JID, Password, onConnect);
}

Can you help in resolving this issue and guide me what I am missing/doing wrong here?

Answer 1

WebSocket connection to 'wss://localhost:5443/ws/' failed,

And it doesn't say why it failed?

I imagine you have configured in ejabberd.yml something like this:

listen:
  -
    port: 5443
    ip: "::"
    module: ejabberd_http
    tls: true
    request_handlers:
      /ws: ejabberd_http_ws

Maybe the problem is that ejabberd doesn't use a valid encryption certificate, and Storphe is not satisfied with that certificate. To try that, you could configure the ws in a non-encrypted port like this:

listen:
  -
    port: 5280
    ip: "::"
    module: ejabberd_http
    request_handlers:
      /ws: ejabberd_http_ws

and then use as connection address ws: instead of wss:

ws://localhost:5280/ws/