Aplikasi Chatting Menggunakan Websocket Pusher

Aplikasi Chatting Menggunakan Websocket Pusher - Aplikasi Chatting adalah suatu teknologi jaringan yang mengijinkan penggunanya mengirimkan pesan secara realtime ke pengguna lain yang tersambung dalam sebuah jaringan LAN atau Local Area Network ataupun internet.

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. 
 
Bentuk komunikasi dimulai dengan komunikasi bertatap muka dan melalui surat. Salah satu fasilitas media komunikasi sekaligus tempat bertukarnya informasi yang paling populer dan paling banyak digunakan masyarakat adalah chat

Ada banyak protocol yang digunakan dalam membangun aplikasi chatting seperti IRC, MTProto, YMSG dan yang terbaru websocket. Websocket merupakan teknologi terbaru yang ada pada HTML5 untuk mendukung koneksi dua arah antara client dan server secara lebih cepat dan ringan dibandingkan dengan metode HTTP tradisional.


Websocket Pusher

 
Websocket adalah protokol yang dikembangkan oleh HTML5 yang menerapkan komunikasi full – duplex antara server untuk diterapkan di web browser dan web server. Protokol Websocket dirancang untuk diterapkan di web browser dan web server, tetapi dapat digunakan oleh aplikasi client atau server. 

Protokol Websocket sendiri berbasis pada Transfer Control Protocol (TCP). Webscoket digunakan sebagai teknologi realtime pada aplikasi chatting yang akan dibangun dan websocket yang akan digunakan adalah websocket pusher

Kali ini saya berkeinginan untuk menerapkan teknologi protocol websocket pada aplikasi chatting sehingga diharapkan dapat memberikan kemudahan bagi pengguna (user) dalam berkomunikasi secara real-time.

Alat dan Bahan

 
Pada tahap ini saya merancang aplikasi chatting ini menggunakan beberapa software dan hardware antara lain :

1. Perangkat Keras (Hardware)
  • Laptop: Core i3 Processor
  • Hardisk : 500GB
  • Ram 4GB 
2. Smartphone Android
  • Android versi 5.0 Lolypop
  • Octa-core 1.5 GHz CPU
  • Internal Memory : 8 GB
  • RAM : 1 GB
3. Perangkat Lunak (Software)
  • Sistem Operasi Windows 10
  • Sublime Text 3
  • XAMPP
  • Android Studio
  • Web Browser Google Chrome 

Hasil Desain

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

1. 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

2. 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. 

3. 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. Pada tampilan halaman tambah grup chat terdapat dua button (tombol) yaitu tombol simpan berfungsi untuk  menyimpan grup yang telah dibuat agar terdaftar dan tombol cancel berfungsi untuk membatalkan proses pembuatan tambah grup.


4. Tampilan Halaman Undang Teman Grup Chat Mobile


Tampilan sistem untuk menampilkan Halaman Undang Teman Grup Chat pada aplikasi chatting web socket pusher, fungsinya 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. Pada tampilan halaman undang teman grup chat terdapat dua button (tombol) yaitu tombol simpan berfungsi untuk  menambahkan teman ke grup chat dan tombol cancel berfungsi untuk membatalkan proses undang teman ke grup.

5. Tampilan Halaman Daftar Grup Chat Mobile


Tampilan sistem untuk menampilkan Halaman Daftar Grup Chat pada aplikasi chatting web socket pusher, fungsinya 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.

6. Tampilan Halaman Grup Chat Mobile


Tampilan sistem untuk menampilkan Halaman Grup Chat pada aplikasi chatting web socket pusher, fungsinya 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 lalu memilih tombol undang dengan memasukkan email teman yang sudah register atau mendaftar. 
 
Fitur
  • Register
  • Login
  • Daftar Grup
  • Daftar Kontak
  • Level Akun
  • Logout
 
Level Akses
  • User 
 
Database

Tabel
  • grups
  • grup_users
  • grup_user_chats
  • messages
  • migrations
  • password_resets
  • status_chats
  • users
  • user_chats
    
Languages 

PHP 66.6%
Vue 13.8%
HTML 17.3%
Hack 2.3%
 
Source Code
 
Download Aplikasi Chatting Menggunakan Websocket Pusher yang dibuat dengan PHP dan MySQL. Setelah itu jalankan melalui server localhost Anda terlebih dahulu. Jika Anda berminat mendapatkan source code Aplikasi Chatting Menggunakan Websocket Pusher bisa menghubungi melalui halaman kontak.

Demikian artikel yang dapat saya sampaikan semoga dapat membantu dan bermanfaat. jika ada yang ingin sobat tanyakan bisa tulis di kolom komentar. Terimakasih
Next Post Previous Post
No Comment
Add Comment
comment url