[Workshop] ทำ Chat Application ด้วย Express + Socket.io และ React.js

สวัสดีครับ Workshop นี้เป็น workshop ที่ต่อยอดมาจากตัวที่แล้วนะครับ เป็นการทำ Chat Application ด้วยการใช้ socket.io และ React.js

ซีรีย์ทำ Chap Application

• ทำ Chat Application ด้วย Node.js, Express และ Socket.io
• ทำ Chat Application ด้วย Express + Socket.io และ React.js

วันนี้เราจะมาทำ Chat ที่มันดีขึ้นกว่า ครั้งก่อนครับ แต่ feature หลักๆ ก็ยังมีความคล้ายกันครับ เพียงแค่เปลี่ยนมาเป็น React และก็วิธีการแบ่ง component รับส่ง props ครับ โดยสิ่งที่จะมีเพิ่มจากตอนแรก คือ:

1. ใช้ React - ฝั่ง Client เปลี่ยนจาก HTML ที่ render ที่เดียวกับ Express มาเป็น React.js ฉะนั้น ก็เลยเหมือนมี 2 เว็บ คือ 1. ฝั่ง server และ 2. ฝั่ง client side.
2. แสดงรายชื่อ คนที่ Online
3. เวลาที่มีใครกำลังพิมพ์ในห้องแชต ให้แสดงว่า มีคนกำลังพิมพ์อยู่…
4. Scroll ไปที่แชตล่าสุด (เวลาที่แชตมันยาวๆ เวลามีคนพิมพ์มาใหม่ มันจะ scroll ไปล่างสุด)

ระดับความยาก: ⭐️⭐️

หน้าตาเว็บที่ได้ เป็น Single Page หน้าเดียว แบบนี้ครับ (ด้านซ้าย เป็นรายชื่อห้องแชต ยังไม่ได้รวมอยู่ใน Workshop นี้นะครับ แต่ใส่มาไว้ก่อน)

Step 1 - เริ่มต้นสร้างโปรเจ็ค

เหมือนเดิมครับ เริ่มต้น เราสร้างโปรเจ็ค โดยแบ่งเป็น สองส่วน

1. สร้าง folder server ขึ้นมา เอาไว้เป็นโค๊ดส่วน server
2. สร้าง frontend ขึ้นมา โดยใช้ Vite

สร้างโปรเจ็ค React ด้วย Vite

pnpm create vite@latest

จากนั้น ตั้งชื่อโปรเจ็ค, เลือก JavaScript และทำการ install dependencies

✔ Project name: … your-project-name
✔ Select a framework: › React
✔ Select a variant: › JavaScript

ทดลอง start server ขึ้นมาก่อน

pnpm dev

ทีนี้ ตัว default ของ React เราจะไม่ใช้ครับ ทำการลบข้อมูลที่ไฟล์ App.jsx ให้หมด เหลือเพียงแค่นี้:

1
import './App.css'
2

3
function App() {
4
  return (
5
    <>
6
      <h2>Chat App with React</h2>
7
    </>
8
  )
9
}
10

11
export default App

Step 2 - Web Socket ฝั่ง Server

สำหรับฝั่ง Server สามารถใช้โค๊ดเดิมของ Workshop ก่อนหน้าได้ โดยเราทำการสร้างไฟล์ index.js ขึ้นมาภายในโฟลเดอร์ server

1
import path from 'path'
2
import { fileURLToPath } from 'url'
3

4
import express from 'express'
5

6
const __dirname = path.dirname(fileURLToPath(import.meta.url))
7

8
import { createServer } from 'node:http'
9
import { Server } from 'socket.io'
10

11
const app = express()
12

13
// 1. สร้าง `server` ด้วย `app` โดยใช้ `createServer` จาก `node:http`
14
const server = createServer(app)
15

16
// 2. สร้าง `io` โดยใช้ `new Server` จาก `socket.io`
17
const io = new Server(server)
18

19
io.on('connection', (socket) => {
20
  console.log('a user connected')
21

22
  socket.on('chat:message', (msg) => {
23
    console.log('message: ' + JSON.stringify(msg))
24

25
    io.emit('chat:message', msg)
26
  })
27
})
28

