Which function is called to establish the Chat connection with XMPP after clicking the chat icon

What I am trying to do is that when I click the Jitsi chat icon,
image
it will connect to another external chat server.
there are mainly 3 steps:

  1. Find the Jitsi Chat icon related code.
  2. modify the code to let it establish a connection with external chat server
  3. receive the data and render the UI with data.

I have researched the Chat code today.

I only see below part that maybe related with toggle chat icon.

case TOGGLE_CHAT:
    return {
        ...state,
        isOpen: !state.isOpen,
        lastReadMessage: state.messages[
            navigator.product === 'ReactNative' ? 0 : state.messages.length - 1]
    };
}

but I don’t see where to connect to server.

so I need help to locate the code which Chat server use to connect to back-end service.

Here is where message is sent: https://github.com/jitsi/jitsi-meet/blob/e7144eb67495c1f9b2a0d051c96068cf786d729d/react/features/chat/middleware.js#L57

Which is this method where it sends the message to the room: https://github.com/jitsi/lib-jitsi-meet/blob/2d06c3e2444d92a5fb4e73bba4718ce4febced30/JitsiConference.js#L702

thanks @damencho

so the Chat will not create another connection ? it will just reuse the conference connection ?

Yes.

if I want the message send to another server.
I need to modify the code:
case SEND_MESSAGE in chat/middleware.js ?

and I have read this code from Toolbox.js.
onClick = { this._onToolbarToggleChat }
if I want the chat to load message from other server, I should modify the “TOGGLE_CHAT” related code ? But I don’t see it in the chat/middleware.js.

That is just a state, on action (click) it changes the state. Change of the state triggers a change of UI to show a UI component.
You should connect to your server … let’s say on conference join, I think.
You can, of course, add in chat middleware handling of TOGGLE_CHAT action and add your logic there to connect/disconnect to your other server … you can even create your own feature and add all your logic there so you can easily update upstream jitsi-meet later …

exactly.

I have searched the chat code. the TOGGLRE_CHAT action code is not in the middleware part. so I should just create a new one ?

I only see some code in the reduce part:
case TOGGLE_CHAT:
return {
…state,
isOpen: !state.isOpen,
lastReadMessage: state.messages[
navigator.product === ‘ReactNative’ ? 0 : state.messages.length - 1]
};
}

but I guess I should not touch it.

@damencho
I have added the TOGGLE_CHAT in the middleware. how to use store.getState() to check if the chat window is opened or not ?