สอนทำเว็บไซต์ด้วย Node.js, Express และ MongoDB ตอนที่ 3 - พื้นฐาน Node.js

มาต่อกันที่ ตอนที่ 3 กันครับ

เนื้อหาบทเรียน

• ตอนที่ 1 - NodeJS คืออะไร + ทำการติดตั้ง Node.js และ Node.js เบื้องต้น
• ตอนที่ 2 - ทบทวนพื้นฐาน JavaScript และ Modern JavaScript ES6, ES7+
• ตอนที่ 3 - ว่าด้วยพื้นฐาน Node.js / Callback / Sync และ Async(บทความนี้)
• ตอนที่ 4 - เริ่มต้นทำเว็บด้วย Node.js และ Express.js
• ตอนที่ 5 - ลองหัดใช้ Template Engine ชื่อ Pug
• ตอนที่ 6 - เริ่มต้นกับ MongoDB
• ตอนที่ 7 - ทำ Backend API ด้วย Node.js และ MongoDB กันดีกว่า
• ตอนที่ 8 - Express Generator / Middleware
• ตอนที่ 9 - ทำระบบ Login ด้วย Passport.js
• ตอนที่ 10 - การ Hosting และ Deploy Production

Callback

ก่อนจะไปถึง Node.js ขอพูดึงเรื่องของ Callback ก่อนนะครับ เนื่องจากว่าในการเขียน Node.js เราจะเห็นการใช้งาน callback บ่อยมากๆ และจริงๆแล้ว callback ไม่ได้มีแค่ใน Node.js ส่วนที่เป็น client บน Browser ก็จะเห็นเช่นกัน หรือ library ดังๆเมื่อก่อน เช่น jQuery หรือ event listener ใน Browser ก็ล้วนมีการใช้ callback ทั้งสิ้น

ใน Node.js ตัวมันถูกออกแบบมาให้ทำงานแบบ Asynchronus คือไม่จำเป็นต้องทำงานพร้อมกัน หรือรอให้คำสั่งนึงเสร็จก่อน ค่อยทำคำสั่งถัดไป แต่มันสามารถทำพร้อมกัน 2 คำสั่ง และไม่ต้องรอผลลัพธ์ เรียกได้ว่า เหมือนทำใครทำมัน คำสั่งแรก อาจจะได้ผลลัพธ์ทีหลังก็ได้

Callback คือ function ที่เราส่งไปให้กับอีก function (ปกติเราส่งแค่ค่าตัวแปร แต่ใน JavaScript ตัว function เป็น first class citizen สามารถส่ง function ผ่าน function ได้)

ตัวอย่าง Callback ง่ายๆ

1
const hello = (name) => console.log(`Hello ${name}`)
2

3
const myCallback = (callback) => callback('Devahoy')
4

5
// เรียกใช้งาน
6
myCallback(hello) // Hello Devahoy

• อธิบายคือ ฟังค์ชั่น myCallback รับ parameter เป็น function และ ทำการ return function โดยทำการ call function และส่ง Devahoy ไปเป็น argument ของ function
• พอ myCallback(hello) ถูก call ตัว myCallback ส่ง hello ฟังค์ชั่น เป็น argument พอเข้า function มันก็เลย return Hello Devahoy (มองว่า callback('Devahoy') ก็คือ hello('Devahoy')) ต่างกันแค่ชื่อ function เพราะเราจะตั้งเป็นอะไรก็ได้ เวลาเราตั้ง parameter.

ทีนี้ใน Node.js การใช้ callback จะเป็น style แนวๆ Error Convention คือ callback function ของ Node.js จะต้องเป็น function ที่มี 2 parameter ครับ คือตัวแรก คือ Error และตัวที่สอง คือ data ผลลัพธ์

ตัวอย่างเช่น

1
const hello = (error, name) => {
2
  if (error) {
3
    throw error
4
  }
5
  console.log(`Hello ${name}`)
6
}
7

8
const myCallback = (callback) => {
9
  if (!callback) {
10
    callback(new Error('No callback provided'))
11
  }
12
  callback(null, 'Devahoy')
13
}

Promise