29
const APP_PORT = 5555
30

31
app.get('/', (req, res) => {
32
  res.sendFile(path.join(__dirname + '/index.html'))
33
})
34

35
// 4. เปลี่ยน `app.listen` เป็น `server.listen`
36
server.listen(APP_PORT, () => {
37
  console.log(`App running on port ${APP_PORT}`)
38
})

โค๊ด : https://github.com/Devahoy/ws-chat-app-express-socketio/blob/main/index.js

และเนื่องจากฝั่ง Server เราจะให้มันมีแค่ socket ฉะนั้น ก็ไม่จำเป็นต้อง server index.html ครับ ลบโค๊ดตรงนี้ได้เลย สุดท้าย index.js เราจะเหลือแค่นี้

1
import express from 'express'
2
import { createServer } from 'node:http'
3
import { Server } from 'socket.io'
4

5
const app = express()
6

7
const server = createServer(app)
8
const io = new Server(server)
9

10
io.on('connection', (socket) => {
11
  console.log('a user connected')
12

13
  socket.on('chat:message', (msg) => {
14
    console.log('message: ' + JSON.stringify(msg))
15
    io.emit('chat:message', msg)
16
  })
17
})
18

19
const APP_PORT = 5555
20

21
server.listen(APP_PORT, () => {
22
  console.log(`App running on port ${APP_PORT}`)
23
})

ส่วนไฟล์ package.json ก็ใช้แบบนี้

1
{
2
  "name": "chat-app-express-socketio",
3
  "module": "index.ts",
4
  "type": "module",
5
  "scripts": {
6
    "start": "node index.js"
7
  },
8
  "dependencies": {
9
    "express": "^4.18.2",
10
    "socket.io": "^4.7.2"
11
  }
12
}

ติดตั้ง socket.io และ express เพื่อทดสอบ run server

pnpm install

จากนั้น start api server

node index.js

Step 3 - Socket.io ฝั่ง client

กลับมาที่ฝั่ง React ทำการติดตั้ง socket.io-client ลงไป

pnpm install socket.io-client

จากนั้นสร้างไฟล์ socket.js ขึ้นมา เอาไว้ที่โฟลเดอร์ libs (สร้างใหม่)

1
import { io } from 'socket.io-client'
2

3
export const socket = io('http://localhost:5555')

จากโค๊ดด้านบน จะเห็นได้ว่า socket ทำการ connect ไปที่ localhost:5555 นั่นก็คือ server ที่เราใช้รัน node.js อยู่นั่นเอง

จากนั้นที่ไฟล์ App.jsx ให้ทำการ import socket มา และก็ลองเช็ค connection แบบนี้

1
import { useEffect } from 'react'
2
import { socket } from './libs/socket'
3

4
import './App.css'
5

