Websockets Kota Payakumbuh

1. Registrasi

Registrasi terlebih dahulu untuk mendapatkan Private Key dengan mengklik tombol Daftar . Private Key akan dikirim melalui email Anda berupa 10 karakter kombinasi angka dan huruf.

2. Broadcasting Events

Mengirim Broadcast ke Websockets server:

1. API request

   Post Method Request menggunakan url berikut ini:

   URL - Post Method

   https://websockets.payakumbuhkota.go.id/api/send
   
   
   
2. Parameters:

   Parameter	Required	Deskripsi
   private_key	Yes	Key yang digenerate ketika mendaftar. Dikirim via Email
   channel_name	Yes	Sebagai Identitas Channel Anda. Gunakan ID, NAME atau dengan nama statis
   data_1	Optional	Data tambahan yang ingin Anda kirim. Dapat berupa hasil data dari database, data form input, atau data statis
   data_2	Optional	sda
   ...	...	...
   data_n	sda	sda

3. Example using PHP cURL

   API Post request menggunakan cURL PHP:

   PHP - cURL

   $curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://websockets.payakumbuhkota.go.id/api/send',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS => array(
    'private_key' => '1234567890',
    'channel_name' => 'myChannel',
    'id_user' => '1',
    'nama' => 'Kominfo',
    'alamat' => 'Payakumbuh'),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;
   
   
   
4. Example in Postman

   API request pada postman dengan method Post:

   
   
   

3. Receiving Broadcasts

Menerima Broadcast pada sisi client.

1. Download Echo.js

   Download file Echo.js di link berikut:

   Download Echo.js
   
   

   Simpan file pada publik folder project Anda.
   Contoh di folder /assets/js/Echo.js

   
   
   
2. Listening Event

   Gunakan Private Key dan Channel Name yang Anda kirim disaat Broadcast Event di atas.

   window.Echo.channel('private_key.channel_name').listen('.websocketsPyk', (e) => {
  console.log(e.data);
});
   
   

   Penggunaan pada client-site:

   JavaScript - in HTML file

   <script src="https://js.pusher.com/4.3/pusher.min.js"></script>

   <script type="module">

     import Echo from '/assets/js/Echo.js';

  window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'websocketsPyk',
    wsHost: 'websockets.payakumbuhkota.go.id',
    wssPort: 6001,
  });

  window.Echo.channel('1234567890.myChannel').listen('.websocketsPyk', (e) => {
    console.log(e.data);
  });

   

   </script>

   
   
   
3. Client Response

   Response Console log:

   Client Response - JSON format data

   {
  "private_key": "1234567890",
  "channel_name": "myChannel",
  "id_user": "1",
  "nama": "Kominfo",
  "alamat": "Payakumbuh"
}