ใช้งาน Socket.io ด้วย Nuxt.js Framework

ใช้งาน Socket.io ด้วย Nuxt.js Framework

สวัสดีครับใน blog นี้เราจะมาใช้งาน socket.io บนตัว Nuxt.js framework กันครับศึกษาตัว Socket.io ได้ตามนี้เลยครับ https://socket.io/

สำหรับตัว code ดูได้ตามนี้เลยครับ https://github.com/noppadollanngain/nuxt-and-socket.io-client

ก่อนอื่นให้เรา initial project Nuxt.js กันก่อนครับ ทำตามตัว link นี้ได้เลยครับ https://nuxtjs.org/guide/installation

จากนั้นให้เราทำการติดตตั้ง package สองนี้ socket.io, socket.io-client

yarn add socket.io socket.io-client

จากนั้นในหน้า pages/index.vue แก้ไขตามนี้ครับ เป็น basic chat messages

จากนั้นให้เราสร้างไฟล์ socket.io.js ขึ้นใหม่เพื่อเป็นส่วนติดต่อของ socket ครับ

จากนั้นทำการ run project ครับ

yarn dev

พร้อมกันให้เรา run file socket.io ที่เป็นตัวเชื่อมต่อครับ

node socket.io.js

เมื่อทำการเปิดหน้า browser จะเห็นว่ามีการเชื่อมต่อกับ socket (รูปฝั่งซ้าย)

เท่านี้เราก็สามารถใช้งานเจ้าตัว socket ได้เเล้วครับ