6
function App() {
7
  useEffect(() => {
8
    socket.on('connection', () => console.log('socket connected')
9
  }, [])
10

11
  return (
12
    <>
13
      <h2>Chat App with React</h2>
14
    </>
15
  )
16
}
17

18
export default App

ลอง start react ขึ้นมา (คนละ port กับ server นะครับ ตัวนี้คือ localhost:5173)

ตอนนี้ เรามี 2 server คือ

1. http://localhost:5555 - ฝั่ง server เป็น express + socket.io
2. http://localhost:5173 - ฝั่ง client เป็น React + socket.io-client

เมื่อเปิด browser http://localhost:5173 แล้วดูที่ debug console จะเห็นว่ามันติด CORS ไม่สามารถต่อ socket.io ได้ เราต้องไปตั้งค่าฝั่ง server ให้รับ domain ของฝั่ง client ด้วย (โดยปกติแล้ว api หรือ socket ทั่วๆไป จะไม่ยอมให้ request ข้าม server กันได้ จาก client)

ที่ไฟล์ server/index.js เพิ่ม config cors ลงไปแบบนี้

1
const io = new Server(server, {
2
  cors: {
3
    origin: 'http://localhost:5173',
4
  },
5
})

ลอง stop/start server ใหม่อีกครั้ง

Step 4 - React Component

ในตัวอย่างนี้ เราจะแบ่ง Component ออกเป็นหลักๆ 4 ตัวครับคือ

1. <Chatbox /> - เป็นตัวเอาไว้แสดง chat message
2. <ChatSidebar /> - เป็นส่วนด้านข้างของ chat เอาไว้แสดงรายชื่อห้องแชต
3. <ChatFooter /> - ส่วนนี้เป็นส่วนที่เอาไว้พิมพ์ข้อความ
4. <FriendList /> - ตรงนี้เป็นด้านขวามือ แสดงคน online อยู่

มาวางโครงสร้าง component กันครับ เริ่มต้นสร้างโฟลเดอร์ components ขึ้นมา มี 4 ตัวดังนี้

ไฟล์ Chatbox.jsx

1
const ChatBox = () => {
2
  return (
3
    <>
4
      <div id="chat-box">
5
      </div>
6
    </>
7
  )
8
}
9

10
export default ChatBox

ไฟล์ ChatSidebar.jsx

1
const ChatSidebar = () => {
2
  // todo, add a list of channels
3
  return (
4
    <aside id="chat-sidebar">
5
      <h2>Chat App with socket.io + React</h2>
6
      <a href="#welcome"># Welcome</a>
7
      <a href="#general"># General - พูดคุยทั่วไป</a>
8
      <a href="#update"># Update - อัพเดทข้อมูลข่าวสาร</a>
9
      <a href="#react"># React - พูดคุย React.js</a>
10
    </aside>
11
  )
12
}
13

14
export default ChatSidebar

ไฟล์ FriendList.jsx

1
const FriendList = () => {
2
  return (
3
    <div id="chat-friend-list">
4
      <h3>Friends</h3>
5
    </div>
6
  )
7
}
8

9
export default FriendList

ไฟล์ ChatFooter.jsx

1
const ChatFooter = () => {
2
  return (
3
    <h2>Chat Footer</h2>
4
  )
5
}
6

7
export default ChatFooter

ปรับแต่ง CSS โดยลบไฟล์ default ที่มากับ Vite ตัว index.css เหลือแค่นี้ (เพิ่ม custom font)

1
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300,500&display=swap');
2

3
:root {
4
  font-family: 'Noto Sans Thai', Inter, system-ui, Avenir, Helvetica, Arial,
5
    sans-serif;
6
  line-height: 1.5;
7
  font-weight: 400;
8
  font-size: 16px;
9

10
  font-synthesis: none;
11
  text-rendering: optimizeLegibility;
12
  -webkit-font-smoothing: antialiased;
13
  -moz-osx-font-smoothing: grayscale;
14
  -webkit-text-size-adjust: 100%;
15
}
16

17
* {
18
  box-sizing: border-box;
19
  margin: 0;
20
  padding: 0;
21
}

ส่วนไฟล์ App.css ลบหมดเลยครับ เราจะมาปรับ css ที่ไฟล์นี้กัน โดยเริ่มจาก กำหนด container, sidebar และ chat box

1
.chat-container {
2
  display: flex;
3
  flex-grow: 1;
4
  height: 100vh;
5
}
6

7
#chat-sidebar {
8
  background: #252525;
9
  width: 280px;
10
  display: flex;
11
  flex-direction: column;
12
  padding: 1.5rem;
13
  gap: 0.5rem;
14
}
15

16
#chat-box {
17
  background: #ddd;
18
  flex-grow: 1;
19
  display: flex;
20
  flex-direction: column;
21
  justify-content: space-between;
22
}
23

24
#chat-footer {
25
  display: flex;
26
  gap: 0.5rem;
27
  background: #d4d4d4;
28
  padding: 1.5rem;
29
}
30

31
#chat-friend-list {
32
  background: #252525;
33
  padding: 1rem;
34
  width: 240px;
35
  overflow-y: scroll;
36
  color: #ccc;
37
}

