Aplikasi Chatting Berbasis Web Dan Mobile

Menggunakan Websocket Pusher

Web and Mobile Based Chat Application Using Websocket Pusher

Samuel Pasaribu1, Rika Rosnelly2

1
Jurusan Teknik Informatika Universitas Potensi Utama
2,3
Dosen Jurusan Sistem Informasi Universitas Potensi Utama
1,2,3
Universitas Potensi Utama, K.L. Yos Sudarso KM 6,5 No. 3A Tj. Mulia - Medan
Email : samuelpasaribu3342@gmail.com 1

ABSTRAK

Aplikasi chatting messenger telah menjadi daya tarik bagi para pengguna smartphone. Para
pengguna aplikasi chatting messenger dapat berkomunikasi dengan sesama pengguna tanpa ada
batasan waktu dan jarak. Sehingga ini dapat mempermudahkan pengguna untuk berkomunikasi
antar sesama pengguna. Semakin berkembangnya teknologi, banyaknya aplikasi mobile yang
menambahkan fitur perpesanan atau bahkan menjadikannya sebagai fitur utama menunjukkan
bahwa fitur ini merupakan salah satu fitur yang sangat penting. Salah satu protokol yang
memungkinkan untuk digunakan sebagai protokol komunikasi dua arah yaitu Websocket. Protokol
Websocket menerapkan komunikasi full-duplex sehingga baik server atau client dapat mengirim
dan menerima data secara bersamaan. Dengan menggunakan teknologi websocket, proses
pengiriman pesan dan penerimaan pesan akan terus ter-update (realtime) tanpa harus mereload
browser, sehingga sangat memudahkan pengguna dalam melakukan komunikasi.

Kata kunci : Aplikasi Chatting, Websocket

ABSTRACT

Messenger application has become an attraction for smartphone users. Users of the chat
messenger application can communicate with fellow users without any time and distance
restrictions. So that this can facilitate users to communicate between fellow users. As technology
develops, many mobile applications that add messaging features or even make it a key feature
show that this feature is one of the most important features. One protocol that allows it to be used
as a two-way communication protocol, namely Websocket. The Websocket protocol implements
full-duplex communication so that either the server or client can send and receive data
simultaneously. By using websocket technology, the process of sending messages and receiving
messages will continue to be updated (realtime) without having to reload the browser, making it
very easy for users to communicate.

Keywords: Application Chatting, Websocket

1. PENDAHULUAN

Memasuki era teknologi saat ini, kebutuhan akan fasilitas penyebaran media informasi
yang cepat dan mudah semakin meningkat terutama pada aplikasi Android. Seiring dengan
berkembangnya teknologi, bentuk dan media untuk berkomunikasi juga mengalami perubahan.
Pertukaran informasi dalam fasilitas chat saat ini tidak hanya berupa data teks, akan tetapi
pengguna juga bisa mengirimkan berkas berupa video, gambar, audio, atau jenis berkas lainnya.
Pada Skripsi kali ini saya akan membuat sebuah aplikasi chating dengan memanfaatkan websocket
pusher sebagai teknologi realtimenya.
 Berdasarkan penelitian yang dilakukan Nidia Enjelita Saragih dan Fitriana Harahap dengan
judul “Perancangan Aplikasi Kompresi SMS dengan Algoritma Dynamic Markov Compression
pada Android” tujuan penelitian ini bertujuan untuk mengimplementasikan algoritma kompresi
pada teks sms yang panjang. [6]
Berdasarkan penelitian yang dilakukan Helmi Kurniawan dengan judul “Sistem Pendukung
Keputusan Penilaian Kinerja Karyawan Menggunkan Metode Topsis Berbasis Web Pada CV.
Surya Network Indonesia” tujuan penelitian ini bertujuan untuk membangun suatu sistem yang
dapat mengukur kinerja karyawan dan dapat memberikan penilaian terhadap karyawan yang
terbaik. [7]
Berdasarkan penelitian yang dilakukan deny adhar dan Labuan Nababan dengan judul
“PERANCANGAN APLIKASI U JIAN SARINGAN MASUK PERGURUAN TINGGI SECARA
ONLINE BERBASIS ANDROID (STUDI KASUS UNIVERSITAS POTENSI UTAMA
MEDAN)” tujuan penelitian ini bertujuan untuk rekomendasi peningkatan pelayanan dalam
perguruan tinggi. [8]
Berdasarkan penelitian yang dilakukan Ratih Puspasari, Mas Ayoe Elhias Nasution, Budi Triandi,
Iwan Fitrianto Rahmad dan Evri Ekadiansyah dengan judul “Sistem Pendukung Keputusan Untuk
Meningkatkan Layanan Pembeli Pulsa Elektronik Berbasis Sms Gateway ” tujuan penelitian ini
bertujuan untuk Jalur transfer keputusan di Gateway SMS dibuat berdasarkan pada pengolahan data
yang memperhitungkan kemungkinan port yang digunakan sehingga setiap transaksi dapat
dilakukan secara optimal. [9]

