Persiapan Realtime Chat Socket.io dan Vue.js

Mungkin Anda penasaran bagaimana menerapkan atau membuat pesan waktu nyata menggunakan pustaka Socket.io dan Vue.js. Saya harap Anda bisa menyelesaikan tutorial dan tidak ada kesalahan dalam mengikutinya secara bertahap.

Daftar isi:

1. Instal vue cli

Bagi Anda yang belum tahu apa itu Vue CLI, yaitu paket standar atau alat untuk pengembangan pustaka Vue.js. Jadi, Anda dapat dengan mudah untuk menggunakan fitur dari Vue.js baik dari melakukan instalasi Babel, TypeScript, PWA, Unit Testing, dan lainnya. Sekarang buka terminal Anda dan pastikan kalau Anda sudah mengistal node.js, kemudian jalankan perintah dibawah ini di terminal.

npm install -g @vue/cli
# ATAU
yarn global add @vue/cli

Catatan: Berdasarkan dari dokumen resmi Vue CLI menyarankan untuk menggunakan versi Node.js 8.9 atau lebih tinggi. Silakan cek situs resmi atau dilihat tautan berikut untuk syarat versi Node.js http://cli.vuejs.org/guide/installation.html.

2. Membuat projek vue 3

Sekarang waktunya Anda menginstal projek Vue.js 3, kenapa nggak buat manual saja? kalau buat manual mungkin tutorial ini kelihatan panjang dan sedikit membosankan. Maka dari itu saya memutuskan untuk menggunakan cara ini.

  1. Buka terminal dan masuk ke direktori untuk menyimpan projek,
  2. Masukan perintah vue create realtime-chat-vue kemudian enter,
  3. Pilih opsi Vue 3 Preview dengan gulir ke bawah (tombol bawah di keyboard) dan enter, dan
  4. Tunggu beberapa saat hingga proses instalasi selesai (kurang lebih 5menit).

Hasil proses instalasi:

instalasi

Setelah proses selesai maka Anda akan menemukan informasi seperti ini:

 $ cd realtime-chat-vue
 $ yarn serve

Maksudnya, Anda disuruh masuk ke direktori realtime-chat-vue dan menjalankan projeknya tinggal menjalankan yarn serve atau npm serve.

Catatan: Silakan pilih versi Vue.js 3 berdasarkan opsi yang akan Anda pilih dan waktu proses instalasi tergantung jaringan dan kecepatan perangkat Anda.

3. Instal socket.io dan express

Sekarang saatnya Anda menginstal paket socket.io dan express, perhatikan tutorial ini menggunakan socket.io versi 3 yang memiliki perbedaan. Silakan lakukan instalasi seperti skrip dibawah ini dan jalankan diterminal.

npm install socket.io socket.io-client express
# ATAU
yarn add socket.io socket.io-client express

4. Tautan CDN Bulma

Saya menggunakan kerangka kerja CSS Bulma dan silakan tambahkan skrip dibawah ini pada berkas index.html pada direktori public. Silakan letakan pada tag <head> ya!, seperti biasanya Anda menggunakan CDN untuk menggunakan pustaka apapun.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css'/>

Lihat gambar dibawah ini:

tautan cdn