หลักๆ ก็จะมีประมาณนี้ เพื่อให้ได้ layout ตามที่วางแผนไว้ คือ

• ตัว container คือสูง 100vh ตามขนาดจอเลย
• Sidebar กำหนด width ไว้เลย 280px
• ส่วน chat ก็กว้างเต็มจอ แต่จะมีเหลือไว้ สำหรับ friendlist ด้านขวา 240px

ส่วน CSS ก็ขออธิบายคร่าวๆ เพียงแค่นี้นะครับ ที่เหลือ ก็จะเป็นการปรับ spacing, padding margin เล็กๆ น้อยๆ

สุดท้าย ไฟล์ App.jsx เอา component ที่เราทำมารวมกัน เป็นแบบนี้

1
import { socket } from './libs/socket'
2

3
import ChatSidebar from './components/ChatSidebar'
4
import ChatBox from './components/ChatBox'
5
import FriendList from './components/FriendList'
6

7
import './App.css'
8

9
function App() {
10
  return (
11
    <div className="chat-container">
12
      <ChatSidebar />
13
      <ChatBox />
14
      <FriendList />
15
    </div>
16
  )
17
}
18

19
export default App

ไฟล์ App.css ของบทความนี้ สามารถดูได้ที่นี่นะครับ ไฟล์ App.css

Step 5 - emit message ไป server

ขั้นตอนนี้ เราจะทำการ emit ข้อความที่เราจะส่ง ไปที่ server คล้ายๆ กับ Workshop ก่อนหน้านี้ครับ ฉะนั้น ตรงส่วนนี้ เราก็ใช้โค๊ดเดิมได้ ตรงนี้แก้ที่ไฟล์ ChatFooter.jsx ครับ

มี form ดังนี้

1
import { useState } from 'react'
2
import { socket } from '../libs/socket'
3

4
const ChatFooter = () => {
5
  const [name, setName] = useState(getName())
6
  const [message, setMessage] = useState('')
7

8
  const handleSubmit = (e) => {
9
    e.preventDefault()
10
  }
11

12
  function getName() {
13
    // get name from date timestamp
14
    const date = new Date()
15
    return 'User-' + date.getTime()
16
  }
17

18
  const handleChange = (e) => {
19
    const { name, value } = e.target
20

21
    if (name === 'name') {
22
      setName(value)
23
    } else if (name === 'message') {
24
      setMessage(value)
25
    }
26
  }
27

28
  return (
29
    <form className="chat-footer" onSubmit={handleSubmit}>
30
      <input type="text" name="name" value={name} onChange={handleChange} />
31
      <input
32
        id="message"
33
        type="text"
34
        name="message"
35
        value={message}
36
        onChange={handleChange}
37
      />
38
      <button type="submit">Send</button>
39
    </form>
40
  )
41
}
42

43
export default ChatFooter

โดยที่ผมมี state 2 ตัวคือ เอาไว้เก็บ name และ message ที่จะส่งครับ ตัวอย่างนี้ใช้แบบ controlled form นะครับ เวลาที่ user กรอก input ก็จะเข้า onChange และก็เวลากดส่ง ก็จะเข้า handleSubmit

ทีนี้ส่วน handleSubmit เวลาที่เราจะ emit ไปที่ server เราต้องใช้ socket ก็ทำการ import มาจาก libs/socket ได้เลย

1
import { socket } from '../libs/socket'
2

3
  const handleSubmit = (e) => {
4
    e.preventDefault()
5

6
    if (!message) return
7

8
    const payload = {
9
      username: name,
10
      message,
11
      time: new Date().toLocaleDateString(),
12
    }
13

14
    socket.emit('chat:message', payload)
15

16
    // เคลียร์ค่าหลังจาก emit
17
    setMessage('')
18
  }

ทีนี้ เราก็สามารถ emit ข้อความไปที่ server ได้แล้ว

Step 6 - รับ event chat:message

ต่อมา เราทำการดักรอ event chat:message ส่วนนี้ เราจะทำที่ไฟล์ App.jsx โดยทำที่ส่วน useEffect() แบบนี้

