unisbadri.com » Python Java Golang Typescript Kotlin Ruby Rust Dart PHP
Web Socket

Web Socket #

WebSocket adalah protokol komunikasi yang memungkinkan interaksi dua arah antara klien (misalnya, browser web) dan server melalui satu koneksi TCP. Ini berbeda dengan HTTP tradisional, di mana komunikasi bersifat satu arah (klien mengirim permintaan, server mengirim respons). Dengan WebSocket, baik klien maupun server dapat mengirim data kapan saja setelah koneksi dibuka, menjadikannya ideal untuk aplikasi real-time seperti obrolan, notifikasi, permainan online, dan streaming data.

Di Ruby, ada beberapa cara untuk mengimplementasikan WebSocket, salah satunya adalah dengan menggunakan gem seperti Faye::WebSocket atau ActionCable jika Anda bekerja dengan Ruby on Rails.

Menggunakan Faye::WebSocket di Ruby #

Faye::WebSocket adalah gem yang memudahkan implementasi WebSocket dalam aplikasi Ruby yang tidak tergantung pada framework seperti Rails.

Menginstal Faye::WebSocket #

Untuk menggunakan Faye::WebSocket, pertama-tama Anda perlu menginstalnya:

gem install faye-websocket

Atau tambahkan ke dalam Gemfile Anda:

gem 'faye-websocket'

Kemudian jalankan:

bundle install

Membuat WebSocket Server Sederhana #

Berikut adalah contoh sederhana dari server WebSocket menggunakan Faye::WebSocket:

require 'faye/websocket'
require 'eventmachine'

EM.run do
  @clients = []

  EM::WebSocket.run(host: "0.0.0.0", port: 8080) do |ws|
    ws.onopen do |handshake|
      puts "WebSocket connection open"
      @clients << ws
    end

    ws.onmessage do |msg|
      puts "Received message: #{msg}"
      @clients.each { |client| client.send("Echo: #{msg}") }
    end

    ws.onclose do |code, reason|
      puts "WebSocket connection closed: #{code} - #{reason}"
      @clients.delete(ws)
    end
  end
end

Penjelasan:

  • EM.run: EM (EventMachine) adalah event loop yang memungkinkan aplikasi Ruby untuk menangani I/O non-blocking, sangat penting untuk aplikasi WebSocket.
  • EM::WebSocket.run: Memulai server WebSocket yang mendengarkan pada host dan port tertentu.
  • ws.onopen: Blok ini dipanggil ketika klien terhubung ke server.
  • ws.onmessage: Blok ini dipanggil setiap kali server menerima pesan dari klien.
  • ws.onclose: Blok ini dipanggil ketika koneksi WebSocket ditutup.

Menjalankan Server #

Simpan skrip di atas dalam file, misalnya websocket_server.rb, dan jalankan dengan:

ruby websocket_server.rb

Server ini sekarang mendengarkan koneksi WebSocket pada port 8080.

Membuat Klien WebSocket Sederhana di JavaScript #

