Devahoy Logo
PublishedAt

NodeJS

สร้างแอพแชตด้วย Node.js และ socket.io

สร้างแอพแชตด้วย Node.js และ socket.io

Last Updated : 16 September 2017 : ปรับปรุงเนื้อหา และทำตัวอย่าง source code ใหม่ทั้งหมด

เนื่องจากบทความนี้เขียนไว้ค่อนข้างนานแล้ว ช่วงต้นปี 2015 และทุกวันนี้เทคโนโลยีเว็บก็ไปเร็วมากๆ ปัจจุบันมีทั้ง Firebase Database Realtime, Pusher, RethinkDB หรืออื่นๆมากมาย ที่ช่วยให้เรา implement เรื่อง Real time ทั้งใช้ socket.io, web socket อะไรก็แล้วแต่ และบทความนี้ก็ถือว่ามีคนเข้ามาอ่านกันพอสมควร ก็เลยถือโอกาสนี้ revision มันเล็กน้อย แต่ก็ยังคงเนื้อหาเดิมไว้นะครับ

บทความทำ App Chat ด้วย Node.js และ socket.io โดยบทความนี้ผมอ้างอิงจากต้นฉบับจากเว็บไซต์ของ socket.io ลิงค์นี้ครับ Get Started: Chat application มีการดัดแปลงนิดๆหน่อย โดยใช้ Plug template(Jade) และปรับแต่ง stylesheet โดยใช้ Bulma

ตัวอย่างแอพ Chat หลังจากเสร็จแล้ว

Demo App

Prerequisite

  • NodeJS แนะนำเวอร์ชั่น v6 ขึ้นไป
  • socket.io v2
  • socket.io client v2
  • Express
  • Pug
  • Bulma (สำหรับ stylesheet)

และสำหรับความรู้ที่ต้องใช้คือ Node.js และ Express.js สำหรับใครที่ยังไม่รู้ แนะนำให้อ่านบทความด้านล่างครับ

Overview

ตัวโปรแกรมแชต จะถูกแบ่งออกเป็น 2 ส่วน คือ

  • ส่วน Server : ซึ่งจะถูกรันด้วย Node.js
  • ส่วน Client : จะรันผ่าน Browser ปกติ

ทีนี้ฟังค์ชันสำคัญๆของ socket.io จะมีด้วยกัน 2 ตัวคือ

  1. socket.on(event, callback) : ใช้สำหรับรับข้อความ
  2. socket.emit(event, message) : ใช้สำหรับส่งข้อความ

Step 1 : Create a project

เริ่มต้นสร้างโปรเจ็คด้วยคำสั่ง

Terminal window
npm init

จากนั้นทำการตั้งค่าโปรเจ็ค จะได้ไฟล์ package.json ประมาณนี้ (อันนี้ผมสร้างเอง เอาแค่ชื่อและเวอร์ชันเท่านั้น)

1
{
2
"name": "simple-chat",
3
"version": "2.0.0"
4
}

ติดตั้ง express, pug และ socket.io

Terminal window
npm install --save express pug socket.io
# หรือหากใช้ yarn ก็สั่ง
yarn add express pug socket.io

จะได้ไฟล์ package.json เป็นดังนี้

1
{
2
"name": "simple-chat",
3
"version": "2.0.0",
4
"dependencies": {
5
"express": "^4.15.4",
6
"pug": "^2.0.0-rc.4",
7
"socket.io": "^2.0.3"
8
}
9
}

Step 2 : Create app.js

ทำการสร้างไฟล์ app.js ขึ้นมา ไฟล์นี้จะเป็นไฟล์หลักในส่วนของ Server

