JSFiddle - React, Tailwind, and code Playground

by xdumaine

HTML

<script src="https://cdn.respoke.io/respoke.min.js"></script>
<div class="join">
    <label>Enter a nickname to join, then press enter:
        <input id="nickname" />
    </label>
</div>
<div class="loading" style="display:none">
    Working magic ...
</div>
<div class="done" style="display:none">
    Done! Check your console for connection information!
</div>
<div class="error" style="display:none">
    Uh oh. There was a webtask.io error. Try again later?
</div>

CSS

* {
    font-family: Arial;
}

body {
    margin-top: 100px;
}

JavaScript

var client = respoke.createClient();

// "connect" event fired after successful connection to Respoke
client.listen("connect", function(e) {
    alert('Connected to Respoke!');
    console.log("Connected to Respoke!", e);
});

var authenticate = function () {
    $('.join').hide();
    $('.loading').show();
    $.ajax({
        url: 'https://webtask.it.auth0.com/api/run/wt-xander_dumaine-gmail_com-0/respoke-auth',
        type: 'GET',
        data: {
            endpointId: $('#nickname').val() + '@xdumaine-webtask-demo'
        },
        success: function (res) {
            client.connect({
                token: res.tokenId
            });
            $('.loading').hide();
            $('.done').show();
        },
        error: function (err) {
            console.log(err);
            $('.loading').hide();
            $('.error').show();
        }
    });
};
$('#nickname').keypress(function (e) {
  if (e.which == 13) {
    authenticate();
  }
});