Tutorial Integrasi Pusher di PHP

Tutorial Integrasi Pusher di PHP - Mumpung ada tempat posting gratis, saya sempatkan membuat tutorial ini sebagai pengingat pribadi ataupun biar dibaca oleh orang lain yang membutuhkan tutorial integrasi Pusher di PHP.

Library Pusher sendiri dapat kita manfaatkan untuk membangun notifikasi secara realtime kepada user. Contohnya seperti apa?

1. Notifikasi pembaruan sistem
2. Realtime Chat
3. Dan lain-lain 

Kenapa kita harus menggunakan library seperti pusher ini?, kenapa tidak menggunakan setInterval di javascript saja untuk cek data terbaru?

Untuk menghemat resource sistem kita, terutama database biar tidak jebol kena request tiap interval waktu dari banyak user yang login

Mungkin tidak terasa bagi sistem yang cuma diakses oleh 1 atau 2 user saja, jika sistemnya diakses ratusan bahkan ribuan, alamat bikin ngos-ngosan server kita dong.

Okee langsung saja kita ngoding langsung, di sini saya menggunakan Codeigniter 3.13 untuk implementasi Pusher.js nya

Requirements :

1. PHP (Bebas, mau native / framework), di sini saya menggunakan Codeigniter 3.13
2. HTML
3. Library Pusher.js

Logic dasar membangun fitur chat:

1. Buat tabel user untuk keperluan login
2. Buat tabel chat untuk skenario chat antar user
3. Download library composer untuk PHP
4. Buat tampilan HTML

Buat tabel user :