1
import { socket } from './libs/socket'
2

3
const handleNewMessage = (data) => {
4
  console.log('received message : ', data)
5
}
6

7
useEffect(() => {
8
  socket.on('chat:message', handleNewMessage)
9
}, [])

ทีนี้เมื่อเรารู้ว่ารับ event message ได้แล้ว ก็ทำการเซฟ message ที่ได้ ไว้ใน state

1
const [messages, setMessages] = useState([])
2

3
const handleNewMessage = (data) => {
4
  console.log('received message : ', data)
5

6
  setMessages((message) => [...messages, data])
7
}

จากนั้นส่ง messages ไปเป็น props ไปที่ Chatbox ครับ

1
<Chatbox messages={messages} />

ที่ไฟล์ ChatBox.jsx ให้เราทำการรับค่า props messages พร้อมทั้งทำการ render message แบบนี้

1
import ChatFooter from './ChatFooter'
2

3
/* eslint-disable react/prop-types */
4
const ChatBox = ({ messages }) => {
5
  return (
6
    <>
7
      <div id="chat-box">
8
        <div className="chat-box-messages">
9
          {messages.map((message) => (
10
            <div className="chat-box-message" key={message.id}>
11
              <p className="chat-box-meta">
12
                {message.username} <span>{message.time}</span>
13
              </p>
14
              <p className="chat-box-text">{message.message}</p>
15
            </div>
16
          ))}
17
        </div>
18

19
        <ChatFooter />
20
      </div>
21
    </>
22
  )
23
}
24

25
export default ChatBox

ทดสอบ ส่งข้อความ และดูว่าได้รับข้อความแสดงถูกต้อง ทีนี้เมื่อถึงตรงนี้ ตัว Chat App เราก็ทำงานได้ถูกต้อง รับ ส่ง ข้อมูลได้ แสดงผลได้ ต่อไปเป็น Optional feature เพิ่มเติม ที่ทำให้แอพดูดีขึ้น

Step 7 - Auto Scroll

ตอนนี้จะเห็นว่าเราสามารถส่งแชต และแสดงแชตได้แล้ว แต่เวลาที่แชตมันยาวๆ เนี่ย เราต้องมาเลื่อน scroll ลงมาเอง และไม่รู้ว่ามีข้อความใหม่หรือไม่ ในส่วน UX มันก็ยังไม่ค่อยดี

ทีนี้ เราจะมาทำ auto scroll คือเวลาที่มีแชตใหม่เกิดขึ้น มันจะเด้งไปแชตล่าสุดทันที ส่วนนี้ให้เราแก้ไขไฟล์ App.jsx และเพิ่มตรงนี้ลงไป

1
const lastMessageRef = useRef(null)
2

3
useEffect(() => {
4
  lastMessageRef.current?.scrollIntoView({
5
    behavior: 'smooth',
6
  })
7
}, [messages])

เราใช้ useRef เพื่อจะกำหนด ให้ scroll to ไปที่ element ที่เรา ref ไว้ ในทีนี้คือ จะส่งไปที่ ChatBox ผ่าน props แบบนี้ครับ

1
<ChatBox messages={messages} lastMessageRef={lastMessageRef} />

ทีนี้ส่วน ChatBox ก็มารับ props เพิ่มนิดหน่อย

1
const ChatBox = ({ messages, lastMessageRef }) => {
2
   ...
3
   ...
4
   <div ref={lastMessageRef}></div>
5
}

ไฟล์สุดท้ายของ ChatBox.jsx จะเป็นแบบนี้

1
import ChatFooter from './ChatFooter'
2

3
/* eslint-disable react/prop-types */
4
const ChatBox = ({ messages, lastMessageRef }) => {
5
  return (
6
    <>
7
      <div id="chat-box">
8
        <div className="chat-box-messages">
9
          {messages.map((message) => (
10
            <div className="chat-box-message" key={message.id}>
11
              <p className="chat-box-meta">
12
                {message.username} <span>{message.time}</span>
13
              </p>
14
              <p className="chat-box-text">{message.message}</p>
15
              <div ref={lastMessageRef}></div>
16
            </div>
17
          ))}
18
        </div>
19

20
        <ChatFooter />
21
      </div>
22
    </>
23
  )
24
}
25