อธิบาย Promise ซักนิด จริงๆแล้ว ไม่ใช่ Node.js แต่มันเป็นส่วนนึงของ JavaScript จริงๆแล้ว Promise ก็คือ Object ที่เอาไว้ทำงานพวก async ครับ ซึ่งเมื่อก่อนอาจจะมีแค่ return callback หลังๆ อาจจะเริ่มมีการใช้ Promise มากขึ้น ตัวอย่างเช่น การใช้ Promise ก็จะมีการ chain method แบบ then() และ catch() ครับ ซึ่งส่วนนี้ถ้าใครเคยเห็น หรือเคยเขียน Node.js มาบ้าง อาจจะคุ้นๆ เช่น

1
getSomeData('my request')
2
  .then((data) => {
3
    console.log('data', data)
4
  })
5
  .catch((error) => console.log('error', error))
6

7
// เทียบกับแบบ callback
8
getSomeData('my request', (error, data) => {
9
  if (error) console.log('error', error)
10
  console.log('data', data)
11
})

ซึ่งเดี๋ยวพอเป็น Promise ในบทความถัดๆไป ผมจะพยายามอธิบายเพิ่ม หรือมีตัวอย่างเพิ่มเติมเรื่อยๆครับ เผื่อใครที่ยังไม่ค่อยเข้าใจ เพราะเวลาเห็นการใช้จริงแล้ว ก็อาจจะเข้าใจมากขึ้น แล้วค่อยย้อนกลับมาลง Detail ครับ

File System

มาลองดูตัวอย่าง Node Modules ของ Node.js ที่ built-in มาตอนที่เราติดตั้งกันครับ จะได้มองเห็นภาพ และตัวอย่างการใช้งาน และเขียน Node.js มากขึ้น

ชื่อ module ว่า fs นะครับ เป็น การอ่าน เขียน ไฟล์ ด้วย Node.js

1
const fs = require('fs')

วิธีการใช้งาน ให้ทุกคนสร้างไฟล์ขึ้นมาใหม่เลย ตั้งชื่อว่า main.js จากนั้น import fs เข้ามาครับ

readFile - อ่านไฟล์

การอ่านไฟล์ ด้วยฟังค์ชั่น readFile(path, callback) argument ที่เราจะต้องส่งไปคือ ตัวแรกเป็น path ที่อยู่ไฟล์ของเรา และ 2 คือ callback function นั่นเอง แบบนี้

1
const fs = require('fs')
2

3
fs.readFile('data.txt', (error, data) => {
4
  console.log('data', data)
5
})

จากนั้นลองสร้างไฟล์ ขึ้นมา data.txt และใส่ข้อมูลลงไปใน Text จะใส่อะไรก็ได้ครับ เช่น

1
My data.txt
2
this is line 1

จากนั้นลองรันคำสั่ง node main.js และดูผลลัพธ์ครับ เป็น Buffer แบบนี้ครับ

data <Buffer 4d 79 20 64 61 74 61 2e 74 78 74 0a 74 68 69 73 20 69 73 20 6c 69 6e 65 20>

ถ้าเราอยากให้เป็น String เราต้อง pass options ให้มันครับ เป็นแบบนี้

1
fs.readFile('data.txt', 'utf-8', (error, data) => {
2
  console.log('data', data)
3
})

ซึ่งปกติ options จะเป็น Object แต่ถ้าเป็น string ตัว readFile มันจะเข้าใจว่าคือ encoding นั่นเอง ลองรันใหม่ซิ node main.js

ได้ผลลัพธ์แล้ว

My data.txt
this is line 1

ทีนี้อย่างที่บอก Node.js เป็น async เราลองเรียก readFile 2 ครั้ง แล้วมี console.log แบบนี้ดู

1
console.log('--START---')
2

3
fs.readFile('data.txt', 'utf-8', (error, data) => {
4
  console.log('data 1 >>>>', data)
5
})
6

7
fs.readFile('data.txt', 'utf-8', (error, data) => {
8
  console.log('data 2 >>>>', data)
9
})
10

11
console.log('--END--')

เมื่อเรารัน node main.js เราจะเห็นผลลัพธ์เป็นแบบนี้

--START---
--END--
data 2 >>>> My data.txt
this is line
data 1 >>>> My data.txt
this is line

