เริ่มต้นด้วยการสร้าง Project : Websocket
เปิด Terminal มาเลย แล้วสร้าง folder ด้วยคำสั่งนี้เลย พร้อมกับเปิด Project ขึ้นมาด้วยโปรแกรม Visual Studio Code
$ mkdir ws-test
$ cd ws-test
$ code .เมื่อเราได้ project มาแล้ว ให้เราสร้าง folder ชื่อ server และภายในมี folder : server จะสร้างไฟล์ index.js ไว้ ข้างใน ดังนี้
จากนั้นเราจะใช้ คำสั่ง npm init เมื่อสร้างไฟล์ package.json
$ cd server
$ npm init เมื่อเรารันคำสั่ง npm init เขาจะถามเราว่า จะให้ package ชื่ออะไร version อะไร บราบรา ตามนี้เลย
เมื่อเสร็จแล้ว เราจะได้ไฟล์ package.json มา ดังนี้
ต่อมาเราจะติดตั้ง ws : WebSocket ด้วยคำสั่งนี้ เราจะได้ node มาตัวหนึ่งหลังจากที่ติดตั้งเสร็จแล้ว พร้อมกับ dependencies : “ws”: “^7.3.1”
npm install ws
พอเครื่องมือเราครบแล้วเราจะมาเขียนโค้ดกันแล้ว เพื่อทำตัวเองให้เป็น server ให้เราไปที่ไฟล์ index.js
เราประกาศตัวแปร ชื่อว่า WebSocket ให้มีค่าเท่ากับ ws คือ WebSocket
ประกาศ ตัวแปรชื่อว่า port มาเก็บ port :8888 เพื่อไว้เรียกใช้
ประกาศตัวแปรชื่อว่า wss ย่อจาก WebSocketServer เก็บค่าที่สร้าง server ขึ้นมาใหม่ พร้อมกับ ปริ้นออกมาดูด้วย ด้วยคำสั่ง console.log()
จากนั้นเราลองรันดู ด้วยคำสั่ง (จะเห็นว่า server กำลังรันที่ port : 8888 อยู่)
node index.js
จากนี้จะเขียนคำสั่งเพื่อให้เปิดใช้งาน server ให้ client มาติดต่อได้ และเมื่อ client ติดต่อได้ จะมีข้อความ “new client is Connected” ที่ Terminal ฝั่ง server
เสร็จแล้ว stop แล้วรันใหม่ ไปทดสอบที่ Browser ของเรา หรือ client แล้วกลับมาดูฝั่งของ server ว่ามีข้อความอะไรมาแจ้งเตือนไหม
Open Browser >Right Click > Inspect > console > พร้อมกับประกาศตัวแปร url มารับค่า ‘ws://localhost:8888’; และประกาศตัวแปร ws มารับค่า การสร้าง WebSocket ใหม่
เมื่อกด Enter ไปแล้วกลับไปดูที่ Terminal ของ server เราว่ามีการเปลี่ยนแปลงไหม ถ้ามีข้อความ “new client is Connected” แสดงว่า client สามารถติดต่อกับ server ได้แล้ว
ต่อไปเราจะเขียนบอกว่าเมื่อ client ปิด browser ไปจะให้แสดงข้อความว่า “client has Disconnected” ที่ฝั่งของ server ดังนี้
ws.on('close', () => {
console.log('client has Disconnected')
});
เมื่อเรา (client) ปิด Browser ไป ฝั่งของ server ก็จะแสดงข้อความ “client has Disconnected ”
เราจะให้ client ส่งข้อความหา server ด้วยการเขียนคำสั่ง เปิดเพื่อให้สามารถส่งข้อความได้ และรอฟังการเปลี่ยนแปลง หรือเคลื่อนไหว (ฝั่งของ client)
คำสั่งการส่งข้อความ
ws.send('Hi server')คำสั่งเปิดให้สามารถรับฟัง การเคลื่อนไหว
ws.addEventListener('open', () => {})
ในฝั่งของ server ยังไม่มีอะไรเปลี่ยนแปลงจากเดิม ฝั่งของ server จะต้องมีตัวรอรับการส่ง message จากฝั่งของ client ด้วยคำสั่งนี้
ws.on('message', data => {
console.log(`client has sent us : ${data}`);
});
บันทึก stop และลองรันใหม่จะเห็นว่า เมื่อเราส่ง message จาก client อีกรอบจะเห็นว่ามี ข้อความส่งมา ว่า “ Hi server ”
และกลับไปดูฝั่งของ client กันบ้าง จะเห็นว่ามีข้อความนี้อยู่
จากที่ client ส่งมาให้แล้ว ก็อยากจะให้ server ส่งกลับมาหา client บ้าง ด้วยการ send กลับไป ด้วยคำสั่งคือ
ws.send(‘Hi client’)
บันทึกล่ะ stop แล้วรันใหม่ กลับไปส่งข้อความจาก client มาใหม่ เดี๋ยวๆ ก่อนอื่นฝั่งของ client ก็เช่นกัน จะต้องมีคำสั่งรอฟังว่า server จะส่งอะไรมา ด้วยคำสั่งนี้
ws.addEventListener('message', e => {
console.log(e)
})เสร็จแล้วลองส่งข้อความหา server อีกที (ทุกครั้งที่มีการเปลี่ยนแปลง เราจะต้องติดต่อใหม่ตั้งแรก)
เอาล่ะ ตอนนี้เราเห็นว่ามีข้อความตอบกลับจาก server แล้ว เราก็อยากจะเห็นแค่ข้อความ “Hi client” เราสามารถที่จะเขียนโค้ดอย่างนี้ได้เลย อ้างถึง property คือ data ในฝั่งของ client ด้วยคำสั่งนี้
ws.addEventListener('message', e => {
console.log(e.data)})
มาดูกันว่ามีการส่ง และรับ ข้อความอะไรบ้าง จะเห็นได้ว่ามีการส่งข้อความออกไป และมีข้อความตอบกลับมาจากฝั่ง server ด้วย
โอเค ประมาณนี้ เราเอามาอธิบายอีกรอบ เพื่อเอาไว้ทบทวนให้กับตัวเอง ผิดตรงไหน เพิ่มเติมได้เลยน่ะงับ ขอบคุณครูของฉัน ที่ทนสอนเรื่องเดิมๆ ซ้ำๆ 555+
ที่มา :
