Web Chat – Facebook Like

Melihat web chat facebook mantep banget deh, pengen coba bikin tetapi mau diimplementasi dimana ya ? bingung juga. Kebetulan bos lg punya ide bikin sesuatu jadi deh kepikiran gimana kalau ditambahin web chat.

Konsep nya mirip seperti facebook, yang berbeda jika facebook person-to-person chat box, kalau saya mau bikin seperti biasa yaitu chat-room, tetapi tidak terbatas. Dari segi UI saya ambil contoh dari facebook beserta gambar – gambarnya, mudah-mudahan gak di komplen karena ini tidak dijual, yaitu hanya sebagai bahan pengetahuan publik mengenai bagaimana cara membangun Web Chat seperti yang diimplementasi oleh facebook.

Teknologi dan Konsep yang akan kita gunakan adalah : Apache, PHP, MySQL, Javascript, jQuery, JSON, XHTML/DHTML, CSS

Jadi mari kita mulai !!!!!!

Tempat Penyimpanan Interaksi Chat

Kita akan membuat 4 buah tabel :

1. chat_activity

2. chat_user_activity

3. chat_user_last_activity

4. chat_user_room

SQL Statement nya sebagai berikut :

CREATE TABLE IF NOT EXISTS `chat_activity` (
`activity_unid` bigint(15) NOT NULL auto_increment,
`room_unid` char(15) NOT NULL default '0',
`sender_unid` char(15) NOT NULL default '0',
`message` varchar(255) NOT NULL,
`date` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY  (`activity_unid`,`room_unid`,`sender_unid`,`date`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE IF NOT EXISTS `chat_user_activity` (
`i_activity` bigint(15) NOT NULL default '0',
`user_unid` char(15) NOT NULL,
`activity_type` tinyint(1) NOT NULL default '1',
`activity_unid` char(15) NOT NULL default '0',
`room_unid` char(15) NOT NULL default '0',
PRIMARY KEY  (`i_activity`,`user_unid`,`activity_unid`,`room_unid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `chat_user_last_activity` (
`user_unid` char(15) NOT NULL,
`i_activity` bigint(15) NOT NULL default '0',
PRIMARY KEY  (`user_unid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `chat_user_room` (
`user_unid` char(15) NOT NULL default '0',
`room_unid` char(15) NOT NULL default '0',
`room_name` char(100) NOT NULL,
`nickname` char(20) NOT NULL,
`typing` tinyint(1) NOT NULL default '0',
`active` tinyint(1) NOT NULL default '0',
`i_activity` bigint(15) NOT NULL,
`last_active` datetime NOT NULL default '0000-00-00 00:00:00',
`current_active` datetime NOT NULL default '0000-00-00 00:00:00',
`last_get_activity` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY  (`user_unid`,`room_unid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Struktur Folder

<folder_anda>/

—— images/

—— css/

—— js/

—— services/

Images

Chat-Images.zip

Ekstrak isi dari file diatas kedalam folder images/

CSS

CSS.zip

Ekstrak isi dari file diatas kedalam folder css/

JS

JS.zip

Ekstrak isi dari file diatas kedalam folder js/

Services

Services.zip

Config

Buat sebuah file dengan nama config.php dan simpan kedalam <folder_anda>, dengan isi sebagai berikut :

<?php

/* LOKASI SERVER MYSQL */
$db['hostname'] = "localhost";
/* USER SERVER MYSQL */
$db['username'] = "root";
/* PASSWORD SERVER MYSQL */
$db['password'] = "p";
/* DATABASE YANG AKAN DIPAKAI */
$db['database'] = "chat";

?>

HTML

<a href="http://www.feelinc.me/wp-content/uploads/index.zip" target="_self">index.html</a>

Copy file diatas kedalam <folder_anda>.

Pada file html ini harus dilakukan sedikit konfigurasi sesuai dengan tempat anda menyimpan web chat ini, yaitu pada bagian :

var _path = "";

Saya menggunakan subdomain http://chat.nowhere.com, maka tidak diperlukan perubahan.

Jika anda menggunakan seperti http://localhost/chat, maka harus dilakukan perubahan menjadi :

var _path = "/chat/";

DONE!!!!

Sekarang silahkan dicoba web chat anda, ada sedikit peraturan ketika menggunakan web chat ini yaitu ketika pertama kali menjalankan langkah nya :

1. Isi NickName yang anda inginkan

2. Kemudian pijit tombol Start Chat, kemudian tunggu sebentar, tidak akan memakan waktu lama jika menggunakan server lokal paling kurang dari 20 detik. Identifikasi proses initialisasi belum diterapkan, jika anda menginginkan silahkan tambahkan.

3. Kemudian pilih salah satu link yang tersedia : Store 1, Store 2, Store 3, dsb. Link – link tersebut digunakan sebagai Chat Room. Anda bisa menambahkan room – room lainya sebanyak mungkin dengan mengedit index.html, seperti :

<a href="#" onClick="chatOpen('1', this.innerHTML);return false;">Store 1</a>

Untuk melakukan uji coba lebih dari 1 user pada 1 komputer anda harus menggunakan browser yang berbeda, karena user-id disimpan pada cookie.

Web Chat ini untuk sementara baru bisa berjalan pada browser – browser tertentu, seperti :

- Firefox 3.x

- Safari 4 beta, Safari versi kurang dari 4 belum dicoba

- Opera 10 beta, Opera versi kurang dari 10 belum dicoba

Pada browser yang lain masih ditemukan masalah pada UI, tinggal memperbaiki CSS.

Terima Kasih, semoga bermanfaat.

FYI, artikel ini hanya untuk Web Developer, yang sudah mengenal javascript, AJAX, juga sudah sering menggunakan Web Developer Tools (firebug, web developer, etc).

“People Always Forget How Fast We Did A Job, But They Will Remember How well We Did It”

Category: Research