จะเห็นได้ว่า start แล้ว end เลย ส่วนค่าที่ readFile มันถึงแสดงทีหลัง และก็ไม่การันตีว่า data 1 ต้องมาก่อน data 2 ใครเสร็จก่อน ก็ได้ผลลัพธ์ก่อน ลองรันหลายๆรอบดูก็ได้ครับ เพราะเนื่องมาจากการเป็น async callback เลยไม่ต้องรอผลลัพธ์นั่นเอง ซึ่งหลายๆคน ที่มาเขียน Node.js เข้าใจผิดว่า และเขียนคล้ายๆแบบนี้ครับ

1
console.log('--START---')
2

3
const data1 = fs.readFile('data.txt', 'utf-8', (error, data) => {})
4

5
const data2 = fs.readFile('data.txt', 'utf-8', (error, data) => {})
6

7
console.log('data1', data1)
8
console.log('data2', data2)
9

10
console.log('--END--')

มันจะได้เป็น undefined แบบนี้

--START---
data1 undefined
data2 undefined
--END--

ซึ่งถ้าหากใครเจอปัญหา undefined เวลาที่รับค่าจาก node.js หรือพวก function ต่างๆ ให้พึงนึกเสมอครับ ว่าเป็น async เราต้องใช้ callback ในการรับค่า หรืออาจจะอยู่ในรูปแบบ Promise ก็ได้ครับ

แต่ถ้าหากใครอยาก readFile แบบให้มันเป็น sync รอผลลัพธ์ก่อน ค่อยทำต่อ ก็ใช้ readFileSync ได้ครับ แบบนี้

1
console.log('--START---')
2

3
const data1 = fs.readFileSync('data.txt', 'utf-8')
4
const data2 = fs.readFileSync('data.txt', 'utf-8')
5

6
console.log('data1', data1)
7
console.log('data2', data2)
8

9
console.log('--END--')

แต่ข้อควรระวัง Node.js จุดขายของมันคือการทำงานแบบ Async ครับ หากเราใช้แต่ sync เพื่อรอผลลัพธ์ คิดดูเล่นๆ หาก 1 request เราต้องทำงานหลายๆ อย่าง และต้องรอคิวแรกเสร็จ คนที่สองค่อยทำงาน มันก็จะช้ามากๆ

writeFile - การเขียนไฟล์

การเขียนไฟล์ใน Node.js ใช้ writeFile(FILE, data, callback) แบบเดียวกันกับตอนอ่านไฟล์เลยครับ เช่น

1
fs.writeFile('hello.txt', 'Ahoy Node.js', 'utf8', (error, data) => {
2
  console.log('file saved')
3
})

เช่นเดียวกับ readFile ตัว writeFile ก็มีแบบ synchronous ครับ คือใช้ writeFileSync() นั่นเอง โดยไม่ต้องส่ง callback และไม่มีผลลัพธ์กลับมานะครับ

ตัวเขียนไฟล์ ทุกครั้งที่สั่ง node main.js มันจะเขียนไฟล์ทับลงไปในไฟล์เดิม และเซฟทุกครั้ง แต่ถ้าเราอยากเขียนไฟล์ โดยที่ไม่ต้องลบเนื้อหาเก่าละ คือเขียนเพิ่มลงไปในไฟล์ต่อกันเลย

เราจะใช้ appendFile() ครับ เหมือนกับ writeFile ทุกอย่างเลย ต่างกันที่ appendFile มันเขียนข้อมูลต่อกัน ขณะที่ writeFile จะเขียนใหม่ทุกครั้ง

1
fs.appendFile('hello2.txt', 'Ahoy Node.js\n', 'utf8', (error, data) => {
2
  console.log('file saved')
3
})

Module scope

นอกเหนือจาก Module แล้ว มีอีก 2 อันที่อยากจะแนะนำครับ คือ

• __dirname เป็นตัวแปรเพื่อดึงค่า ตำแหน่ง folder หรือ directory ของเราครับ
• __filename จะได้ชื่อไฟล์ที่โปรแกรมมันทำงานอยู่

เช่นลองเพิ่มลงไปที่ main.js ดูครับ

1
console.log('dir', __dirname)
2
console.log('file', __filename)

dir /Users/xxx/node-express-tutorial/
file /Users/xxx/node-express-tutorial/main.js

Path

