Membuat Halaman Chat Socket.io dan Vue.js

Pada tahapan inilah halaman chat akan Anda lakukan, emang benar halaman chat ini hanya pesan umum. Jadi semua orang bisa mengirim pesan dan semua orang juga akan tahu. Suatu saat saya akan membuat pesan pribadi ataupun group.

Daftar isi:

1. Skrip berkas chat.vue

Saya sudah menyiapkan skrip seperti dibawah ini yang hasilnya akan memiliki bidang untuk memasukan teks pesan yang akan Anda kirim. Silakan salin dan tempelkan pada berkas chat.vue.

<template>
    <div class="columns is-centered">
        <div class="column is-6">
            <form @submit.prevent="submit" method="post">
                <div class="field">
                    <div class="control">
                        <input v-model="content" type="text" class="input" placeholder="tulis pesan...">
                    </div>
                </div>
            </form>
            <div class="content mt-5">
                <div class="columns is-multiline is-mobile">
                    // skrip-1
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// skrip-2
</script>

2. Menambahkan skrip

Jangan sampai disitu saja masih ada beberapa skrip yang saya pecah agar lebih mudah menjelaskannya.

2.1 Skrip-1

Salin dan tempelkan pada komentar skrip-1.

<template
    v-for="(item, index) in data"
    :key="index"
>
    <div class="column is-6">
        <article v-if="item.name != name" class="message">
            <div class="message-header">
                <strong>{{ item.name }}</strong>
            </div>
            <div class="message-body">
                {{ item.content }}
            </div>
        </article>
    </div>
    <div class="column is-6">
        <article v-if="item.name == name" class="message">
            <div class="message-body">
                {{ item.content }}
            </div>
        </article>
    </div>
</template>

Jadi, bila variabel data memiliki data dari pesan yang dikirim oleh seseorang ataupun Anda sendiri. Maka pesan tersebut akan dimuat (ditampilkan) pada skrip diatas, jika yang mengirim pesan Anda sendiri maka pesan tersebut tidak memiliki nama pengirim. Begitu pula dengan sebaliknya jika orang lain yang kirim pesan, maka nama akan diterahkan.

2.2 Skrip-2

Salin dan tempelkan pada komentar skrip-2.

import io from 'socket.io-client'

export default {
    data() {
        return {
            socket: io('http://localhost:3000'),
            name: '',
            content: '',
            data: []
        }
    },

    created() {
        this.socket.on('get-content', (data) => {
            this.data.unshift(data)
        })
    },

    methods: {
        submit() {
            let obj = {
                name: this.name,
                content: this.content
            }

            this.data.unshift(obj)
            this.socket.emit('send-content', obj)

            this.content = ''
        }
    },

    mounted() {
        if (localStorage.getItem('name')) {
            this.name = localStorage.getItem('name')
        } else {
            this.$router.push({
                name: 'login'
            })
        }
    }
}

Pada skrip diataslah proses pesan waktu nyata akan dilakukan sebelum membahas tersebut saya mulai dari proses umum dulu.

Mulai dari properti mounted()

Karena properti mounted() lebih dulu akan diproses saat halaman sudah selesai melakukan pemuatan maka terjadi proses seperti ini. Jika variabel name pada localStorage ada (true), maka akan menambahkan ke variabel name dari properti data(). Sedangkan jika false maka akan mengarahkan ke halaman login.

Mulai dari properti methods

Pada properti tersebut memiliki fungsi submit() yang memunginkan untuk mengirim pesan. Mohon perhatikan pada variabel obj yang terdapat name dan content, itu dilakukan untuk mengirim data ke variavel data dan websocket (this.socket.emit('send-content', obj)).

Proses menerima pesan dari websocket Silakan untuk melakukan import untuk socket.io-client karena ini dilakukan untuk disisi klien bukan peladen. Saya membuat variavel socket untuk menjadikan variabel baru socket.io (socket: io('http://localhost:3000')) dan saya memberikan parameter ersebut karena itu berhubungan dengan alamat peladen socket.io.

Jadi proses menerima pesan dari orang lain akan dilakukan pada properti created() kemudian data yang akan diterima akan ditambahkan ke variabel data.

Sampai disinilah proses halaman chat dan mungkin kelihatan sulit untuk mengerti, seperti halnya saya waktu saat memulai dari awal dan itu sangat membingungkan untuk dipelajari.

Catatan: Jangan terburu-buru sampai disini saja, Anda perlu membangun peladen untuk websocket-Nya yaitu socket.io silakan ikuti tutorial terakhir.

Tampilan bidang pesan:

hasil