Socket.io adalah javascript library yang membantu pembuatan aplikasi web realtime lebih mudah. Dengan Socket.io, jembatan komunikasi antara client dan server dapat terjadi secara bidirectional (dua arah). Artinya, baik client ataupun server dapat berperan sebagai pengirim sekaligus penerima data. Komponen socket.io terdiri atas 2 bagian, yaitu client-side yang berjalan pada browser, dan server-side yang dapat digunakan sebagai modul untuk node.js.
API yang disediakan socket.io tidaklah begitu banyak, mempelajarinya pun bukan lagi perkara yang sulit. Untuk melakukan transaksi data, paling tidak kita cukup mengetahui 2 metode saja; emit() dan on(). Berikut cuplikan lengkap beserta penjelasannya.
Server
var http = require('http');
var app = http.createServer(function(request, response) {
.....
});
var io = require('socket.io').listen(app);
io.on('connection', function(socket) {
socket.on('pesan', function(data){
console.log("Client mengirim pesan: " + data);
});
socket.on('jumlah', function(data){
var hasil = data.a + data.b;
socket.emit("hasil", hasil);
});
socket.on('disconnect', function(){
console.log("Client disconnected");
});
});
app.listen(3000);
Method emit digunakan untuk mengirim pesan ke dari server ke client ataupun sebaliknya.
Prototype:
.emit(name [, …]);
Paling tidak ada 1 argumen yang digunakan sebagai parameter untuk metod ini, yaitu argumen event name. Argumen ini berperan sebagai indentifier ketika data telah sampai ditujuan. Kita juga dapat menambahkan argumen lain jika diperlukan. Tipenya bebas, dapat berupa nilai integer, pecahan, string ataupun objek.
Ketika data telah sampai ditujuan, client/server dapat menerimanya dengan method on(). Saat argumennya sesuai, maka data yang telah diterima akan segera diproses oleh fungsi handler yang sudah dibuat.
Prototype:
.on (name, handler);
function handler(data){
....
}
Agar lebih jelas, coba lihat cuplikan kode client-side nya sebagai berikut.
Client
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type='text/javascript'>
socket = io();
socket.emit("pesan","Hello world");
socket.emit("jumlah",{a:5,b:7});
socket.on('hasil', function(data) {
alert("Server mengirim 'hasil' = " + data);
});
</script>
Untuk melakukan komunikasi dengan server, pertama tama kita harus membuat objek socket.io.
socket = io();
Objek inilah yang akan digunakan sebagai handle dalam mengirim dan menerima data dari/ke server. Metodenya masih sama dengan yang digunakan pada kode server-side, yaitu memakai .emit() untuk mengirim dan .on() untuk menerima.
Full Source Code
index.js (Server)
var url = require('url');
var http = require('http');
var fs = require('fs');
var path = require("path");
var app = http.createServer(function(request, response) {
var uri;
uri = url.parse(request.url).pathname;
if (uri == '/') uri += 'index.html';
uri = path.join(__dirname,uri);
data = fs.readFile(uri, function(err,data){
if(err){
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
} else {
response.writeHead(200, {"Content-Type": 'text/html'});
response.write(data);
response.end()
console.log("Request OK");
}
});
});
var io = require('socket.io').listen(app);
io.on('connection', function(socket) {
socket.on('pesan', function(data){
console.log("Client mengirim pesan: " + data);
});
socket.on('jumlah', function(data){
var hasil = data.a + data.b;
socket.emit("hasil", hasil);
});
socket.on('disconnect', function(){
console.log("Client disconnected");
});
});
app.listen(3000);
index.html (Client)
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type='text/javascript'>
socket = io();
socket.emit("pesan","Hello world");
socket.emit("jumlah",{a:5,b:7});
socket.on('hasil', function(data) {
alert("Server mengirim 'hasil' = " + data);
});
</script>
</head>
<body>
.....
</body>
</html>
Sip, sudah. Kodenya cukup singkat, bukan? Kodenya sengaja saya buat bervariasi dengan baris kode seminimal mungkin, agar lebih mudah dipahami. Untuk contoh lainnya, silahkan kunjungi link berikut:
http://socket.io/docs/
Jika masih ada yang bingung, atau ada pertanyaan yang mengganjal, jangan sungkan untuk bertanya, ya.
Server
var http = require('http');
var app = http.createServer(function(request, response) {
.....
});
var io = require('socket.io').listen(app);
io.on('connection', function(socket) {
socket.on('pesan', function(data){
console.log("Client mengirim pesan: " + data);
});
socket.on('jumlah', function(data){
var hasil = data.a + data.b;
socket.emit("hasil", hasil);
});
socket.on('disconnect', function(){
console.log("Client disconnected");
});
});
app.listen(3000);
Method emit digunakan untuk mengirim pesan ke dari server ke client ataupun sebaliknya.
Prototype:
.emit(name [, …]);
Paling tidak ada 1 argumen yang digunakan sebagai parameter untuk metod ini, yaitu argumen event name. Argumen ini berperan sebagai indentifier ketika data telah sampai ditujuan. Kita juga dapat menambahkan argumen lain jika diperlukan. Tipenya bebas, dapat berupa nilai integer, pecahan, string ataupun objek.
Ketika data telah sampai ditujuan, client/server dapat menerimanya dengan method on(). Saat argumennya sesuai, maka data yang telah diterima akan segera diproses oleh fungsi handler yang sudah dibuat.
Prototype:
.on (name, handler);
function handler(data){
....
}
Agar lebih jelas, coba lihat cuplikan kode client-side nya sebagai berikut.
Client
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type='text/javascript'>
socket = io();
socket.emit("pesan","Hello world");
socket.emit("jumlah",{a:5,b:7});
socket.on('hasil', function(data) {
alert("Server mengirim 'hasil' = " + data);
});
</script>
Untuk melakukan komunikasi dengan server, pertama tama kita harus membuat objek socket.io.
socket = io();
Objek inilah yang akan digunakan sebagai handle dalam mengirim dan menerima data dari/ke server. Metodenya masih sama dengan yang digunakan pada kode server-side, yaitu memakai .emit() untuk mengirim dan .on() untuk menerima.
Full Source Code
index.js (Server)
var url = require('url');
var http = require('http');
var fs = require('fs');
var path = require("path");
var app = http.createServer(function(request, response) {
var uri;
uri = url.parse(request.url).pathname;
if (uri == '/') uri += 'index.html';
uri = path.join(__dirname,uri);
data = fs.readFile(uri, function(err,data){
if(err){
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
} else {
response.writeHead(200, {"Content-Type": 'text/html'});
response.write(data);
response.end()
console.log("Request OK");
}
});
});
var io = require('socket.io').listen(app);
io.on('connection', function(socket) {
socket.on('pesan', function(data){
console.log("Client mengirim pesan: " + data);
});
socket.on('jumlah', function(data){
var hasil = data.a + data.b;
socket.emit("hasil", hasil);
});
socket.on('disconnect', function(){
console.log("Client disconnected");
});
});
app.listen(3000);
index.html (Client)
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type='text/javascript'>
socket = io();
socket.emit("pesan","Hello world");
socket.emit("jumlah",{a:5,b:7});
socket.on('hasil', function(data) {
alert("Server mengirim 'hasil' = " + data);
});
</script>
</head>
<body>
.....
</body>
</html>
Sip, sudah. Kodenya cukup singkat, bukan? Kodenya sengaja saya buat bervariasi dengan baris kode seminimal mungkin, agar lebih mudah dipahami. Untuk contoh lainnya, silahkan kunjungi link berikut:
http://socket.io/docs/
Jika masih ada yang bingung, atau ada pertanyaan yang mengganjal, jangan sungkan untuk bertanya, ya.
0 comments