ขอแนะนำอีก Module เอาไว้แก้ปัญหาครับ จะเห็นว่าตัวอย่างด้านบน การอ่านไฟล์ การเขียนไฟล์ จะไม่มีปัญหาเลย ถ้าเรารันคำสั่ง ในโฟลเดอร์เดียวกัน เช่น เราอยู่โฟลเดอร์ /my-app/node-tutorial และรัน node main.js ที่โฟลเดอร์นั้น มันก็จะอ่านไฟล์จากโฟลเดอร์ถูก แต่ถ้าเรา อยู่ที่โฟลเดอร์ my-app แล้วรัน node node-tutorial/main.js

มันก็จะอ่าน และเขียนไฟล์ จากโฟลเดอร์ my-app ไม่ใช่ my-app/node-tutorial แล้ว

วิธีแก้ไขปัญหานี้คือใช้ __dirname เพื่อบอกให้ Node รู้ว่า __dirname ของไฟล์ มันคือ path ไหน เพราะเรารัน node จากที่ไหนก็ได้ __dirname ค่าเดิม

สิ่งที่ path มีคือ path.join() ครับ คือเหมือน path มาต่อกันนั้นเอง เช่น

1
path.join('/foo', 'bar')
2
// ผลลัพธ์: '/foo/bar/'

เราก็เลยใช้ร่วมกับ __dirname เป็นแบบนี้

1
path.join(__dirname, 'myfile.txt')

สุดท้าย ลองแก้ appendFile ด้านบน โดยใช้ path ด้วย จะได้เป็นแบบนี้ครับ

1
const fs = require('fs')
2
const path = require('path')
3

4
fs.appendFile(path.join(__dirname, 'hello2.txt'), 'Ahoy Node.js\n', 'utf8', (error, data) => {
5
  console.log('file saved')
6
})

HTTP

ต่อมาสุดท้ายของบทความนี้ละครับ คือ Module HTTP ที่ทำให้เราสามารถนำ Node.js มาเป็น Web Server ได้นั้นเอง ข้อดีของ HTTP คือทำตัวเป็น server พร้อมรับ request และส่ง response กลับไปที่ client ได้ครับ

ลองสร้างไฟล์ขึ้นมาใหม่ ชื่อ app.js

1
const http = require('http')
2

3
const hostname = '127.0.0.1'
4
const port = 3000
5

6
// ทำการสร้าง server โดยใช้ `http.createServer()`
7
// ซึ่ง createServer รับ listener function ที่มี request และ response
8
// ใช้ตัวย่อ เป็น req และ res (จริงๆจะใช้ชื่ออื่นก็ได้)
9
const server = http.createServer((req, res) => {
10
  res.statusCode = 200
11
  res.setHeader('Content-Type', 'text/plain')
12
  res.end('Hello World')
13
})
14

15
// server.listen() เพื่อระบุ port และ hostname ถ้าเราไม่กำหนด
16
// ตัว server ก็ยังไม่ start นั่นเอง
17
server.listen(port, hostname, () => {
18
  console.log(`Server running at http://${hostname}:${port}/`)
19
})

เมื่อเรามีโค๊ด ด้านบน ลองสั่ง node app.js แล้วเปิดหน้าเว็บ http://127.0.0.1:3000/ เราก็จะเห็นคำว่า Hello World นั่นเอง ที่เป็น String จริงๆ เพราะถูก set content-type เป็น text/plain

ทีนี้ลองแก้นิดหน่อย เปลี่ยนตรง createServer เป็นแบบนี้

1
const handler = (req, res) => {
2
  res.end(`
3
    <div>
4
      <h2 style="color: #ff3456;">Ahoy!</h2>
5
      <p style="color: #23dd55;">This is node.js tutorial</p>
6
    </div>
7
  `)
8
}
9

10
const server = http.createServer(handler)

เนื่องจากผมย้าย listener function ไปเป็น function ชื่อ handler เพื่อให้ดูง่ายๆ แล้วเวลา createServer() ค่อยส่ง function ไป จะได้ไม่ต้องเขียน function ซ้อนๆกันครับ มือใหม่หลายคนอาจจะงงได้

และตอนนี้ผมเอา setHeader ออกแล้ว เนื่องจากไม่ต้องให้เป็น text/plain เพราะไม่งั้นมันจะมอง html tag เป็น string (หรือจริงๆ เป็น content type text/html ก็ได้ครับ)