1
const express = require('express')
2
const app = express()
3
const path = require('path')
4
5
const APP_PORT = 5555
6
7
// // ตั้งค่า เพื่อให้ express ทำการ render view ที่โฟลเดอร์ views
8
// // และใช้ template engine เป็น pug
9
app.set('views', path.join(__dirname, 'views'))
10
app.set('view engine', 'pug')
11
12
app.get('/', (req, res) => {
13
res.render('index')
14
})
15
16
app.listen(APP_PORT, () => {
17
console.log(`App running on port ${APP_PORT}`)
18
})

เนื่องจากว่าผมใช้ JavaScript แบบ Standard เลยไม่ได้ใส่ semicolon นะครับ

จากนั้นสร้างไฟล์ index.pug ไว้ที่โฟลเดอร์ views ดังนี้

1
h1 Hello World

ตอนนี้ไฟล์ทั้งโปรเจ็คจะมีดังนี้

Terminal window
├── app.js
├── node_modules
│   ├── express
│   ├── pug
│   └── socket.io
├── package.json
└── views
└── index.pug

ทดสอบรันโปรแกรม แล้วเปิดบราวเซอร์ http://localhost:5555/ เพื่อดูว่าโปรแกรมทำงานโอเคหรือไม่ (ต้องแสดงคำว่า Hello World)

Step 3 : Update file index.pug

ต่อมาทำการแก้ไขไฟล์ index.pug โดยเพิ่มโค๊ดด้านล่างนี้ลงไป

1
doctype html
2
html
3
head
4
title Chat Application Example by DEVAHOY
5
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.css')
6
link(rel='stylesheet', href='css/main.css')
7
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js')
8
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js')
9
body
10
#chat-app
11
#chat.has-text-centered
12
section.hero.is-success
13
.hero-body
14
.container
15
h1.title Chat
16
h2 Chat Application with Node.js + socket.io
17
section.section.chat-container
18
.container
19
.columns
20
.box.column.is-8.is-offset-2
21
h2.title Chatbox
22
.chat-messages.has-text-left
23
ul#chat-messages
24
form
25
.field.has-addons
26
p.control
27
input(type='text', class='input', value='Chuck Norris', id='name')
28
p.control.is-expanded
29
input(type='text', class='input', placeholder='Try to say something', id='message')
30
p.control
31
input(type='submit', class='button is-success', value='Post')
32
footer
33
.container
34
.content
35
p
36
| Powered by
37
a(href='https://devahoy.com') DEVAHOY

จากนั้นสร้างไฟล์ main.css และเซฟไว้ที่โฟลเดอร์ใหม่ชื่อ public/css/ ดังนี้ (CSS ใครไม่ใส่ก็ได้นะครับ ผมเพิ่ม custom นิดเดียวเอง เพราะว่าใช้ Bulma ไป

1
body {
2
font-family: Avenir, Helvetica, Arial, sans-serif;
3
}
4
5
form {
6
margin-top: 12px;
7
}
8
9
#chat-messages li {
10
padding: 12px;
11
}

เพิ่มโค๊ดนี้ลงไปที่ไฟล์ app.js ก่อน app.get('/') เพื่อให้ express ทำการลิงค์ไฟล์ public/css/main.css ได้ถูกต้อง

1
app.use(express.static('public'))

โครงสร้างโปรเจ็ค เมื่อถึงขั้นตอนนี้จะเป็นดังนี้

Terminal window
├── app.js
├── node_modules
│   ├── express
│   ├── pug
│   └── socket.io
├── package.json
├── public
│   └── css
│   └── main.css
└── views
└── index.jade

ลองสั่งรันโปรแกรมใหม่

1
node app.js

Step 4 : Integrate Socket.io

