Pada tutorial sebelumnya kita sudah membuat handling untuk websocket dari sisi server, tutorial kali ini kita akan membuat handling dari sisi client dimana client akan bertindak sebagai penerima pesan atau notifikasi dari websocket dan juga mampu untuk mengirim pesan dan notifikasi ke server websocket.
Oke kita mulai saja eksperimennya, pertama buka kembali project laravel yang sudah kita buat sebelumya, kemudian kita akan membuat 4 route baru untuk 4 url yang akan kita gunakan untuk testing websocket ini dengan mengedit file web.php pada path routes/
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::group(array('prefix' => 'test/chat'), function() {
Route::get('user_1', function() {
return View::make('test.chat.user-1');
});
Route::get('user_2', function() {
return View::make('test.chat.user-2');
});
Route::get('user_admin', function() {
return View::make('test.chat.user-admin');
});
Route::get('user_vendor', function() {
return View::make('test.chat.user-vendor');
});
});
Route::get('/', function () {
return view('welcome');
});
Setelah itu kita akan membuat UI atau tampilannya dengan membuat 4 file baru pada path resources/views/test/chat/ masing-masing file tersebut:
user-1.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user 1</title>
</head>
<body>
<button onclick="register()">Register</button><br>
<button onclick="send()">Send</button>
<script>
var conn = new WebSocket('ws://0.0.0.0:8080');
conn.onopen = function(e) {
console.log("Connection established!");
setInterval(register, 60000);//1minute keep connection
};
conn.onmessage = function(e) {
console.log(e.data);
};
function register() {
conn.send(JSON.stringify({command: "register", userId: "1"}));
}
function send() {
conn.send(JSON.stringify({command: "message", to: "2", from: "1", data: {message: "halo user 2"}}));
}
</script>
</body>
</html>
user-2.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user 2</title>
</head>
<body>
<button onclick="register()">Register</button><br>
<button onclick="send()">Send</button><br>
<script>
var conn = new WebSocket('ws://0.0.0.0:8080');
conn.onopen = function(e) {
console.log("Connection established!");
setInterval(register, 60000);//1minute keep connection
};
conn.onmessage = function(e) {
console.log(e.data);
};
function register() {
conn.send(JSON.stringify({command: "register", userId: "2"}));
}
function send() {
conn.send(JSON.stringify({command: "message", to: "1", from: "2", data: {message: "halo user 1"}}));
}
</script>
</body>
</html>
user-admin.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user admin</title>
</head>
<body>
<button onclick="register()">Register</button><br>
<button onclick="send()">Send to user</button><br>
<button onclick="sendA()">Send to global (khusus admin)</button><br>
<script>
var conn = new WebSocket('ws://0.0.0.0:8080');
conn.onopen = function(e) {
console.log("Connection established!");
setInterval(register, 60000);//1minute keep connection
};
conn.onmessage = function(e) {
console.log(e.data);
};
function register() {
conn.send(JSON.stringify({command: "register", userId: "3"}));
}
function send() {
conn.send(JSON.stringify({command: "message", to: "1", from: "3", data: {message: "halo user 1"}}));
}
function sendA() {
conn.send(JSON.stringify({command: "sendAll", data: {message:"halo global"}, from: "3"}));
}
</script>
</body>
</html>
user-vendor.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>user vendor</title>
</head>
<body>
<button onclick="register()">Register</button><br>
<button onclick="send()">Send to user</button><br>
<button onclick="sendC()">Send to connection (khusus vendor)</button>
<script>
var conn = new WebSocket('ws://0.0.0.0:8080');
conn.onopen = function(e) {
console.log("Connection established!");
setInterval(register, 60000);//1minute keep connection
};
conn.onmessage = function(e) {
console.log(e.data);
};
function register() {
conn.send(JSON.stringify({command: "register", userId: "4"}));
}
function send() {
conn.send(JSON.stringify({command: "message", to: "2", from: "4", data: {message: "halo user 2"}}));
}
function sendC() {
conn.send(JSON.stringify({command: "sendConnection", data: {message: "halo kampret - kampret"}, to: [1,2]}));
}
</script>
</body>
</html>
Jika sudah selesai semua saatnya kita test saya akan test dengan 3 browser yang berbeda yaitu chrome, safari, dan firefox dan hasilnya akan tampak seperti ini,
Cara ngetestnya mudah pertama klik tombol register dulu untuk masing-masing page, ini berguna untuk mendaftarkan ID resources atau ID dari masing-masing page pada websocket, agar page tersebut dapat dikirimi chat atau notifikasi dari suatu user.
Pada user admin terdapat tombol "Send to global (khusus admin)" ini berguna untuk mengirim sebuah chat atau notifikasi kepada semua page yang sudah terdaftar dengan mengklik tombol register tadi, sedangkan tombol "Send to connection (khusus vendor)" digunakan untuk mengirim chat atau notifikasi kepada group tertentu dengan memberikan array user id yang terdaftar.
===DONE!===