2. METODOLOGI PENELITIAN

2.1 Pengumpulan Data

Pada proses analisa sistem salah satu kegiatan yang dilakukan penulis adalah dengan melakukan
studi lapangan, studi lapangan ini dilakukan untuk melihat langsung kegiatan yang berlangsung
selama proses pengiriman dan penerimaan informasi data, adapun hal-hal yang dilakukan adalah
sebagai berikut:
a. Observasi (observation), penulis mengamati proses pembuatan dokumen baik berupa
laporan kerja maupun dokumen elektronik berupa e-mail secara umum.
b. Sampel, penulis mengambil sampel percakapan dengan chatting berbasis teks.

2.2. Metode Perancangan Sistem

Dalam merancang sistem dilakukan tahap-tahap sebagai berikut:
1. Prosedur Perancangan
Langkah-langkah yang diperlukan untuk mencapai tujuan perancangan dapat dilihat pada
diagram fishbone gambar 1.

Laptop: Core i3 Processor

Data Informasi Websocket Pusher
websocket Ram 4GB, HDD : 4GB
Data User Penerjemah Websocket Xampp, Sublime Text
Data Informasi
Rancangan Aplikasi Penerjemah Websocket Android Studio
Aplikasi Chatting
Berbasis web dan mobile
Menggunakan
Use Case
Websocket pusher
Activity Diagram
Squence Diagram Black Box

Class Diagram

Gambar 1. Diagram Fishbone Prosedur Perancangan

2. Akuisisi Data
Setelah melalui tahap prosedur perancangan, maka tahap selanjutnya adalah analisis data,
yaitu hal-hal yang diperlukan untuk perancangan sistem berbasis web. Pengumpulan data berupa
informasi bahasa pemrograman dan tata cara penulisan koding program websocket serta rancangan
pembuatan aplikasi chatting dengan menggunakan websocket.

3. Penulisan Kode Aplikasi

Pada tahap ini system yang akan dirancang menggunakan teknologi websocket pusher yang
dibuat menggunakan bahasa html, css dan javascript sebagai bahasa frontend, juga php sebagai
bahasa backend dan mysqli sebagai database management system (DBMS) serta android studio
sebagai software untuk membuat aplikasi berbasis mobile.

4. Tools
Pada tahap ini pembuatan atau perancangan aplikasi chatting ini menggunakan beberapa
software dan hardware antara lain :
a) Perangkat Keras (Hardware)
1. Laptop/PC yang digunakan antara lain :
- Laptop: Core i3 Processor
- Hardisk : 500GB
- Ram 4GB
2. Smartphone Android yang digunakan antara lain :
- Android versi 5.0 Lolypop
- Octa-core 1.5 GHz CPU
- Internal Memory : 8 GB
- RAM : 1 GB
b) Perangkat Lunak (Software)
Software yang digunakan untuk membuat aplikasi :
1. Sistem Operasi Windows 10
2. Sublime Text 3
3. XAMPP
4. Android Studio
5. Web Browser Google Chrome

3. HASIL DAN UJI COBA

3.1. Hasil

Adapun hasil dari pengujian yang dilakukan pada “Aplikasi Chatting Berbasis Web Dan
Mobile Menggunakan Websocket Pusher” dapat dilihat sebagai berikut :

1. Tampilan Halaman Daftar Mobile

Gambar 1 Tampilan
Halaman Daftar Mobile

Tampilan sistem untuk

menampilkan Halaman Daftar,
dimana pada halaman ini user
atau pengguna baru dapat
melakukan daftar akun dengan
mengisikan nama, e-mail, password
dan confirm password serta tombol register untuk melakukan proses daftar.
2. Tampilan Halaman Login Mobile

Gambar 2 Tampilan Halaman Login Mobile

Tampilan sistem untuk menampilkan Halaman Login, dimana user atau pengguna dapat
melakukan login akun dengan mengisikan e-mail dan password serta terdapat dua button yaitu
login untuk melakukan proses masuk dan forgot password jika user atau pengguna lupa dengan
password.

3. Tampilan Halaman Home Mobile

Gambar 3 Tampilan Halaman Home Mobile