ต่อมาเราจะทำการเชื่อมต่อกับ socket.io ทำการเพิ่ม module socket.io ที่ไฟล์ app.js (ต้องแยกระหว่าง socket.io ที่อยู่ฝั่ง server (node.js) เราจะใช้ตัวที่ติดตั้งผ่าน npm ส่วน socket ผั่ง client(browser) จะเห็นว่าผมใช้เรียกจาก cdn เอาเลย

1
const server = app.listen(APP_PORT, () => {
2
console.log(`App running on port ${APP_PORT}`)
3
})
4
5
const io = require('socket.io').listen(server)

โดยให้ออปเจ็ค app.listen() เก็บไว้ที่ตัวแปร server เพื่อใช้สำหรับส่งเป็น argument ให้กับ socket.io

จากนั้นทำการเพิ่ม

1
io.on('connection', function (socket) {
2
console.log('a user connected')
3
})

เพื่อให้ socket ทำการรับ event ที่ชื่อ connection

ตอนนี้ตัวไฟล์ app.js จะเป็นดังนี้

1
const express = require('express')
2
const app = express()
3
const path = require('path')
4
5
const APP_PORT = 5555
6
7
const server = app.listen(APP_PORT, () => {
8
console.log(`App running on port ${APP_PORT}`)
9
})
10
11
const io = require('socket.io').listen(server)
12
13
// ตั้งค่า เพื่อให้ express ทำการ render view ที่โฟลเดอร์ views
14
// และใช้ template engine เป็น pug
15
app.set('views', path.join(__dirname, 'views'))
16
app.set('view engine', 'pug')
17
18
app.use(express.static('public'))
19
20
app.get('/', (req, res) => {
21
res.render('index')
22
})
23
24
io.on('connection', (socket) => {
25
console.log('a user connected')
26
})

จากนั้นที่ไฟล์ index.pug ทำการเพิ่ม script ของ socket.io.js ฝั่ง client และทำโหลด socket.io ดังนี้

1
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js')
2
script.
3
const socket = io();

ตอนนี้ไฟล์ index.pug จะเป็นแบบนี้

1
doctype html
2
html
3
head
4
title Chat Application Example by DEVAHOY
5
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.css')
6
link(rel='stylesheet', href='css/main.css')
7
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js')
8
body
9
#chat-app
10
#chat.has-text-centered
11
section.hero.is-success
12
.hero-body
13
.container
14
h1.title Chat
15
h2 Chat Application with Node.js + socket.io
16
section.section.chat-container
17
.container
18
.columns
19
.box.column.is-8.is-offset-2
20
h2.title Chatbox
21
.chat-messages.has-text-left
22
ul#chat-messages
23
form
24
.field.has-addons
25
p.control
26
input(type='text', class='input', value='Chuck Norris', id='name')
27
p.control.is-expanded
28
input(type='text', class='input', placeholder='Try to say something', id='message')
29
p.control
30
input(type='submit', class='button is-success', value='Post')
31
footer
32
.container
33
.content
34
p
35
| Powered by
36
a(href='https://devahoy.com') DEVAHOY
37
script.
38
const socket = io();

io(); ที่ฝั่ง client โดย default แล้วคือการ connect ไปที่ server ฉะนั้นเราก็ไม่จำเป็นต้องระบุ event

ทดสอบรันโปรแกรม ทีนี้ลองเปิดบราวเซอร์ แล้วดูที่ console จะเห็นว่า มีขึ้นว่า a user connected ตามจำนวนครั้งที่เราเปิดบราวเซอร์

a user connected

Step 5 : ส่ง Event ไปที่ Server

จุดเด่นของ socket.io คือเราสามารถที่่จะส่งและรับข้อความได้ทุกๆ event ที่เราต้องการ สามารถส่งอะไรไปก็ได้ ไม่ว่าจะเป็น String, JSON หรือแม้แต่ binary data

ทีนี้ลองมาแก้ไขไฟล์ index.jade โดยการเพิ่ม socket.emit(event, message) ดูกันครับ พิมพ์ที่ส่วน script ล่างสุดของไฟล์

1
var socket = io();
2
socket.emit('chatter', 'Hello from client');

และไฟล์ app.js แก้ไขโดยให้ socket ทำการรับ event ที่ชื่อ chatter ชื่อเดียวกันกับฝั่ง client

1
io.on('connection', function (socket) {
2
socket.on('chatter', function (message) {
3
console.log('message : ' + message)
4
})
5
})

จะเห็นว่าเราต้องทำการระบุชื่อของ event เป็นอะไรก็ได้ แต่ต้องให้เหมือนกับ กับฝั่ง client และ server เพื่อให้รับส่งข้อมูลกันได้ถูกต้อง ลองนึกถึงเวลาเราแชตกับเพื่อน คนนึงใช้ LINE คนนึงใช้ Facebook, event ไม่เหมือนกัน ข้อความก็ไปไม่ถึง :)

