Realtime Chat dengan Html, Javascript dan Socket.io

Realtime Chat atau Realtime Data sering disebut dalam dunia programing adalah suatu hal akan sering digunakan dan sangat diperlukan. Dalam kesempatan ini kita akan membahas dan langsung mem praktik kan Realtime Data dengan Chat App.

Senjata yang akan kita gunakan adalah:

1. HTML

Sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. Platform umum yang sering digunakan sehingga akan mudah untuk di praktik kan.

2. Javascript

Javascript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript biasanya digunakan untuk olah data secara Client ke server namun juga bisa sebagai server ke client. Disini Javascript akan berfungsi GET POST data dari client atau HTML.

3. Socket.io

Apa itu Socket.Io?
Socket.io ada suatu library dari Node.JS yang berfungsi untuk menjembatani realtime data, Namun jangan salah socket.io tidak hanya bisa digunakan di Node.js. Socket.io bisa digunakan di multiplatform dan yang Paling penting Gratis tanpa Batasan jumlah / Unlimited.

Silahkan Berkenalan dengan Socket.io Disini : https://socket.io/

Ayo kita praktikan secara langsung:

1. Buat file index.html.

2. Initialisasi dahulu package.json di terminal.

   $npm init

3. Install socket.io dalam depedencies

$ npm i socket.io

4. install nodemon dalam dependencies, nodemon berfungsi untuk menjalankan Server socket.io.

$npm i --save-dev nodemon

5. Set devStart di package.json untuk menjalankan server nodemon.

"devStart": "nodemon server.js"

{
  “name”: “socket.io”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
    “devStart”: “nodemon server.js”
  },
  “author”: “Dhendik”,
  “license”: “ISC”,
  “dependencies”: {
    “socket.io”: “^2.3.0”
  },
  “devDependencies”: {
    “nodemon”: “^2.0.3”
  }
}

6. Coding script di Index.html.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <title>Realtime Chat</title>
  <script defer src=“http://localhost:3000/socket.io/socket.io.js”></script>
  <script defer src=“client.js”></script>
  <style>
    body {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
    }
    #message-container {
      width: 80%;
      max-width: 1200px;
    }
    #message-container div {
      background-color: #CCC;
      padding: 5px;
    }
    #message-container div:nth-child(2n) {
      background-color: #FFF;
    }
    #send-container {
      position: fixed;
      padding-bottom: 30px;
      bottom: 0;
      background-color: white;
      max-width: 1200px;
      width: 80%;
      display: flex;
    }
    #message-input {
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <div id=“message-container”></div>
  <form id=“send-container”>
    <input type=“text” id=“message-input”>
    <button type=“submit” id=“send-button”>Send</button>
  </form>
</body>
</html>

7. Buat Server dahulu server.js untuk initialisasi socket.io.

const io = require(‘socket.io’)(3000)
const users = {}
// Register User yang baru Masuk ke server dan melakukan Join
io.on(‘connection’, socket => {
  socket.on(‘new-user’, name => {
    users[socket.id] = name
    socket.broadcast.emit(‘user-connected’, name)
  })
  socket.on(‘send-chat-message’, message => {
    socket.broadcast.emit(‘chat-message’,
{ message: message, name: users[socket.id] })
  })
  socket.on(‘disconnect’, () => {
    socket.broadcast.emit(‘user-disconnected’, users[socket.id])
    delete users[socket.id]
  })
})
 

8. Buat client dahulu client.js disini menggunakan Javascript untuk GET POST data di HTML.

const socket = io(‘http://localhost:3000’)
const messageContainer = document.getElementById(‘message-container’)
const messageForm = document.getElementById(‘send-container’)
const messageInput = document.getElementById(‘message-input’)
//Client script untuk register User Baru
const name = prompt(‘What is your name?’)
appendMessage(‘You joined’)
socket.emit(‘new-user’, name)
//Chat message client / User
socket.on(‘chat-message’, data => {
  appendMessage(`${data.name}: ${data.message}`)
})
//Chat message pertanda user baru join
socket.on(‘user-connected’, name => {
  appendMessage(`${name} connected`)
})
//Chat Message pertanda User disconnected
socket.on(‘user-disconnected’, name => {
  appendMessage(`${name} disconnected`)
})
//Event post untuk Submit Message
messageForm.addEventListener(‘submit’, e => {
  e.preventDefault()
  const message = messageInput.value
  appendMessage(`You: ${message}`)
  socket.emit(‘send-chat-message’, message)
  messageInput.value = ”
})
//Event get misal ada message Baru dari User Lain 
function appendMessage(message) {
  const messageElement = document.createElement(‘div’)
  messageElement.innerText = message
  messageContainer.append(messageElement)
}

9. Jalankan Server socket.io

$npm run devStart

10. Berikut Hasilnya. Gambar dibawah menunjukan simulasi chat dari 2 User yang berbeda dan bisa Realtime.

Gmbar ini menunjukan simulasi chat dari 2 User yang berbeda

Jika ingin mencoba sendiri Anda bisa Clone Git dan ikuti arahannya: https://gitlab.com/Sendok/realtimechat.git

Sekian artikel yg bisa dibuat semoga bermanfaat.

Wassalamualaikum.

Realtime Chat dengan Html, Javascript dan Socket.io

Published by Dhendik Dwi Prasetyo

One comment on “Realtime Chat dengan Html, Javascript dan Socket.io”

Leave a Reply Cancel reply

You might also like

Published by Dhendik Dwi Prasetyo

One comment on “Realtime Chat dengan Html, Javascript dan Socket.io”

Leave a Reply Cancel reply