Note : บันทึก Workshop สร้าง Website ด้วย Node.js + Vue.js #Part 7

3 min readSep 12, 2018

Step 10— Introduce Socket.io

Socket.io เป็น Javascript Library ที่ใช้ในการสื่อสารข้อมูลแบบ web socket ที่รับส่งข้อมูลจาก Client-Browser และ Server ซึ่งจะทำให้ได้ข้อมูลแบบ Real time ตัวอย่าง เช่น ระบบการแชทส่งข้อความหากันที่ต้องการข้อมูลแบบ Real time จากผู้ส่งและผู้รับ

โค๊ดตัวอย่างที่ อาจารย์ผู้สอนเตรียมไว้

APP : https://github.com/saknarak/vue-app.git

API : https://github.com/saknarak/demo-api.git

คำสั่งของ Socket.io เทียบกับ MQTT

เข้าห้อง : .join() > .subscribe(topic) : การ join สามารถ join กี่ห้องก็ได้

ออกห้อง : .leave() > .unsubscribe(topic)

การส่งข้อความออกไป broastcast : .emit() > .publish(topic, data)

เนื่องจากโค๊ดที่อาจารย์เตรียมไว้ให้มีการปรับปรุงคำสั่ง Socket.io พื้นฐานให้คล้ายกับคำสั่งของ MQTT ซึ่งจะตรงกับคำสั่งด้านบน

ในที่จะทำการ Clone โค๊ดตัวอย่างจาก Github มาลงเครื่อง

จากนั้นก็เปิดด้วย VSCode

ใน template จะมีการเตรียมเครื่องมือ socket.io มาให้โดยใช้ this.$socket

และตั้งค่า เชื่อมต่อ socket server ที่ไฟล์ config.js

และจะทำการสร้างหน้า Chat Room ที่ใช้ส่งข้อความหากัน สำหรับผู้ที่เข้ามาในเว็บ

โดยแก้ไขไฟล์ page/chat.vue โดยสร้าง text input 2 อันสำหรับใส่ชื่อและ ข้อความสร้างปุ่ม Send 1 ปุ่ม

อธิบาย

data() {    
  return {      
    name: "",      
    msg: "",      
    message: []    
  };  
},

ในบรรทัดที่ 19 — 23 : สร้างตัวแปร data ของ vue.js สำหรับรับค่า name = ชื่ิอผู้ส่งข้อความ, msg = ข้อความที่ส่ง และ message = ข้อความทั้งหมด

created() {    
  // subscibe    
  this.$socket.subscribe("room39", this.onMsg);  
},

ในบรรทัดที่ 26–28 : created() คือ method เริ่มต้นของ vue.js ที่จะทำงานครั้งแรกเมื่อเข้าหน้า เพจนี้ โดยสั่งให้ทำการ เชื่อมต่อกับ socket server ผ่าน subscribe ไปที่ห้องชื่อว่า room39 และใส่ callback function ชื่อว่า onMsg เพื่อรับค่ามาจาก socket server อ้างอิงกับ ไฟล์ plugins/socket.js ด้านล่าง

beforeDestory() {    
  // unsubscibe    
  this.$socket.unsubscribe("room39");  
},

ในบรรทัดที่ 30–32 : beforeDestory() คือ method ของ vue.js ที่จะทำงานก่อนที่ component จะถูกทำลายหรือเมื่อเปลี่ยนหน้าไป โดยจะสั่งให้ตัดการเชื่อมต่อกับห้อง room39

methods: {    
  send() {      
    this.$socket.publish("room39", {        
      name: this.name,        
      msg: this.msg      
    });    
  },    
  onMsg(topic, data) {      
    console.log("topic",topic);      
    console.log("data",data);      
    this.message.push(topic)    
  }  
}};

ในบรรทัดที่ 34–44 : จะมี send() method คือฟังก์ชันที่ส่งข้อมูลไปยัง socket server โดยผ่าน publish ไปที่ห้อง room39 โดยส่ง name และ msg
ส่วน onMsg() คือฟังก์ชัน callback ที่รับค่ากลับมา และนำข้อมูลที่ได้ไปใส่ใน message

โค๊ดด้านล่างคือ plugins socket.io ที่อาจารย์ท่านทำไว้