Problem with ext.send and ext.listen

Extensions
1

Hi! I’m trying to set up an extension and sending messages from the Broadcaster Config to the Viewer Panel/Video using the twitch.ext.send and twitch.ext.listen functions.

I found this repo on github, configured and installed in my channel. When I click on “start giveaway” the POST api fires correctly and a message appears in chat (sendToChat function). The part that doesn’t work is the one trying to updating the panel (or video component) part, using the ext.send and ext.listen functions.

Those are the interested part:

  • live_config.js
  twitch.onAuthorized(function (auth) {
    log('onAuhorized() fired')

    token = auth.token
    channelId = auth.channelId
    clientid = auth.clientId

    log('token: ' + token + '\nchannelId: ' + channelId + '\nclientId: ' + clientid)

    // Set up button handler
    document.getElementById('btn').addEventListener('click', btnClick)
  })

  // On button click, toggle the status of the giveaway and send an extension chat message
  btnClick = function () {
    giveawayInProgress = giveawayInProgress ? false : true

    // Send chat message to notify status of giveaway
    sendToChat()

    // Change UI based on status of giveaway
    document.getElementById('btn').innerHTML = giveawayInProgress
      ? 'Stop Giveaway!'
      : 'Start Giveaway!'

    // Use PubSub to send status of giveaway
    // Reference: https://dev.twitch.tv/docs/extensions/reference#send
    twitch.send('broadcast', 'application/json', giveawayInProgress)
    log('PubSub message sent, giveawayInProgress: ' + giveawayInProgress)
  }
  • extension.js
twitch.onAuthorized(function (auth) {
        tuid = auth.userId
        log("onAuhorized() fired\nUser " + tuid + " started extension");
    });

    // Listen for an incoming PubSub message and adjust HTML elements accordingly
    // Reference: https://dev.twitch.tv/docs/extensions/reference/#listen
    twitch.listen('broadcast', function (_target, _contentType, message) {
        log("listen() fired, PubSub message received, giveawayInProgress: " + message);

        var giveawayInProgress = (message == 'true');

        elem = document.getElementById("txt");
        if (giveawayInProgress == true) {
            elem.classList.remove("is-warning");
            elem.classList.add("is-success");
            elem.innerHTML = "Congratulations! Your unique key is " + tuid;
        }
        else {
            elem.classList.remove("is-success");
            elem.classList.add("is-warning");
            elem.innerHTML = "No active giveaways. Check back later!";
        }
    });
2

You declared application/json and seemed to have send a boolean instead. (which may get expressed as a numeric instead further causing confusion)

You may also want to bind a onError callback to capture/log errors

Checking the example it’s 2 years old and things may have changed. But I think the issue lies in the pubsub call declaring JSON but sending a boolean. And the changes for various things recently might prevent a boolean going over the wire as a boolean.

You didn’t state if you log listen recieving an error, so I don’t know if the listen tripped or the send tripped from what you have presented

The rest of your code seems sound however.

3

Thanks, that was the issue, now everything works on the live extension on my channel, but the problem still remains in the Developer Rig when I try to click the button from the live_config view there.

Do I have to do something more or it’s just a Developer Rig issue?

4

The developer rig lacks the ability to generate a valid JWT properly, it would seem, especially for talking to “Real” channels

Preferred testing should be done on the Twitch website not the rig.

1 Like