26
export default ChatBox

ทดลอง restart server และทดลองแชตใหม่ สังเกต เวลาข้อความเยอะๆ และมีข้อความใหม่มา มันจะ auto scroll ให้เราเรียบร้อย

Step 8 - Friend list

ส่วนนี้ จริงๆ ไม่ใช่ friend เนาะ แต่ว่ามันคือส่วนที่เอาไว้บอกว่ามีใคร online อยู่ (ก็คือเช็คจาก connection นี่แหละ)

โดย event นี้ จะใช้ชื่อ chat:room เพื่อรอรับ รายชื่อ users ที่ online อยู่ ส่วนฝั่ง server ก็แค่ emit มา ตอนที่มี connection เข้ามานั่นเอง

ที่ฝั่ง server แก้ไข server/index.js โดย emit chat:room มา เวลาที่มีคน connection:

1
let users = []
2

3
io.on('connection', (socket) => {
4
  console.log('a user connected')
5

6
  const index = users.findIndex((user) => user.id === socket.id)
7
  if (index === -1) {
8
    users.push({
9
      id: socket.id,
10
      name: socket.id,
11
      status: 'online',
12
    })
13
  }
14

15
  io.emit('chat:room', {
16
    type: 'join',
17
    message: `user ${socket.id} connected`,
18
    users,
19
  })
20
})

ตัวอย่างนี้ ฝั่ง server ไม่ได้เซฟหรือใช้ข้อมูล db จริงๆ นะครับ เป็นแค่การจำลองการ เพิ่ม ลบ ข้อมูลใน array เฉยๆ

กลับมาที่ฝั่ง client ตรงส่วน App.jsx เราก็รับ event เพิ่มเข้าไป ต่อจาก chat:message

1
const handleRoomConnection = (data) => {
2
}
3

4
useEffect(() => {
5
  socket.on('chat:message', handleNewMessage)
6

7
  socket.on('chat:room', handleRoomConnection)
8
}, [])

เราจะสร้าง state friends มาไว้เก็บค่า users จาก event chat:room เพื่อส่งไปเป็น props ไปที่ <FriendList /> ครับ

1
const [friends, setFriends] = useState([])
2

3
const handleRoomConnection = (data) => {
4
  setFriends(data.users)
5
}
6

7
// render
8
<FriendList friends={friends} />

สุดท้ายส่วน FriendList.jsx ก็ implement และรับค่า props มาแบบนี้

1
/* eslint-disable react/prop-types */
2
const FriendList = ({ friends }) => {
3
  return (
4
    <div id="chat-friend-list">
5
      <h3>Friends</h3>
6

7
      {friends.map((friend) => (
8
        <p key={friend.id}>
9
          {friend.name} <span className={`status-${friend.status}`}></span>
10
        </p>
11
      ))}
12
    </div>
13
  )
14
}
15

16
export default FriendList

Step 9 - แสดงคำว่า มีคนกำลังพิมพ์อยู่

ต่อมาส่วนสุดท้ายละครับ คือทำส่วน typing… หรือ มีคนกำลังพิมพ์อยู่ โดย event นี้ เราจะตั้งชื่อให้มันว่า chat:typing เราจะส่งไปบอก server ก็ตอนที่เรา กำลังพิมพ์ข้อความอยู่นั่นเอง

ที่ไฟล์ ChatFooter.jsx ตรงส่วน handleChange ถ้าเป็น message เราจะให้มัน emit typing ไปด้วย แบบนี้

1
const handleChange = (e) => {
2
  const { name, value } = e.target
3

4
  if (name === 'name') {
5
    setName(value)
6
  } else if (name === 'message') {
7
    setMessage(value)
8

9
    socket.emit('chat:typing', { isTyping: true })
10
  }
11
}