ทีนี้ที่ไฟล์ index.pug เราระบุข้อความไปโต้งๆเลย ซึ่งจริงๆแล้วเรามี form อยู่นี่นา ก็ให้ user ทำการพิมพ์ข้อความ แล้วกด Send ถึงส่งข้อความไปที่ server ก็ทำการเพิ่มโค๊ดนี้ลงไป (ใช้ jquery)

1
script.
2
const socket = io();
3
$('form').submit(function() {
4
const name = $('#name').val();
5
const message = $('#message').val();
6
7
socket.emit('chatter', `${name} : ${message}`);
8
$('#message').val('');
9
return false;
10
});

อธิบายคือ

  • เมื่อเราทำการ submit form ก็จะทำการอ่านค่า จาก input เก็บไว้ที่ตัวแปร name และ message
  • socket.emit('chatter', value) : คือการส่งค่าผ่าน socket ผ่านท่อชื่อ chatter โดยส่ง name และ message ไป
  • จากนั้นเคลียร์ค่า form input ซะ ถ้าส่งเสร็จแล้ว

Step 6 : Broadcasting

ทีนี้เมื่อ client สามารถที่จะส่ง message ผ่าน event ที่ระบุไว้ไปที่ server ได้แล้ว จะทำยังไงให้ server ส่ง event กลับมาที่ client ได้ (เราไม่ได้พูดถึง client เฉพาะที่ส่ง message ไปที่ server นะครับ แต่พูดถึง client ทุกๆ client เลย) นึกถึงกรณีที่คนนึงพิมพ์ข้อความ สมมติชื่อ client1

  1. ข้อความจะถูกส่งจาก client1 ไปที่ server
  2. จากนั้น server ก็จะส่งข้อความกลับไป ทุกๆ client โดยระบุชื่อ event ผ่านเมธอด io.emit('event', 'message')
  3. client อื่นๆ รวมถึง client1 ก็จะรับ message เดียวกัน ผ่าน event ด้วยการ implement method io.on('event', callback)

มาที่ไฟล์ app.js ทำการเพิ่ม io.emit() ลงไปในฟังค์ชัน socket.io แบบนี้

1
io.on('connection', (socket) => {
2
socket.on('chatter', (message) => {
3
console.log('message : ', message)
4
io.emit('chatter', message)
5
})
6
})

อธิบายคือ เมื่อทางฝั่ง server ได้รับข้อความจาก event chatter แล้ว ก็จะทำการส่งไปกลับไปให้กับทุกๆ client ผ่าน io.emit()

จากนั้นที่ไฟล์ index.pug ทางฝั่ง client ก็ทำการเพิ่มโค๊ดเพื่อทำการรอรับข้อความจาก server ดังนี้

1
script.
2
socket.on('chatter', function(message) {
3
$('#chat-messages').append($('<li>').text(message));
4
});
  • socket.on('chatter', fn) : เมื่อได้รับข้อความจาก server ก็ทำการ append ค่าไปใส่ ช่อง ul#chat-messages นั่นเอง

ทดสอบรันโปรแกรม ก็จะได้ดังภาพ เป็นอันเรียบร้อย :)

Demo App

ดาวน์โหลดหรือดูตัวอย่าง source code ประกอบได้บน Github ครับ

Reference

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts