Criando uma conexão no seu frontend com servidor websocket.
Acesse o painel de serviços, copie as suas crendencias necesárias e informe conforme o exemplo abaixo. Atenção:. Nunca deixe API Scret Key Exposta no frontend, nem informe a terceiros.
Na maioria dos casos você não precisa configurar host, porta ou protocolo. Informe apenas sua API Key e o cluster. A F5HLIVE resolve automaticamente a conexão correta.
Configurações manuais de host/porta devem ser usadas apenas em cenários específicos, pois podem limitar o roteamento automático e os fallbacks do SDK.
<!DOCTYPE html>
<head>
<title>Pusher Test</title>
<script src="https://sdk.f5hlive.com.br/pusher/8.4.0/pusher.min.js"></script>
<script>
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('SUA_APY_KEY', {
cluster: 'custom'
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
alert(JSON.stringify(data));
});
</script>
</head>
<body>
<h1>Pusher Test</h1>
<p>
Try publishing an event to channel <code>my-channel</code>
with event name <code>my-event</code>.
</p>
</body>
</html>