Membuat aplikasi chatting berbasis web: Socket io tutorial websocket menggunakan express js

Disini saya akan mencoba membuat aplikasi chatting berbasis web sederhana menggunakan socket io dan express js.

Apa itu websocket

• Komunikasi antara klien(browser) dan server
• Arus data secara real-time

Websocket adalah tekenologi canggih yang memungkinkan komunikasi interaktif secara real-time antara user dan server. Menggunakan protokol yang sama sekali berbeda yang memungkinkan aliran data dua arah. Dan ini membuatnya unik terhadap HTTP.

Jika kalian seorang pengembang, pasti kalian sudah tahu apa itu http atau https, setiap hari kalian akan melihatnya dibrowser kalian.

HTTP bekerja selalu diawali dengan sebuah pertanyan/permintaan untuk mendapatkan respon. Kalian harus selalu tanya terlebih dahulu ke server apakah ada pesan baru atau tidak. Begitulah seterusnya tanya dan tanya.

Berbeda dengan websocket dia secara sendirinya akan memberi respon atau pesan ke kita tanpa diminta/ditanya. 

Kalian hanya mendengarkan curhatan server jika server mempunyai pesan baru. Hahaha terlihat lebih praktis kan.

Websocket digunakan untuk :

1. Game online dengan banyak pemain
2. Pengeditan code secara kolaborasi
3. Aplikasi chatting
4. Kanvas gambar online
5. Aplikasi to-do realtime dengan banyak pengguna

Saya tidak akan panjang lebar untuk menjelaskan websocket karena keterbatasa pengetahuan, dan juga agar kalian penasaran untuk mencoba mengexplore lebih banyak tentang websocket. Banyak referensi pendukung jika kalian mau.

Dalam tutorial ini saya menggunakan socket io sebagai librarinya dan node js dengan express js sebagai servernya. Jika kalian belum install node js, download dan install terlebih dahulu di website resminya node js. 

Jika sudah, buat sebuah folder dan berinama "websocket". Buka command prompt dan arahkan dimana folder websocket berada. Masukan perintah 

npm init

Perintah ini akan menghasilkan file package.json sebagai deskripsi dari aplikasi yang kita buat. Kita akan ditanya mengenai aplikasi yang akan kita buat, Sebagai contoh :

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (websocket)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: crocodele
license: (ISC)
About to write to d:\Robi\Node\websocket\package.json:

{
  "name": "websocket",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "crocodele",
  "license": "ISC"
}


Is this ok? (yes) yes

Selanjutnya kita akan download framework express js yang populer dinunia nodejs. Caranya dengan perintah

npm install express --save

Setelah selesai kalian akan melihat folder dengan nama node_modules yang berisi dependency yang diperlukan.

Selanjutnya kika juga perlu install nodemon sebagai tools yang dibutuhkan server untuk bisa autoreload ketika kita merubah source code. Dengan perintah:

npm install nodemon --save-dev

Setelah selesai mari kita buat file index.js dan masukan kode dibawah ini:

var express = require("express");

//App setup
var app = express();
var server = app.listes(4000, function(){
 console.log("Listening to requests on port 4000");
});

File ini sebagai server yang digunakan untuk aplikasi kita yang bisa kita kases dengan port 4000. Mari kita coba apakah sudah jalan apa belum. Buka command prompt dan ketikan perintah

nodemon index

jika berhasil output yang keluar seperti:

[nodemon] 1.12.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node index index.js`
Listening to request on port 4000

Sekarang setelah server siap kita coba bikin folder baru dengan nama "public" didalam folder "websocket" sekalian bikin file baru dengan nama index.html dan style.css. Buka file index.html dan masukan kode dibawah ini :

<html>
   <head>
      <meta charset="utf-8">
      <title>websocket 101</title>
      <link href="/style.css" rel="stylesheet"/>
   </head>
   <body>
      <h1>Hello World</h1>
   </body>
</html>

lalu modifikasi index.js dan tambahkan kode dibawah ini:

app.use(express.static("public"));

kode tersebut akan membaca static file yang kita buat yaitu index.html. Coba refresh browser untuk melihat perubahannya.
Sekarang kita modifikasi file style.css dengan kode dibawah ini:

body {
   font-family: "Nunito";
}

h2 {
   font-size: 18px;
   padding: 10px 20px;
   color: #575ed8;
}

#crocodele-chat {
   max-width: 600px;
   margin: 30px auto;
   border: 1px solid #ddd;
   box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.05);
   border-radius: 2px;
}

#chat-window {
   height: 400px;
   overflow: auto;
   background: #f9f9f9;
}

#output p {
   padding: 14px 0px;
   margin: 0 20px;
   border-bottom: 1px solid #e9e9e9;
   color: #555;
}

#feedback p {
   color: #aaa;
   padding: 14px 0px;
   margin: 0 20px;
}

#output strong {
   color: #575ed8;
}

label {
   box-sizing: border-box;
   display: block;
   padding: 10px 20px;
}

input {
   padding: 10px 20px;
   box-sizing: border-box;
   background: #eee;
   border: 0;
   display: block;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #eee;
   font-family: Nunito;
   font-size: 16px;
}

button {
   background: #575ed8;
   color: #fff;
   font-size: 18px;
   border: 0;
   padding: 12px 0;
   width: 100%;
   border-radius: 0 0 2px 2px;
}

Socket io

Jika sudah mari kita install socket io. Socket io adalah librari javascript yang menangani komunikasi antara klien dan server secara realtime. Penjelasan lebih tentang socket.io bisa kalian kunjungi langsung ke website resminya Socket.io


Cara install socket.io kita tinggal pergi ke command prompt dan ketik perintah:

npm install socket.io --save

perintah tersebut akan mendownload semua package yang diperluka. Setelah itu buka index.js modifikasi menjadi

var express = require("express");
var socket = require("socket.io");

//App Setup
var app = express();
var server = app.listen(4000, function() {
   console.log("Listening to request on port 4000");
});

//Static files
app.use(express.static("public"));

//Socket Setup
var io = socket(server);

io.on("connection", function(socket) {
   console.log("made socket connection", socket.id);
});

Modifikasi index.html menjadi

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>websocket 101</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
      <link href="/style.css" rel="stylesheet"/>
   </head>
   <body>
      <h1>Hello World</h1>
      <script src="/chat.js"></script>
   </body>
</html>

disana kita tambahkan script socket.io.js yang kita ambil dari website resminya disini. dan juga menambahkan script chat.js. Karena kita belum punya file dengan nama chat.js kita buat terlebih dahulu dan isikan kode dibawah ini:

var socket = io.connect("http://localhost:4000");

untuk mencobanya kita tinggal ketikan perintah

nodemon index

lalu refresh browser dan lihat di command prompt, setiap kali kita refresh browser akan ada pesan "made socket connection dan id_socket" itu berarti server socket telah berhasil dibuat.

Lanjut ketahap selanjutnya, kita buka index.html hapus kode <h1>Hello World</h1> dengan kode dibawah ini :

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>websocket 101</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
      <link href="/style.css" rel="stylesheet"/>
   </head>
   <body>
      <div id="crocodele-chat">
         <div id="chat-window">
            <div id="output"></div>
         </div>
         <input type="text" id="handle" placeholder="Handle">
         <input type="text" id="message" placeholder="Message">
         <button type="button" id="send">Send</button>
      </div>
      <script src="/chat.js"></script>
   </body>
</html>

Jika tahapan diikuti dengan benar, tampilan didepan akan menjadi seperti dibawah ini;

Selanjutnya buka kembali chat.js tambahkan query DOM didalamnya untuk menangkap value yang diberikan di index

var message = document.getElementById("message");
handle = document.getElementById("handle");
btn = document.getElementById("send");
output = document.getElementById("output");

tambahkan emit event dibawahnya:

btn.addEventListener("click", function() {
   socket.emit("chat", {
      message: message.value,
      handle: handle.value
   });
});

dan tambahkan juga code untuk ngepush message ke HTML

socket.on("chat", function(data) {
   output.innerHTML +=
      "<p><strong> " + data.handle + ": </strong>" + data.message + "</p>";
});

kode emit event diatas ini digunakan ketika ngeklik button send dan memasukannya ke variable message dan handle, kemudian data dimasukan ke tag HTML dengan id "output".

Setelah event emit dibuat sekarang beralih ke index.js dan tambahkan kode dibawah ini dan tempatkan didalam io.on tepat dibawah console.log:

socket.on("chat", function(data) {
     io.sockets.emit("chat", data);
});

Sekarang coba buka command prompt dan jalankan perintah nodemon index, lalu refresh browser. Kita sudah bisa memasukan nama dan isi pesan. Pesan akan muncul diarea output. Coba tes dengan menggunakan dua browser.

Sekian tutorial kali ini, referensi code bisa kalian ambil di github, jangan lupa untuk share dan comment ya..

Terimakasih