Dalam artikel kali ini, kita akan membuat sebuah aplikasi chat secara bertahap. Yang pertama kita lakukan sekarang adalah membuat sebuah web server yang dimana aplikasi chat tersebut berjalan pada web server tersebut. Web server yang kita buat menggunakan Node.js dan modul Express.js. Sebelum melakukan tahapan ini, pastikan teman-teman sudah menginstall Node.js.
Tahapan
1. Buat folder baru/directory dengan nama chat-app.
2. Buka terminal dan masuk ke directory chat-app yang sudah dibuat tadi, bisa menggunakan git bash, powershell atau terminal linux jika teman-teman menggunakan linux. Lalu lakukan npm init pada directory chat-app.
npm initKarena saya menggunakan git bash, maka outputnya akan seperti ini.
AQN Developer@LAPTOP-B2JFFQ5L MINGW64 ~/Documents/Training/chat-app
$ git init
Initialized empty Git repository in C:/Users/AQN Developer/Documents/Training/chat-app/.git/
3. Install modul express.
npm i [email protected] 4. Buat directory/folder src dan public. Maka kalau di list akan seperti ini.
AQN Developer@LAPTOP-B2JFFQ5L MINGW64 ~/Documents/Training/chat-app (master)
$ ll
total 28
drwxr-xr-x 1 AQN Developer 197121 0 Oct 18 09:41 node_modules/
-rw-r--r-- 1 AQN Developer 197121 13422 Oct 18 09:41 package-lock.json
drwxr-xr-x 1 AQN Developer 197121 0 Oct 18 09:53 public/
drwxr-xr-x 1 AQN Developer 197121 0 Oct 18 09:53 src/
5. Didalam folder src, buat file index.js menggunakan code editor, disini saya menggunakan visual studio code atau pakai yang biasa teman-teman gunakan. Lalu tulis source code ini.
const path = require('path')
const express = require('express')
const app = express()
const port = process.env.PORT || 3000
const publicDirectoryPath = path.join(__dirname,'../public')
app.use(express.static(publicDirectoryPath))
app.listen(port, () => {
console.log(`Server berjalan pada port ${port}`)
})
Source code diatas berfungsi sebagai Webserver yang nantinya akan kita gunakan digunakan untuk websocket dengan socket.io.
app.listen(port, () => {
console.log(`Server berjalan pada port ${port}`)
})Statement diatas digunakan agar web server dapat diakses sesuai port yang ditentukan yaitu port 3000.
const publicDirectoryPath = path.join(__dirname,'../public')
PublicDirectory path digunakan sebagai directory public. Directory public ini bisa digunakan sebagai lokasi asset seperti file css dan image. Lalu agar express dapat menggunakan directory public tersebut maka gunakan app.use seperti ini.
app.use(express.static(publicDirectoryPath))Statement diatas berfungsi agar path public bisa digunakan dan diakses oleh express.
6. Buat file index.html pada directory public.
<!DOCTYPE html>
<head>
</head>
<body>
Chat app
</body>
</html>
Jika sudah dilakukan semua maka susunan directory dan filenya akan seperti ini.
Apabila sudah sesuai, jalankan kode yang sudah kita buat dengan cara:
- Masuk ke directory chat-app dengan terminal.
- Jalankan command
'node src/index.js‘ tanpa tanda petik. Maka hasilnya akan seperti ini.
- Lalu teman-teman buka browser dan buka url
http://localhost:3000Maka hasilnya akan seperti ini di Browser yang artinya kita sudah membuat webserver untuk websocket yang akan kita lanjutkan nanti dan bisa diakses dari browser.
Demikian tulisan kali ini dan akan dilanjut pada artikel berikutnya. Terima kasih banyak sudah mampir.