Cara membuat WebSocket di aaPanel menggunakan PHP dan Apache

menyiapkan websocket di aapanel.jpg

Sebagai pengguna aaPanel mungkin kalian pernah bertanya, bagaimana sih cara mengkonfigurasi websocket. Dan mungkin kamu juga pernah mencoba mengikuti banyak panduan di internet, namun tidak pernah berhasil.

Menurut saya, banyak yang tidak berhasil dalam menyiapkan server websocket karena mereka hanya paham mengikuti panduan saja. Tidak memahami bagaimana prinsip kerja dari websocket itu sendiri. Orang awam akan menganggap bahwa websocket menggunakan http protokol yang sama seperti web pada umumnya.

Mereka menganggap begini, server websocket dapat di akses dengan URL ws://domain.com/server.php. Padahal sebenarnya tidak begitu, aplikasi berbasis websocket merupakan aplikasi yang terpisah dan berjalan secara mandiri pada server. Websocket pada php di jalankan pada background process. Setelah PHP di daftarkan untuk berjalan di latar belakang ia akan mulai mendengarkan pesan masuk dari port yang di gunakan, contoh port 8183.

Kemudian kita membuat jalur routing menggunakan proxy mode untuk meneruskan semua data lalu lintas ke aplikasi yang tepat. Dalam hal ini tujuanya adalah alamat ip local server dan port yang di gunakan. Apa itu port? Port dalam aplikasi adalah angka unik yang menjadi jalur komunikasi aplikasi dalam jaringan.

Untuk menginstall websocket di aaPanel, pastikan kalian sudah meng-install aaPanel. Jangan gunakan domain utama apabila sudah menggunakna SSL, buat sebuah website baru dan tambahkan alamat IP Publik server VPS anda. Tujuanya adalah untuk mencoba membuat Socket server tanpa terpengaruh oleh sertifikat SSL.

Cara ini saya menggunakan webserver apache. Buat kalian yang menggunakan nginx akan saya posting pada artikel yang berbeda. Untuk mempersingkat panduan, silakan langsung saja simak tahapan berikut ini.


1 ). Buatlah sebuah situs web baru di aaPanell

Silakan login ke aaPanel, pada manajemen dashboard pilih bagian Website, kemudian klik ikon tambahkan website baru. Domain name, masukan alamat IP publik VPS anda. Pada bagian folder bebas, dalam panduan ini saya akan mengarahkan ke folder sample-websocket.

mengatur websocket aapanel.jpg

Jika sudah buat website, silakan muat ulang halaman website tersebut untuk melihat web yang sudah di tambahkan. Klik pada bagian URL/ Nama website, akan muncul beberapa menu di dalamnya. Pada menu ini, silakan masuk ke konfigurasi website untuk mengatur routing proxy nya. Perlu menambahkan Private IP VPS, tujuanya adlaah untuk mengarahkan permintaan ke aplikasi lain yang berjalan di server kita. Dalam hal ini adalah file server.php yang akan mendengarkan permintaan dari port 8183.

ProxyPass /websocket ws://PRIVATE-IP-SERVER:8183/websocket
ProxyPassReverse /websocket ws://PRIVATE-IP-SERVER:8183/websocket
mengatur konfigurasi server websocket.jpg

Jangan lupa menyimpan perubahan untuk segera di terapkan pada website. Setelah selesai, selanjutnya kita install library rachet. Untuk menginstall library ini, silakan bernavigasi ke menu composer pada halaman popup tersebut. Di bagian composer pilih install, PHP Version isi dengan PHP saat ini yang di gunakna oleh website anda, di bagian dir arahkan ke halaman folder sample-contoh folder website yang telah di buat sebelumnya. Untuk command install silakan paste command berikut.

composer require cboden/ratchet
install library rachet.jpg


3 ). Mengaktifkan Modul proxy_wstunnel

Secara default Apache pada aaPanel sudah mengaktifkan modul ini, tapi ada baiknya di periksa terlebih dahulu apakah modul nya sudah di aktifkan atau tidak. Untuk mengetahui apakah modul proxy_wstunel sudah di aktifkan, silakan masuk ke bagian App Store pada Dashboard aaPanel anda. Kemudian pada daftar Apache klik setting, anda akan melihat popup menu baru di tampilkan.

Klik pada bagian configuration, kemudian tekan tombol keyboard CTRL + F untuk mencari string proxy_wstunnel. Pastikan pada baris tersebut tidak ada tanda #. Tanda pagar merupakan tanda untuk menandai suatu baris sebagai komentar, biasanya metode ini di gunakan untuk menonaktifkan modul yang tidak di perlukan. Untuk mengaktifkanya hapus tanda pagar, Setelah selesai klik simpan, navigasi ke menu service klik restart apache. Contoh berikut ini modul yang sudah aktif.

modul proxy ws tunel.jpg


4 ). Mengaktifkan Fungsi exec

