Can you help me detecting when connecting to lobby ?

[Lyfhael]

Hey,

First of all thank you for this tool it's very useful.

I want to detect when I'm connecting to the chat in champ-select. I don't have much knowledge, but I found a few things on the internet and they work for everything but what I want.

I am trying to use MutationObserver API to detect when an element of class chat-message is created, so upon arriving in the champ-select I run this in the console :

function listenForChatMessages() {
  var targetNode = document.getElementById('chat-messages-frame').contentDocument.body;
  var config = { attributes: true, childList: true, subtree: true };
  var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        console.log(mutation)
      if (mutation.type === 'childList') {
        var newNodes = mutation.addedNodes;
        for (var i = 0; i < newNodes.length; i++) {
          var node = newNodes[i];
          if (node.classList && node.classList.contains('chat-message')) {
            //Do something here
            console.log("New chat message element detected!");
          }
        }
      }
    }
  };
  var observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
}

And then I send a message to see if it caught it, and it didn't.
I tried using the MutationObserver in league-loader for capturing other things and it did work, here specifically it won't.

I hoped you could help me, not necessarily using MutationObserver, but anything that can detect when I'm connected to the chat in champ-select will do.

The code example is just one of about ten other ways I tried to do it but that didn't work, I'm running out of ideas. I even tried using ChatGPT to generate code, and it did, and again it worked for everything but for the chat messages :(

Thank you !

[nomi-san]

You should subscribe to LCU websocket to detect it.
Please refer to LCU Websocket in README to do that in your plugin.

Here is an API to get the current phase.

GET /lol-gameflow/v1/gameflow-phase

The "ReadyCheck" result means ready to accept matchmaking found.
And "ChampSelect" means you're in champ-select phase.

[Lyfhael]

You should subscribe to LCU websocket to detect it. Please refer to LCU Websocket in README to do that in your plugin.

Here is an API to get the current phase.

GET /lol-gameflow/v1/gameflow-phase

The "ReadyCheck" result means ready to accept matchmaking found. And "ChampSelect" means you're in champ-select phase.

I managed to send the GET request and it worked. So I think I should send a GET Request every 1 second to detect whenever I get into a champ select.

Lastly I would need to know when someone send a message, if you have any idea

[nomi-san]

You should subscribe to LCU websocket to detect it.
Please refer to LCU Websocket in README to do that in your plugin.

This will solve your problem.

In my comment above, you no need to call this API every seconds.
The websocket's onmessage callback will give you which API is called and its data.

ws.onmessage = async message => {
  const data = JSON.parse(message.data)
  console.log(data)

  const api = /* extract the data to get API */
  if (api === '/lol-gameflow/v1/gameflow-phase') {
    // todo
  }
}

[Lyfhael]

You should subscribe to LCU websocket to detect it.
Please refer to LCU Websocket in README to do that in your plugin.

This will solve your problem.

In my comment above, you no need to call this API every seconds. The websocket's onmessage callback will give you which API is called and its data.

ws.onmessage = async message => {
  const data = JSON.parse(message.data)
  console.log(data)

  const api = /* extract the data to get API */
  if (api === '/lol-gameflow/v1/gameflow-phase') {
    // todo
  }
}

Oh, there's been a misunderstanding.

When I said I sent a GET request and that it worked, I meant that I tried :

async function acceptMatchFound() {
  await fetch('/lol-matchmaking/v1/ready-check/accept', {
    method: 'POST'  
  })
}

The issue I had with the subscribe() function is that it wouldn't send back anything else than the initial response :

After this when I connected to a champ-select, or when someone sent a message in champ-select, it wouldn't tell me(I put a console.log() inside it printing "yay", as you see it gets triggered once but then it doesn't anymroe)

Here is the code I pasted in the console to clear any misunderstanding :

function subscribe() {
  const uri = document.querySelector('link[rel="riot:plugins:websocket"]').href
  const ws = new WebSocket(uri, 'wamp')
  
  ws.onopen = () => ws.send(JSON.stringify([5, 'JsonApiEvent']))
  ws.onmessage = async message => {
    const data = JSON.parse(message.data)
    console.log(data)
    console.log("yay")
  }
}

[nomi-san]

I'm sorry, the event name JsonApiEvent was wrong.
The correct name is OnJsonApiEvent.

-ws.onopen = () => ws.send(JSON.stringify([5, 'JsonApiEvent']))
+ws.onopen = () => ws.send(JSON.stringify([5, 'OnJsonApiEvent']))

[Lyfhael]

I'm sorry, the event name JsonApiEvent was wrong. The correct name is OnJsonApiEvent.

-ws.onopen = () => ws.send(JSON.stringify([5, 'JsonApiEvent']))
+ws.onopen = () => ws.send(JSON.stringify([5, 'OnJsonApiEvent']))

Yay, it works <3 Thank you man