อธิบายตามรูปก็คือ user หรือผู้ใช้เว็บทั่วไปรวมถึง Developer เมื่อทำการเข้าเว็บหรือ search ใดๆก็ตามใน serach engine (google,facebook,etc) จะเรียกการกระทำดังกล่าวว่า Request โดยการ Request นี้จะเกิดจากฝั่ง Client หรือ User ไปยัง Server (Backend) เมื่อ Server ได้รับ Request มาก็จะประมวลผลต่อว่าต้องทำอะไร เมื่อทำงานเสร็จสิ้นก็จะมี Respones กลับมายัง User ในรูปแบบใดก็ได้ถ้าเป็นเว็บที่ใช้อยู่ตามปกติก็จะตอบกลับมาในรูปแบบ HTML หรืออาจจะไม่มีการตอบกลับเป็น Interface ในรูปแบบ HTML แต่ตอบกลับมาในรูปแบบ JSON หรือ XML หรือไม่ตอบกลับมาก็ได้
จบไปสำหรับ Concept คร่าวๆ ในตอนนี้เราจะมาหัดเขียน Server โดยใช้ภาษา Javascript และ Lib express มาจัดการ request ต่างๆที่เข้ามาใน server
วิธีติดตั้ง Lib ต่างๆสำหรับ Nodejs
ลองรันโค้ดง่ายๆ
const express = require('express') //import module expressconst cors = require('cors') //ใช้ set CORS สำหรับตัว server
//สำหรับ CORS ให้รัน npm install --save cors ก่อนใช้ lib นะครับconst PORT = 8080 //กำหนด PORT ที่ต้องการจะใช้งานserv = express() //Init serverserv.use(cors()) //ตั้งค่า CORS สำหรับ serverserv.get('/',(req,res)=>{ //เมือมี request มาตาม endpoint ใดก็ได้ให้ตอบกลับไปres.send('Helloworld') //ส่งค่า TEXT เป็นคำว่า Helloworld// res.send('<button> click me ! </button>') //ส่งค่าเป็น tage เลยก็ได้})serv.listen(PORT,()=>{ //เริ่มใช้งาน serverconsole.log(`server at ${PORT}`)})
ถ้าบางคนเคยเรียน PHP มาคงจะคุ้นๆกับการ res กลับมาในรูปแบบของ HTML หลักการของการทำงานนั้นเหมือนกันเลย PHP คือภาษาเอาไว้สำหรับสั่งการเครื่อง server Nodejs และ express ก็เหมือนกันใช้สำหรับเครื่อง server รวมถึงการจำลองเครื่อง server
Let’s create API !!
API หรือชื่อเต็มๆคือ Application Programing Interface มีสำหรับใช้สั่งการบางอย่างเช่น ถ้าเราอยากได้ข้อมูลจาก Database เราก็ต้องเขียน Query Database เอาไว้ที่ server จากนั้นเราจึงเขียน Function จากหน้าเว็บของเราให้ไปใช้งาน API ที่ Server ให้ Server Query ข้อมูลจาก Database
คราวนี้เราจะลองรัน Server ขึ้นมา 2 Server คือ Server1 และ Server2
//Server1
const express = require('express') //import module expressconst cors = require('cors') //ใช้ set CORS สำหรับตัว serverconst PORT = 8080 //กำหนด PORT ที่ต้องการจะใช้งานconst fetch = require('isomorphic-fetch')
//npm install --save isomorphic-fetchserv = express() //Init serverserv.use(cors()) //ตั้งค่า CORS สำหรับ serverserv.get('/',(req,res)=>{ //เมือมี request มาตาม endpoint ใดก็ได้ให้ตอบกลับไป// res.send('Helloworld') //ส่งค่า TEXT เป็นคำว่า Helloworldres.send('<button> click me ! </button>') //ส่งค่าเป็น tage เลยก็ได้fetch('http://localhost:6000').then(res=>res.json()).then(data => console.log(data))})serv.listen(PORT,()=>{ //เริ่มใช้งาน serverconsole.log(`server at ${PORT}`)})
แยกไฟล์เป็น 2 ไฟล์นะครับ
//Server2
const express = require('express') //import module expressconst cors = require('cors') //ใช้ set CORS สำหรับตัว serverconst PORT = 6000 //กำหนด PORT ที่ต้องการจะใช้งานserv = express() //Init serverserv.use(cors()) //ตั้งค่า CORS สำหรับ serverserv.get('/',(req,res)=>{ //เมือมี request มาตาม endpoint ใดก็ได้ให้ตอบกลับไปlet data = {a :'helloworld',b : 'สวัสดี',}res.json(data) //ส่งค่ากลับในรูปแบบ JSON})serv.listen(PORT,()=>{ //เริ่มใช้งาน serverconsole.log(`server at ${PORT}`)})
ลองรันโค้ดโดยการเปิด 2 terminal ในการรัน
จากนั้นทำการรัน Server 1
วิธีปิดการทำงาน node
Macos : control + c
เมื่อเราทำการเข้าสู่ url localhost:8080
สังเกตุว่าเราใช้คำสั่ง console.log() ข้อมูลจะไปปรากฏในส่วนของ server 1 ไม่แสดงให้เห็นในส่วนของหน้าเว็บของเรา เพราะเราทำการแสดงผลในส่วนของ Server ไม่ได้แสดงผลในหน้าของ Web
เตือนกันนิดหนึ่ง
สำหรับการ fetch data หรือการส่ง request ถ้าอยากใช้ Device อื่นในการเข้าถึงข้อมูล ต้องเปลี่ยนจาก localhost ให้กลายเป็น IP เครื่องตัวเองนะครับตัวอย่างเช่น 127.0.0.1:6000 หรือ 192.168.1.2 แบบนี้ ถ้าหากเขียนแค่ localhost:6000 Device ตัวอื่นที่ไม่ใช่คอมพิวเตอร์เราจะไม่สามารถเข้าถึงได้นะครับ