Untuk menguji server WebSocket, Anda dapat membuat klien sederhana dalam JavaScript yang berjalan di browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client</h1>
    <input type="text" id="message" placeholder="Enter message">
    <button onclick="sendMessage()">Send</button>
    <div id="output"></div>

    <script>
        const ws = new WebSocket('ws://localhost:8080');

        ws.onopen = function() {
            console.log('Connected to WebSocket server');
        };

        ws.onmessage = function(event) {
            const output = document.getElementById('output');
            const message = document.createElement('p');
            message.textContent = 'Server: ' + event.data;
            output.appendChild(message);
        };

        ws.onclose = function() {
            console.log('Disconnected from WebSocket server');
        };

        function sendMessage() {
            const input = document.getElementById('message');
            ws.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

Penjelasan:

  • ws.onopen: Dipanggil ketika klien berhasil terhubung ke server WebSocket.
  • ws.onmessage: Dipanggil ketika klien menerima pesan dari server.
  • ws.onclose: Dipanggil ketika koneksi dengan server ditutup.
  • sendMessage: Fungsi untuk mengirim pesan dari klien ke server.

Menggunakan WebSocket dengan Ruby on Rails (ActionCable) #

ActionCable adalah framework WebSocket bawaan dalam Ruby on Rails yang memungkinkan pengembang untuk mengintegrasikan fitur real-time dengan mudah dalam aplikasi Rails.

Menyiapkan ActionCable #

Jika Anda menggunakan Rails, ActionCable sudah terintegrasi dan dapat digunakan langsung. Pastikan Anda memiliki Rails versi terbaru yang sudah mendukung ActionCable.

Membuat Channel ActionCable #

Channel adalah unit logis dalam ActionCable di mana komunikasi dua arah terjadi antara klien dan server.

Contoh:

Jalankan perintah berikut untuk membuat channel:

rails generate channel chat

Ini akan membuat beberapa file:

  • app/channels/chat_channel.rb
  • app/javascript/channels/chat_channel.js

Mengatur ChatChannel di Rails #

Edit file app/channels/chat_channel.rb:

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_#{params['room']}_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    ActionCable.server.broadcast "chat_#{params['room']}_channel", message: data['message']
  end
end

Penjelasan:

  • subscribed: Dipanggil ketika klien berlangganan ke channel.
  • stream_from: Menyiapkan aliran data dari channel tertentu.
  • speak: Metode ini akan menerima data dari klien dan kemudian memancarkan (broadcast) data tersebut ke semua klien yang berlangganan ke channel yang sama.

Mengatur Klien di JavaScript #

Edit file app/javascript/channels/chat_channel.js:

import consumer from "./consumer"

consumer.subscriptions.create({ channel: "ChatChannel", room: "1" }, {
  connected() {
    console.log("Connected to the chat channel.")
  },

  disconnected() {
    console.log("Disconnected from the chat channel.")
  },

  received(data) {
    console.log("Received:", data.message)
    const chatBox = document.getElementById('chat-box');
    chatBox.innerHTML += `<p>${data.message}</p>`;
  },

  speak(message) {
    this.perform('speak', { message: message });
  }
});

// Example usage: (Put this in a button click event or similar)
// App.cable.subscriptions.subscriptions[0].speak("Hello World!");

Penjelasan:

  • connected: Dipanggil ketika klien berhasil terhubung ke server.
  • disconnected: Dipanggil ketika koneksi ke server terputus.
  • received: Dipanggil setiap kali pesan diterima dari server.
  • speak: Mengirim pesan dari klien ke server.

Menambahkan Interface di View Rails #

Edit file app/views/layouts/application.html.erb atau view lain yang relevan untuk menambahkan interface chat sederhana:

<div id="chat-box"></div>
<input type="text" id="chat-input" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>

<script>
  function sendMessage() {
    const message = document.getElementById('chat-input').value;
    App.cable.subscriptions.subscriptions[0].speak(message);
    document.getElementById('chat-input').value = '';
  }
</script>

Penjelasan:

  • sendMessage: Fungsi JavaScript untuk mengirim pesan dari klien ke server menggunakan speak.

Menjalankan Aplikasi WebSocket di Rails #

Setelah semua konfigurasi selesai, Anda bisa menjalankan aplikasi Rails:

rails server

ActionCable secara otomatis akan berjalan bersamaan dengan server Rails, dan klien Anda dapat mulai berinteraksi dengan server melalui WebSocket.

Mengatasi Masalah Umum dalam WebSocket #

Koneksi Tidak Stabil #

WebSocket terkadang bisa terputus karena berbagai alasan. Pastikan untuk menangani event onclose di klien dan mencoba untuk reconnect jika diperlukan.

Skala dan Kinerja #

Untuk aplikasi skala besar, pertimbangkan untuk menggunakan Redis sebagai backend untuk menyimpan pesan atau status koneksi. ActionCable mendukung Redis untuk keperluan ini.

# config/cable.yml
production:
  adapter: redis
  url: redis://localhost:6379/1

Keamanan #

Pastikan komunikasi WebSocket Anda diamankan dengan TLS/SSL. Gunakan wss:// untuk kone

ksi aman.

Kesimpulan #

WebSocket di Ruby memungkinkan Anda untuk membangun aplikasi real-time yang interaktif dengan komunikasi dua arah antara server dan klien. Dengan menggunakan gem seperti Faye::WebSocket atau framework seperti ActionCable di Rails, Anda dapat dengan mudah mengimplementasikan fitur real-time dalam aplikasi Anda. Penerapan WebSocket sangat bermanfaat untuk fitur seperti chat, notifikasi langsung, dan streaming data. Jika Anda memerlukan bantuan lebih lanjut atau memiliki pertanyaan spesifik, jangan ragu untuk bertanya!

« Socket
Web Server »