จะได้ผลลัพธ์เป็นแบบนี้ครับ เพิ่มสี และปรับ style ได้เหมือน html ปกติเลย (และเนื่องจากผมใช้ ES6 String literal ทำให้ผมสามารถทำ string หลายบรรทัดโดยใช้ backtick ``` ได้นั่นเอง อ่านง่ายกว่า string ยาวๆ)

ตอนนี้เราก็สามารถสร้าง Server ด้วย Node.js ง่ายๆ ได้แล้ว

ทีนี้ลองอีกแบบ เราจะส่ง string กลับไป แต่เราจะไม่มานั่งพิมพ์ในไฟล์เดียวกัน แต่เราจะอ่านจาไฟล์แทน ลองสร้างไฟล์ index.html ขึ้นมาไฟล์นึง

มีข้อมูลแบบนี้

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7
    <title>Ahoy</title>
8

9
    <style>
10
      .container {
11
        display: block;
12
        max-width: 840px;
13
        margin: 0 auto;
14
      }
15

16
      h2 {
17
        font-size: 6rem;
18
        color: #03484b;
19
      }
20

21
      .subheading {
22
        color: #222;
23
        font-size: 2rem;
24
      }
25

26
      p {
27
        color: #222;
28
      }
29
    </style>
30
  </head>
31
  <body>
32
    <div class="container">
33
      <h2>Ahoy!</h2>
34

35
      <p class="subheading">This is node.js tutorial by devahoy</p>
36

37
      <p>
38
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas quia provident repellendus
39
        natus possimus, vitae consequuntur aliquam. Tempore neque libero eius molestiae. Vel impedit
40
        exercitationem magnam vero repudiandae eligendi a!
41
      </p>
42
    </div>
43
  </body>
44
</html>

จากนั้น เราก็ใช้ fs.readFile ครับ เพื่ออ่านข้อมูลจาไฟล์ index.html แล้วส่งกลับไป พวก response ด้วย res.end() เลยแบบนี้

1
const handler = (req, res) => {
2
  const filename = path.join(__dirname, 'index.html')
3
  const indexData = fs.readFileSync(filename)
4
  res.end(indexData)
5
}

หรืออีกวิธีคือ การอ่านไฟล์ด้วย fs.createReadStream ครับ จะอ่าน text ได้ไวกว่า readFile ซึ่งถ้าข้อมูลมากๆ เราจะเห็นผลชัดเจนครับ

1
const handler = (req, res) => {
2
  res.writeHeader(200, { 'Content-Type': 'text/html' })
3

4
  const filename = path.join(__dirname, 'index.html')
5
  const readSream = fs.createReadStream(filename, 'utf8')
6
  readSream.pipe(res)
7
}

ตอนนี้เราก็สามารถทำเว็บด้วย Node.js แบบง่ายๆได้แล้วเนาะ ตอนนี้ก็พอมองเห็นภาพได้มากขึ้นแล้วใช่มั้ยครับ ในบทความถัดๆไป จะเริ่มไปส่วน Express ที่เป็น Web Framework มาช่วยให้เราทำเว็บได้ไวขึ้น และสะดวกง่ายขึ้นมากๆ

ซึ่งจริงๆแล้ว Node.js ยังมี built-in อื่นๆอีกเพียบเลยนะครับ แต่ตัวอย่างหรือบทความนี้ขอยกตัวอย่างคร่าวๆ ละกันเนาะ เพราะมันค่อนข้างใช้งานบ่อยเลย และ module อื่นๆ จริงๆแล้ว มันก็ไม่ยากเลยครับ อ่าน Document และลักษณะการใช้ก็เหมือนกับ fs เลย

• หน้า Node.js API

สุดท้ายใครมีปัญหา ติดปัญหาตรงไหน สามารถสอบถามเพิ่มเติมได้ตลอดครับ แล้วพบกันบทความถัดไป ติดตามอ่านได้เลยครับ

อ่านต่อ ตอนที่ 4 - เริ่มต้นทำเว็บด้วย Node.js และ Express.js

ส่วน Source Code (อยู่ part3) สามารถเข้าไปดาวน์โหลด หรือ clone ผ่าน Github ได้เลย หากใครไม่รู้จัก Git สามารถอ่านบทความนี้เพิ่มได้ครับ Git คืออะไร ? + พร้อมสอนใช้งาน Git และ Github