JSFiddle - React, Tailwind, and code Playground

by FZambia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/centrifugal/[email protected]/dist/centrifuge.min.js"></script>

JavaScript

var url = "https://centrifugo2.herokuapp.com/connection";

// note that you MUST NEVER reveal project secret key in production
// this is just a demo where we generate connection token on client side
var secret = "secret";
var user = "42";
var timestamp = parseInt(new Date().getTime()/1000).toString();
var hmacBody = user + timestamp;
var shaObj = sha256.hmac(secret);
shaObj.update(hmacBody);
var token = shaObj.hex();

var centrifuge = new Centrifuge({
  // please, read Centrifuge documentation to understand 
  // what does each option mean here
  "url": url,
  "user": user,
  "timestamp": timestamp,
  "token": token,
  "debug": true
});

var subscription = centrifuge.subscribe('screen-updates', function(message) {
	draw(message);
});

centrifuge.connect();

function draw(message) {
	var text = message.data.text;
  var bgColor = message.data.background;
  var textColor = message.data.color;
  console.log(text, bgColor, textColor);
}