CREATE TABLE `user` (
  `user_id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(150) DEFAULT NULL,
  `nama` varchar(100) NOT NULL, `foto` varchar(200) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `user`
  ADD PRIMARY KEY (`user_id`);

ALTER TABLE `user`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Buat tabel chat :

CREATE TABLE `chat` (
  `id_chat` bigint(22) NOT NULL,
  `username_from` varchar(400) NOT NULL,
  `username_to` varchar(400) NOT NULL,
  `chat` text,
  `tanggal` date NOT NULL,
  `is_read` tinyint(1) NOT NULL DEFAULT '0',
  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `created_by` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `chat`
  ADD PRIMARY KEY (`id_chat`),
  ADD KEY `username_from` (`username_from`(191)),
  ADD KEY `username_to` (`username_to`(191)),
  ADD KEY `created_by` (`created_by`);

ALTER TABLE `chat`
  MODIFY `id_chat` bigint(22) NOT NULL AUTO_INCREMENT;
COMMIT;

Download library pusher php :

Ada 2 cara instalasi pusher di PHP, bisa Anda download langsung di halaman packagist.com, atau menggunakan composer untuk instalasi library tersebut. Di sini saya menggunakan composer dengan mengetikkan "composer require pusher/pusher-php-server"

Buat tampilan HTML :

Di sini saya menggunakan template Adminty, jika Anda tidak punya tampilan tersebut, bisa coba pakai template lain yang memiliki contoh tampilan chat, di sini saya hanya memberikan alur / logic terkait integrasi pusher untuk keperluan realtime chat. 

Controller :

Berikut script untuk Controller Chat.php :

Coba kalian lihat di script bagian bawah, ada tulisan pusher($res); kan??

Disitu saya menggunakan helper untuk kemudahan penggunaan kedepannya, berikut script untuk render_helper.php 

Helper :

Catatan :

Silahkan registrasi terlebih dahulu untuk mendapatkan kredensial app_id, app_secret, app_key dari website resmi pusher.com. Silahkan login menggunakan akun Github ataupun Gmail Anda.

1. Silahkan akses url ini untuk mendaftarkan / membuat channel app service Anda https://dashboard.pusher.com/channels

2. Klik Create app, selanjutnya isi form seperti berikut :

3. Setelah klik Create apps, nanti Anda akan diarahkan ke halaman contoh penerapan sederhana pusher js ini

 Seperti itu, akan tetapi kalian bisa melihat secara lengkap informasi app_id, app_key dan app_secret di tab App Keys 

app_id = "1499xxx"
key = "65648d323466865b5xxx"
secret = "2e648282d12f947bcxxx"
cluster = "ap1"

Setelah mendapatkan data tersebut, selanjutnya silahkan kalian replace ke file helper tadi seperti berikut :

function pusher($arr = null)
	{
		require_once FCPATH."vendor/autoload.php";
		$a =& get_instance();
		$a->load->model('Mapi', 'ma');
		$res = $a->ma->get(['api'=>'pusher'])->row();
		$json = json_decode($res->value, true);
		$options = array(
			'cluster' => 'ap1', // cluster
			'useTLS' => true
		);
		$pusher = new Pusher\Pusher(
			'65648d323466865b5xxx', // key
			'2e648282d12f947bcxxx', // secret
			'1499xxx', // app_id
			$options
		);
		$data['data'] = $arr;
		$data['message'] = 'success';
		$pusher->trigger('channel-chat', 'my-event', $data);
	} 

Selanjutnya, mari kita setup dari sisi front end, karena dalam template kita berbeda. Jadi langsung saya tampilkan saja logic untuk front end nya.

View :

Secara urutan,

1. Buat function pusher() terlebih dahulu
2. Lalu buat function loadUser() : jika data Anda sifatnya serverside
3. Kemudian buat function loadAjaxChat() : ketika kita mengklik salah satu nama user, tampilan akan berubah menjadi tampilan chat & balasan chat (ini cara kerja template saya, jika template Anda tidak seperti ini langsung lompati ke nomor 4)
4. Buat function loadIsiChat(chat_id, nama, img) : untuk melihat detail chat atau percakapan kita dengan user tersebut
5. Buat function sendChatAjax() : untuk mengirim balasan atau chat kita ke orang tersebut

Secara garis besar, ketika kita mengirimkan balasan atau sendChatAjax mengirim data ke function Chat/sendChatAjax(), terdapat event yang bertugas mengirim informasi ke pusher kalau ada perubahan data dari sisi server dan diharapkan pusher menginformasikan kepada seluruh client yang terdaftar dengan channel-chat :

public function sendChatAjax()
	{
		if (!empty($this->input->post())) {
			$username_to = dekrip(pos_helper('chat_id'));
			$username_from = $this->session->userdata('user');
			$data = array('username_from' => $username_from,
						'username_to' => $username_to,
						'chat' => pos_helper('txt'),
						'tanggal' => date('Y-m-d'),
						'is_read' => 0,
						'created_at' => date('Y-m-d H:i:s'),
						'created_by' => $username_from);

			$jml_chat = $this->mc->get_jmlchat(['username_to'=>$username_from, 'is_read'=>0]);
			if ($this->mc->add($data)) {
				http_response_code(200);
				$res = ['status'=>true, 'jml_chat'=>$jml_chat, 'identifier'=>$username_to, 'chat_id'=>enkrip($username_from), 'nama'=>$this->session->userdata('nama'), 'img'=>getFoto($this->session->userdata('foto')), 'source'=>$username_from];
			} else {
				http_response_code(500);
				$res = ['status'=>false, 'jml_chat'=>$jml_chat, 'identifier'=>$username_to, 'chat_id'=>enkrip($username_from), 'nama'=>$this->session->userdata('nama'), 'img'=>getFoto($this->session->userdata('foto')), 'source'=>$username_from];
			}
			pusher($res); // dibagian inilah kenapa pusher bisa tau kalau ada perubahan database kemudian browser kita mendapatkan informasi dari pusher
			echo json_encode($res);
		}
	}

Kalau dibuat runtutan seperti ini : Front End Client -> Server side -> Pusher -> Front End Client.

Semoga tutorial ini dapat bermanfaat bagi Anda yang sedang membutuhkan, terima kasih telah membaca catatan saya ini, Jika ada pertanyaan silahkan hubungi saya melalui akun telegram : @maghfur_dev