Vue: Contoh Chating Sederhana Menggunakan Socket.io

Aku sudah lama mengenal Socket.io. Hanya saja, sampai saat ini belum begitu paham cara kerjanya bagaimana. Hal ini dikarenakan oleh mindsetku mengenai Javascript adalah untuk client side. Sedangkan socket.io ini terdiri dari server side dan client side. Selama ini, aku belum mampu membedakan keduanya. Oleh sebab itu, contoh ini aku buat untuk memudahkan pemahaman.

Setup Server Side

Pada kesempatan kali ini, aku membuat kodingan server side menggunakan nodejs dasar agar mudah dipahami. Contoh kodingan untuk server side adalah sebagi berikut:

const app = require("express")();
const httpServer = require("http").createServer(app);
const options = { /* ... */ };
const io = require("socket.io")(httpServer, options);

io.on("connection", socket => {
    console.log("tersambung:" + socket.id);
    socket.on('sendMessage', function(data) {
        io.emit('getMessage', data)
        console.log(data)
    });
});

httpServer.listen(8080);

Backend nodejs di atas disimpan menggunakan nama index.js lalu dapat dijalankan menggunakan perintah atau command node index.js. Setelah command tersebut dijalankan maka akan menyalakan server dengan alamat http://localhost:8080. Ini adalah alamat server yang akan menghandel live streaming data menggunakan Socket.io.

Setup Client Side

Bagian ini aku menggunakan Vue Component dengan dukungan style dari Vuetify. Aku jalankan dari aplikasi Laravel. Kodingannya adalah sebagai berikut:

<template>
    <v-container>
       <v-row>
           <v-col cols="12" md="4">
               <v-card>
                   <v-card-text class="py-3">
                       <v-text-field dense outlined label="Name" v-model="field.name"/>
                       <v-text-field dense outlined label="Message" v-model="field.message"/>
                   </v-card-text>
                   <v-card-actions class="justify-end">
                       <v-btn color="success" @click="sendData">Kirim Data</v-btn>
                   </v-card-actions>
               </v-card>
           </v-col>
           <v-col cols="12" md="8">
               <v-list>
                   <template v-for="(item, index) of data.message">
                       <v-list-item :key="index">
                           <v-list-item-content>
                               <v-list-item-title v-text="item.name"/>
                               <v-list-item-subtitle v-text="item.message"/>
                           </v-list-item-content>
                       </v-list-item>
                   </template>
               </v-list>
           </v-col>
       </v-row>
    </v-container>
</template>

<script>
import io from 'socket.io-client'

export default {
    data() {
        return {
            socket: io('http://localhost:8080/', {
                transports: ["websocket", "polling"]
            }),
            data: {
                message: []
            },
            field: {
                name: null,
                message: null
            }
        }
    },
    methods: {
        sendData() {
            this.socket.emit('sendMessage', {name: this.field.name, message: this.field.message})
        }
    },
    created() {
        this.socket.on('getMessage', (data) => {
            let chat = {
                name: data.name,
                message: data.message
            }
            this.data.message.push(chat)
        })
    }
}
</script>

Buka beberapa tab, window, atau gunakan browser lain untuk menguji apakah realtime chat ini dapat berfungsi dengan baik. Jika berhasil, maka akan ada tampilan daftar nama dan pesan di sebelah kanan from untuk mengirim chat.