Tampilan sistem untuk menampilkan Halaman Home pada aplikasi chatting web socket
pusher, dimana pada halaman ini terdapat menu chat grup, chat private, nama pengguna, dan
menu logout.

4. Tampilan Halaman Daftar Kontak Mobile

 Gambar 4 Tampilan Halaman Daftar Kontak Mobile

Tampilan sistem untuk menampilkan Halaman Daftar Kontak yang terdapat didalam
menu private pada aplikasi chatting web socket pusher, dimana pada halaman ini terdapat
beberapa pengguna/kontak yang sudah melakukan pendaftaran pada aplikasi chatting ini.
Pada halaman ini pengguna dapat memilih kontak terlebih dahulu sebelum melakukan
chat.

5. Tampilan Halaman Private Chat Mobile

Gambar 5 Tampilan Halaman Private Chat Mobile

Tampilan sistem untuk menampilkan Halaman Private Chat pada aplikasi chatting web socket
pusher, dimana pada halaman ini terdapat didalam menu private dan telah melakukan pemilihan
pengguna yang akan di chat. Pada halaman ini user atau pengguna dapat menulis pesan yang akan
dikirim dengan kontak yang sudah dipilih.
6. Tampilan Halaman Tambah Grup Chat Mobile

Gambar 6 Tampilan Halaman Tambah Grup Chat Mobile

Tampilan sistem untuk menampilkan Halaman Tambah Grup Chat pada aplikasi
chatting web socket pusher, dimana pada halaman ini terdapat didalam menu Grup. Pada
halaman ini user atau pengguna dapat membuat grup chat baru dengan mengisi form nama
grup dan deskripsi grup.

7. Tampilan Halaman Undang Teman Grup Chat Mobile

Gambar 7 Tampilan Halaman Undang Teman Grup Chat Mobile

Tampilan sistem untuk menampilkan Halaman Undang Teman Grup Chat pada aplikasi
chatting web socket pusher, dimana pada halaman ini terdapat didalam menu grup dan telah
melakukan pemilihan grup. Pada halaman ini user atau pengguna dapat mengisikan e-mail
teman yang akan ditambahkan ke grup baru.
8. Tampilan Halaman Daftar Grup Chat Mobile

Gambar 8 Tampilan Halaman Daftar Grup Chat Mobile

Tampilan sistem untuk menampilkan Halaman Daftar Grup Chat pada aplikasi chatting
web socket pusher, dimana pada halaman ini terdapat didalam menu Grup. Pada halaman ini
pengguna dapat memilih grup terlebih dahulu sebelum melakukan chat dan pengguna juga
dapat menambah grup baru dengan memilih tombol tambah grup.

9. Tampilan Halaman Grup Chat Mobile

Gambar 9 Tampilan Halaman Grup Chat Mobile

Tampilan sistem untuk menampilkan Halaman Grup Chat pada aplikasi chatting web
socket pusher, dimana pada halaman ini terdapat didalam menu Grup dan telah melakukan
pemilihan grup yang akan di chat. Pada halaman ini user atau pengguna dapat menulis pesan
 yang akan dikirim ke grup yang sudah dipilih serta dapat mengundang teman untuk masuk
kedalam grup dengan memilih tombol undang.

Hasil uji coba merupakan pengujian black box terhadap aplikasi untuk mengetahui hasil
dari perancangan antar muka aplikasi saat dijalankan pada smartphone android dan web browser.
Hasil pengujian dapat dilihat pada tampilan tabel 1. (mobile) dan tampilan tabel 2. (web)

Skenario
No Testing Hasil yang diharapkan Hasil Pengujian Keterangan
Pengujian

Melakukan
Sistem dapat
input kirim
melakukan eksekusi
pesan pada form
1 input kirim pesan Berhasil
private chat
private chat dengan
pengguna
pengguna lain mobile
mobile.

Melakukan Sistem dapat

tambah daftar melakukan eksekusi
2 Berhasil
grup pengguna tambah daftar grup
mobile. baru mobile

Melakukan
input kirim Sistem dapat
pesan pada form melakukan eksekusi
3 Berhasil
grup chat input kirim pesan ke
pengguna grup chat mobile
mobile.

1. Tampilan Mobile
Tabel 1 Tampilan Mobile

2. Tampilan Web
 Skenario
No Testing Hasil yang diharapkan Hasil Pengujian Keterangan
Pengujian

Melakukan Sistem dapat

input kirim melakukan eksekusi
pesan pada form input kirim pesan
1 private chat private chat dengan Berhasil
Pengguna web pengguna lain web

Melakukan Sistem dapat

tambah daftar melakukan eksekusi
2 Berhasil
grup pengguna tambah daftar grup
web. baru web