Sebenarnya websocket merupakan program yang harus di jalankan pada PHP CLI. Command Line Interface berguna untuk menjalankan skrip PHP sebagai background process dengan interpreter yang sudah ada pada PHP itu sendiri.

Untuk menghindari penggunaan CLI kita harus mengaktifkan fungsi exec, fungsi ini akan memungkinkan kita menjalankan perintah shell atau CLI langsung dari PHP. Dan sebagai peringatan pastikan pada server anda tidak sedang menginstall aplikasi lain dari sumber yang tidak terpercaya. Karena dengan mengaktifkna funsgi exec server anda akan rentan terhadap eksekusi yang tidak di inginkan oleh orang lain.

Untuk mengaktifkan fungsi exec() pada aaPanel silakan masuk ke menu Apps Store, pada version PHP yang sedang anda gunakan klik setting. Kemudian pada jendela popup yang muncul pilih setelan disabled functions. Cari nama fungsi exec dalam daftar ini dan hapus. Sebagai gambaran tampilan silakan lihat contoh berikut :

mengaktifkan fungsi exec aapanel.jpg


5 ).Membuka Port 8183

Agar komunikasi dapat terjadi pada lintas jaringan, wajib membuka port pada 8183. Sebenarnya penggunaan port ini bebas, atau bisa menggunakan port 443 untuk koneksi yang menggunakan SSL TLS. Tapi dalam program ini saya menggunakan port tidak biasa yaitu 8183 untuk menghindari konflik dengan kebanyakan port aplikasi.

Untuk membuka port tertentu pada aaPanel,masuk ke menu Security. Pada bagian security tambahkan angka 8183, masukan deskripsi yang mewakilinya kemudian klik open. Catatan, hati-hati dalam membuka port tertentu ini akan membuat server anda semakin terbuka.

mengaktifkan port pada aapanel.jpg


6 ). Membuat skrip sederhana untuk kirim pesan dengan Websocket

Kita akan membuat 3 buah file, pertama file index.html akan beisi sebuah form chatbox sederhana untuk melakukan input data dan mengirimnya ke websocket. Kita akan menggunakan javascript fancywebsocket.js sebagai framework js nya. Kemudian ada file run.php, fungsi dari file ini adalah untuk menjalankan server.php dalam mode background process dan sekaligus menyimpan kode PID ke dalam file. PID adalah kode identifikasi unik aplikasi yang berjalan di latar belakang, kode ini akan kita gunakan untuk menghentikan / kill process ketika run.php di akses kembali. Dan terakhir adalah server.js

Fungsi dari server.js adalah sebagai aplikasi latar belakang untuk mendengarkan dan merespon permintaan dari port 8183 yang sudah kita siapkan. Bebas menggunakan PORT berapa, jadi pada intinya server.php tidak perlu di akses lewat domain utama, ia akan berjalan sebagai aplikasi yang independen dan saling berkomunikasi lewat jalur socket connection.

index.html

run.php

server.php

fancywebsocket.js


7 ). Menjalankan websocket

File run.php, sudah saya desain untuk mendaftarkan skrip server.php sebagai background process dan menyimpan PID ke dalam file teks. Panggil sekali, maka skrip akan menjalankanya, panggil sekali lagi maka skrip akan menghentikanya. Cara memanggil seperti ini, buka URL https://IP-PUBLIK-ANDA/run.php, ini akan menjalankan fungsi 1x.

Pada saat server.php aktif, kamu akan melihat sebuah teks listen pada Menu Firewall. Ini menandakan bahwa ada program yang sedang mendengarkan lalu lintas pada port tertentu. Dan silakan buka url web anda dengan alamat IP tersebut. Pastinya sudah bisa chattingan mengirim teks pesan.

Di dalam skrip server.php juga sudah saya berikan 1 baris contoh bagaimana menerima pesan dan menyimpan nya ke dalam sebuah file. Dan bagaimana cara authentikasi login ketika pertama kali websocket tersebung. Jangan lupa, untuk menjalankan ini pastikan anda mengedit semua teks ws://IP-SERVE:8183/websocket dengan server anda.

koneksi berhasil terhubung socket server.jpg


Kode program ini dapat anda modifkikasi sesuai dengan keinginan, bisa juga di jadikan sebagai rujukan. Lihat sudah sampai di mana proses penyiapan websocket anda, bila masih ada yang kurang cek kembali, di atas panduan dan langkah sudah berdasarkan nomor.

Ya serumit ini cara menyiapkan websocket server, hingga untuk memproses data dari respon websocket itu sendiri kita harus memodifikasi program pada server.php. Sebelum melakukan modifikasi sebaiknya di kill process terlebih dahulu untuk menghentikan server.php berjalan. Ini merupakan kerumitan dan tantangan tersendiri.

Tagged : #coding #php #websocket #apache #aapanel , pada Selasa, 16 Januari 2024 16:17 WIB