Membangun Server Socket.io dan Express

Pada tahapan terakhir ini Anda akan membangun peladen untuk websocket-Nya yaitu dengan socket.io dan express. Kenapa menggunakan express? karena saya hanya mengikuti saran dari dokumentasi resmi socket.io dan beberapa contoh peladen websocket.

Daftar isi:

1. Skrip berkas server.js

Salin dan tempelkan pada berkas server.js pada direktori utama.

const app = require("express")()
const server = require("http").createServer(app)
const io = require("socket.io")(server, {
    cors: {
        origin: 'http://localhost:8080'
    }
})

io.on('connection', (socket) => {
    socket.on('send-content', (data) => {
        socket.broadcast.emit('get-content', data)
    })
})

server.listen(3000, () => {
    console.log('listening on localhost:3000');
})

Pada versi socket.io 3 Anda harus menambahkan cors, kalau tidak akan terjadi kesalahan permintaan yang terjadi disisi klien.

Skrip pembahasan

socket.on('send-content', (data) => {
    socket.broadcast.emit('get-content', data)
})

Jadi, pada tutorial sebelumnya Anda akan melihat kata send-content dan get-content. Hal yang saya amati maksud dari fungsi on() itu untuk menerima data dan emit() untuk mengirim data. Jadi skrip itulah untuk proses mengirim dan menerima pesan.

Catatan: Perhatikan bawasannya peladan websocket dengan alamat localhost:3000 dan klien localhost:8080, hanya beda pada port-Nya saja.

2. Menambahkan debug

Agar lebih mudah cara menjalankannya peladen websocket silakan tambahkan skrip dibawah ini pada berkas package.json.

"scripts": {
    ...

    "socket": "node server.js"
}

3. Menjalankan server dan client

# Server (Socket.io)
yarn socket

# Client (Vue)
yarn server

Sampai disini tutorial sudah selesai dan sekarang bisa Anda lihat apakah proses tutorial yang Anda ikuti benar-benar berhasil atau tidak. Gambar dibawah ini merupakan hasil dari tutorial seri kali ini.

hasil

Membuat Realtime Chat Dengan Socket.io dan Vue.js