Melakukan
Sistem dapat
input kirim
melakukan eksekusi
3 pesan pada form Berhasil
input kirim pesan ke
grup chat
grup chat web
pengguna web.

Tabel 2 Tampilan Web

Dari tabel pengujian diatas dapat disimpulkan bahwa aplikasi dapat melakukan aksi pengiriman
pesan private, grup dan penambahan grup chat baru dengan baik.

4. KESIMPULAN

Berdasarkan pembahasan dari bab-bab sebelumnya yang telah dilakukan maka dapat diambil
beberapa kesimpulan sebagai berikut:
1. Dengan memanfaatkan teknologi websocket pusher dalam perancangan aplikasi chatting, agar
aplikasi chatting yang dibangun berjalan secara realtime yang dapat digunakan dengan baik
pada tampilan web maupun mobile.
2. Dengan memanfaatkan bahasa pemrograman PHP, MySql sebagai database management dan
Java sebagai bahasa pengembang mobile sistem maka sistem aplikasi chatting websocket
pusher ini dapat dibangun.

5. SARAN

Untuk pengembangan lebih lanjut penelitian aplikasi chatting websocket pusher ini, maka
dapat diberikan beberapa saran sebagai berikut:
 1. Diharapkan pada penelitian selanjutnya dapat dikembangkan dengan menyediakan fitur
kirim pesan gambar, dokumen, audio dan video.
2. Diharapkan pada penelitian selanjutnya pengembangan aplikasi berbasis mobile dengan
menggunakan mobile native untuk menghasilkan aplikasi yang lebih efisien dalam
penggunaannya.

UCAPAN TERIMA KASIH

Penulis mengucapkan terima kasih yang sebesar-besarnya kepada Universitas Potensi Utama yang
telah membantu penulis dalam menyelesaikan laporan penelitian ini.

DAFTAR PUSTAKA

[1] Sularsono Eko Sularsono, dkk, 2014. “Implementasi Algoritma Rijndael 128 Pada Aplikasi
Chatting Berbasis Html5 Websocket”. Informatika, Universitas Kristen Duta Wacana.
[2] Somya Ramos, 2018. “Perancangan Aplikasi Chatting Berbasis Web di PT.Pura
BarutamaKudus Menggunakan Socket.IO dan Framework Foundation”. Teknik Informatika,
Universitas Kristen Satya Wacana.
[3] Muhammad Panser Brigade, dkk, 2018. “Analisis Perbandingan Kinerja Protokol Websocket
dengan Protokol SSE pada Teknologi Push Notification”. Teknik Informatika, Universitas
Brawijaya.
[4] Destiningrum Mara & Adrian Qadhli Jafar,2017. “Sistem Informasi Penjadwalan Dokter
Berbasis Web Dengan Menggunakan Framework Codeigniter (Studi Kasus: Rumah Sakit
Yukum Medical Centre)”. Informatika, Universitas Teknokrat Indonesia.
[5] Candra Benni, dkk, 2014. “Pengembangan Sistem Keamanan Untuk Toko Online Berbasis
Kriptogrfi Aes Memggunakan Bahasa Pemrograman Php Dan Mysql”. Teknik Informatika
Fakultas Ilmu Komputer Universitas Dehasen Bengkulu.
[6] Saragih, Nidia Enjelita, and Fitriana Harahap. "Perancangan Aplikasi Kompresi SMS dengan
Algoritma Dynamic Markov Compression pada Android." Jurnal Ilmiah Core IT:
Community Research Information Technology 7.1 (2019).

[7] Kurniawan, H. (2015). Sistem Pendukung Keputusan Penilaian Kinerja Karyawan

Menggunakan Metode Topsis Berbasis Web Pada CV. Surya Network Indonesia.
Proceedings Konferensi Nasional Sistem dan Informatika (KNS&I).

[8] Adhar, D., & Nababan, L. (2016). PERANCANGAN APLIKASI UJIAN SARINGAN
MASUK PERGURUAN TINGGI SECARA ONLINE BERBASIS ANDROID (STUDI
KASUS UNIVERSITAS POTENSI UTAMA MEDAN). Techno. Com, 15(3), 217-223.

[9] Puspasari, R., Nasution, M. A. E., Triandi, B., Rahmad, I. F., & Ekadiansyah, E. (2018,
August). Decision Support System For Improving Electronic Pulse Buyer Services Based
Sms Gateway. In 2018 6th International Conference on Cyber and IT Service Management
(CITSM) (pp. 1-7). IEEE.

Sumber : https://www.samuelpasaribu.com/