Tutorial Implementasi Websocket di React Native

Assalamu'alaikum Wr. Wb

        Setelah kemarin saya membuat artikel tentang cara implementasi websocket pada golang, pada artikel saya kali ini saya akan membahas tentang cara implementasi websocket pada aplikasi android yang menggunakan Framework React Native, websocket adalah protokol yang memungkinkan komunikasi dua arah antara server dan client secara real time, dengan websocket client dapat langsung menerima data dari server tanpa melakukan request terlebih dahulu, langsung saja tutorial implementasi websocket pada aplikasi android React Native adalah sebagai berikut:

1. Mengkoneksikan client dengan server
         Langkah pertama adalah memanggil class Websocket guna mengkoneksikan aplikasi client (React Native) dengan aplikasi server, contoh kodenya adalah sebagai berikut:
   
   
   
   
   const [ channel, setChannel ] = useState(null);
   
   useEffect(() => {
   
         const ws = new WebSocket("ws://example.com");
   
         setChannel(ws);
   
   });
   
   
   
   
        Pada kode di atas kita menggunakan function useEffect dari React Hooks dan menggunakan url websocket ws://example.com sebagai contoh url websocket, kita tidak memerlukan plugin tambahan untuk websocket pada React Native kecuali jika server websocket kita belum menggunakan ssl certificate resmi.
   
   
2. Memanggil function dari websocket untuk menangani data dan koneksi websocket
         Terdapat beberapa function dari websocket yang dapat digunakan untuk menangani data seperti mengirim data, menerima data, handle on open, handle on error, dan handle on close, untuk kode-kode nya adalah sebagai berikut:
   
   
   
   
   Function yang dijalankan saat berhasil tersambung dengan server websocket: 
   
   ws.onopen  = () => {
   
   });
   
   Function yang dijalankan saat client menerima pesan: 
   
   ws.onmessage  = () => {
   
   });
   
   Function yang dijalankan saat koneksi websocket terjadi error: 
   
   ws.onerror  = () => {
   
   });
   
   
   Function yang dijalankan saat koneksi websocket terputus: 
   
   ws.onclose  = () => {
   
   });
   
   Function untuk mengirim pesan dari client ke server websocket: 
   
   channel.send();
   
   Function untuk memutus koneksi websocket server dari client: 
   
   ws.close();
   
   
   
   
            Kode-kode di atas masih ada kaitannya dengan langkah pertama yang mana ws berasal dari kode untuk koneksi websocket dan channel berasal dari state channel yang sudah berisi kode koneksi websocket setelah terkoneksi.
   
   
3. Contoh kode lengkap
    Untuk contoh kode lengkapnya adalah sebagai berikut:
   
   
   
   
   
   import React, {useState, useEffect} from "react";
   import {View, Text, TouchableOpacity} from "react-native"
   
    const ExampleWS = () => {
   
         const socketRef = useRef(null);
   
         useEffect(() => {
   
              async function handleWS(() => {
    
                  socketRef.current = new WebSocket("ws://example.com");
    
                  socketRef.current.onopen  = () => {
                       console.log("on open");
                  });
   
                  socketRef.current.onmessage  = (message) => {
                       console.log("receive message: ", message);
                  });
   
                   socketRef.current.onerror  = () => {
                      console.log("connection ws error");
                  });
   
                   socketRef.current.onclose  = () => {
                      console.log("connection closed");
                  });
   
              });
   
              handleWS();
   
         });
   
         const sendMessage = () => {
              if( socketRef.current){
                 socketRef.current.send("tes");
             }
        }
   
         return (
             <View>
                <TouchableOpacity onClick={() => sendMessage()} >
                 <Text></Text>
                 </TouchableOpacity>
             </View>
         )
   
   }
   
   export default ExampleWS;