ที่ฝั่ง Server เราก็ทำการรับ event และก็ broadcast กลับไปหา client ทุกคน ยกเว้นคนส่ง

1
socket.on('chat:typing', (msg) => {
2
  console.log('typing: ' + JSON.stringify(msg))
3

4
  // ส่งข้อความไปหา client ทุกคน ยกเว้นตัวผู้ส่ง (sender)
5
  socket.broadcast.emit('chat:typing', msg)
6
})

ทีนี้ จังหวะที่เรา emit typing = true ไว้ แต่เวลาที่เราส่ง chat ไปแล้วเนี่ย มันจะขึ้น มีคนกำลังพิมพ์อยู่ เพราะว่า isTyping มัน true ตลอด เราอาจจะทำได้ 2 แบบคือ

1. ฝั่ง frontend เก็บ state isTyping แล้ว set false ตอน submit form
2. ฝั่ง server ให้ส่ง emit chat:typing false มาหลังจาก emit message

สุดท้าย ไฟล์ ChatFooter.jsx ที่ได้ก็จะเป็นแบบนี้

1
import { useEffect, useState } from 'react'
2
import { socket } from '../libs/socket'
3

4
const ChatFooter = () => {
5
  const [name, setName] = useState(getName())
6
  const [message, setMessage] = useState('')
7
  const [isTyping, setIsTyping] = useState(false)
8

9
  useEffect(() => {
10
    socket.on('chat:typing', (data) => {
11
      setIsTyping(data.isTyping)
12
    })
13
  }, [])
14

15
  const handleSubmit = (e) => {
16
    e.preventDefault()
17

18
    if (!message) return
19

20
    const payload = {
21
      username: name,
22
      message,
23
      time: new Date().toLocaleDateString(),
24
    }
25

26
    socket.emit('chat:message', payload)
27

28
    setMessage('')
29
  }
30

31
  function getName() {
32
    // get name from date timestamp
33
    const date = new Date()
34
    return 'User-' + date.getTime()
35
  }
36

37
  const handleChange = (e) => {
38
    const { name, value } = e.target
39

40
    if (name === 'name') {
41
      setName(value)
42
    } else if (name === 'message') {
43
      setMessage(value)
44

45
      const _isTyping = value !== ''
46
      socket.emit('chat:typing', { username: name, isTyping: _isTyping })
47
    }
48
  }
49

50
  return (
51
    <>
52
      {isTyping && (
53
        <span style={{ marginLeft: '1.5rem' }}>มีคนกำลังพิมพ์อยู่...</span>
54
      )}
55

56
      <form className="chat-footer" onSubmit={handleSubmit}>
57
        <input type="text" name="name" value={name} onChange={handleChange} />
58
        <input
59
          id="message"
60
          type="text"
61
          name="message"
62
          value={message}
63
          onChange={handleChange}
64
        />
65
        <button type="submit">Send</button>
66
      </form>
67
    </>
68
  )
69
}
70

71
export default ChatFooter

สรุป

จบไปแล้วครับ สำหรับ Workshop ที่สอง สำหรับการทำ Chat Application ทีแรกตั้งใจไว้ คิดว่าไม่น่าจะยาวมาก เนื่องจากมันต่อยอดมาจากตัว Workshop แรก ที่เราเข้าใจการรับ ส่ง event กันแล้ว แต่พอทำจริงๆ มันมีหลายๆ ส่วนที่ต้องอธิบายเพิ่ม และก็ใส่พวก optional ที่มีแล้วทำให้ chat มันดีขึ้น เช่น auto scroll, แสดงมีคนกำลังพิมพ์ แสดงชื่อคน connection เป็นต้น

ก็หวังว่าเพื่อนๆ จะได้ไอเดีย ไปต่อยอด หรือไปลองปรับแต่ง เรียนรู้เพิ่มเติมกันดูนะครับ หากติดปัญหาตรงไหน ก็สอบถามได้ตลอดครับ

ตัวอย่าง Source Code เข้าไปดูใน Github ได้จาก link ด้านล่างเลยครับ

Happy Coding ❤️