TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN ĐIỆN

BÁO CÁO MÔN HỌC
MẠNG VÀ CÁC GIAO THỨC TRONG IoT
Thiết kế và triển khai hệ thơng CHAT nhóm trên Web
Nhóm 12
Giảng viên: PGS.TS Nguyễn Quốc Cường
Sinh viên: Nguyễn Quang Trung – 20181797
Lê Văn Nam – 20181664
Đào Trọng Nhân – 20181683

HÀ NỘI, 2/2022

1


Lời mở đầu
Hiện nay, thế giới đang chứng kiến sự phát triển và phổ biến rộng rãi của
Internet và các ứng dụng trên Internet. Cùng với sự phát triển đó cộng với nhu
cầu trao đổi thông tin và liên lạc một cách nhanh chóng và tiện lợi đã thúc đẩy sự
ra đời của các ứng dụng chat. Các ứng dụng chat nổi tiếng và có một lượng người
dùng lớn trên toàn cầu phải kể đến như WhatsApp với 450 triệu người dùng
thường xuyên hàng tháng, Messenger, WeChat, hay ở Việt Nam chúng ta cũng
có Zalo. Những ứng dụng này được phát triển trên nhiều nền tảng như các thiết
bị di động thơng minh, máy tính hay cả trên Web.
Những ứng dụng này luôn được các nhà phát triển cập nhật các tính năng
và tiện ích mới phù hợp với nhu cầu của người dùng. Việc nhắn tin hay gọi điện
qua số điện thoại đang ngày càng bị lãng quên vì những tính năng này có sẵn
miễn phí trong các ứng dụng chat. Đặc biệt trong thời buổi dịch bệnh hiện nay,
việc gặp gỡ nhau khó khăn thì các ứng dụng này chính là cầu nối hữu ích kết nối

mọi người với nhau.
Với việc công nghệ web ngày càng mở, sự hỗ trợ mạnh mẽ của ngơn ngữ
lập trình và các tiện ích phụ trợ khác. Việc tạo ra 1 web chat là điều hồn tồn có
thể thực hiện được. Chính vì thế, với những kiến thức đã học được trong mơn
học, nhóm chúng em quyết định thực hiện đề tài “Thiết kế và triển khai hệ
thống CHAT nhóm trên Web” nhằm tạo ra một web chat với 1 số tính năng
đơn giản.
Trong q trình thực hiện, do cịn hạn chế về kiến thức nên đề tài cịn
nhiều thiếu sót mong nhận được sự đóng góp từ thầy. Nhóm chúng em cũng xin
cảm ơn thầy PGS.TS Nguyễn Quốc Cường đã giúp đỡ và hướng dẫn nhiệt tình
trong suốt mơn học và quá trình làm báo cáo.
Hà Nội, ngày tháng năm

2


Mục lục
Lời mở đầu......................................................................................................... 2
Mục lục............................................................................................................... 3
Danh mục hình vẽ .............................................................................................. 4
CHƯƠNG 1. Tổng quan ................................................................................... 6
1.1

Mục tiêu ..................................................................................................6

1.2

Yêu cầu.................................................................................................... 6

1.3


Kết quả cần đạt ........................................................................................ 6

CHƯƠNG 2. Kế hoạch thực hiện ..................................................................... 7
2.1

Phân công công việc ................................................................................ 7

2.2

Kết quả đạt được ...................................................................................... 8

CHƯƠNG 3. Phân tích và thiết kế ................................................................. 17
3.1

Phân tích ................................................................................................ 17

3.2

Tổng quan về WebSocket ...................................................................... 17

3.3

Thiết kế kiến trúc ................................................................................... 19

3.4

3.5

3.3.1


Chat Server Engine ................................................................. 20

3.3.2

Chat App ................................................................................. 20

Thiết kế module ..................................................................................... 21
3.4.1

Module web server và module client ....................................... 21

3.4.2

Module đăng nhập người dùng. ............................................... 24

3.4.3

Module giao diện phòng chat .................................................. 24

3.4.4

Module truyền nhận dữ liệu giữa các user ............................... 25

3.4.5

Module thời gian ..................................................................... 25

3.4.6


Module đăng xuất người dùng ................................................. 26

Triển khai .............................................................................................. 26

CHƯƠNG 4. Đánh giá kiểm tra ..................................................................... 33
CHƯƠNG 5. Kết luận và hướng phát triển ................................................... 35
5.1

Kết luận ................................................................................................. 35

5.2

Hướng phát triển .................................................................................... 35

Tài liệu tham khảo ........................................................................................... 36

3


Danh mục hình vẽ
Hình 2-1 Trích phần tìm hiểu về WebSocket trong báo cáo tổng hợp tuần 9 ........ 9
Hình 2-2 Các thư viện ban đầu ............................................................................ 9
Hình 2-3 Tạo server thử nghiệm ban đầu ........................................................... 10
Hình 2-4 Tạo client thử nghiệm ban đầu ............................................................ 10
Hình 2-5 Test chay thử tuần 10.......................................................................... 11
Hình 2-6 Giao diện bên ngồi ............................................................................ 11
Hình 2-7 Giao diện bên trong ............................................................................ 12
Hình 2-8 Tính năng đăng nhập .......................................................................... 12
Hình 2-9 Một đốn chat demo ........................................................................... 13
Hình 2-10 Tính năng chat bot và thời gian cho web chat ................................... 13

Hình 2-11 Giao diện chat hồn chỉnh cho cả hệ thống ....................................... 14
Hình 2-12 Thuộc tính vw và vh giúp hệ thống tự chỉnh kích thước phù hợp với
tab ..................................................................................................................... 14
Hình 2-13 Code phần chat bằng enter ................................................................ 14
Hình 2-14 Code phần F5 ................................................................................... 15
Hình 2-15 Vào hệ thống được up trên Heroku ................................................... 15
Hình 2-16 Sửa lỗi thơng qua word-wrap và overflow ........................................ 15
Hình 2-17 Silde báo cáo .................................................................................... 16
Hình 2-18 Video demo ...................................................................................... 16
Hình 3-1 Cách thức hoạt động của WebSocket .................................................. 18
Hình 3-2 Client request...................................................................................... 18
Hình 3-3 Server response................................................................................... 18
Hình 3-4 Cấu trúc một fame được đưa ra trong RFC 6455 ................................. 19
Hình 3-5 Mơ hình client – server ....................................................................... 20
Hình 3-6 Kiến trúc của hệ thống chat của nhóm ................................................ 20
Hình 3-7 Kết quả nhận được trên localhost ........................................................ 23
Hình 3-8 Sơ đồ module đăng nhập người dùng .................................................. 24
Hình 3-9 Giao diện phịng chat .......................................................................... 25
Hình 3-10 Sơ đồ truyền nhận dữ liệu giữa các user ............................................ 25
Hình 3-11 Định dạng thời gian trong moment.js ................................................ 26
Hình 3-12 Sơ đồ đăng xuất người dùng ............................................................. 26
Hình 3-13 Cấu trúc thư mục của dự án .............................................................. 27
Hình 3-14 Thơng tin về hệ thơng và phiên bản của các thư viên được sử dụng .. 28
Hình 3-15 Cấu hình giao diện người dùng ......................................................... 28
Hình 3-16 Một phần trong file định dạng ........................................................... 32
Hình 4-1 Giao diện đăng nhập của web chat ...................................................... 33
4


Hình 4-2 Giao diện phịng chat .......................................................................... 33

Hình 4-3 Đăng nhập thành cơng ........................................................................ 33
Hình 4-4 Đăng nhập thất bại .............................................................................. 34
Hình 4-5 Demo một đoạn chat ngắn .................................................................. 34
Hình 4-6 Thơng báo có người rời khỏi phịng .................................................... 34

5


CHƯƠNG 1. Tổng quan
1.1 Mục tiêu
Trong đề tài môn học Mạng và các giao thức trong IoT, mục tiêu chính là
thiết kế và triển khai hệ thống chat đơn giản qua Internet, thơng qua đó hiểu rõ và
biết cách lập trình các ứng dụng sử dụng các giao thức mạng trong mơ hình
Internet.
1.2 u cầu
Với mục tiêu trên u cầu cần đưa ra là:
- Tìm hiểu tổng quan về hệ thống chat.
- Thiết kế kiến trúc các giao thức của hệ thống.
- Lựa chọn các giao thức.
- Lập trình (có thể sử dụng các thư viện, dự án mã nguồn mở có sẵn để triển khai)
- Chương trình cài đặt hệ thống chat qua mạng Internet (không quá tập trung vào
giao diện của hệ thống chat, tập trung vào giao thức trong mơ hình Internet).
1.3 Kết quả cần đạt
Nhóm em đã đặt ra kết quả cần đạt được cho hệ thơng chat:
- Tạo ra phịng chat nhóm cho nhiều người chat với nhau.
- Có chức năng đăng nhập để từng người vào chat với tên khác nhau và đăng xuất
khi muốn rời phịng chat.
- Có thơng báo đăng nhập và đăng xuất.
- Chat bằng tin nhắn văn bản.
- Hệ thống có hiển thị thời gian.

- Hiển thị danh sách người online trong phịng chat.
- Thơng báo có người đang chat.

6


CHƯƠNG 2. Kế hoạch thực hiện
2.1 Phân công công việc
Để thuận tiện cho trong q trình làm đề tài, nhóm em đã phân chia công
việc cụ thể cho từng cá nhân theo từng tuần trong suất q trình mơn học. Việc
phân cơng như vậy giúp các thành viên trong nhóm hiểu rõ hơn về những gì
mình phải làm và giảm bớt được công việc cho mỗi thành viên.
Bảng 2-1 Bảng phân cơng cơng việc cho các thành viên

Tuần

9

10

11

12

13

Thành
viên

Nhiệm vụ


Mức độ
hồn
thành

Trung

Xem list video trên Youtube hướng
dẫn xây dựng web real time của
Khoa Phạm.

90%

Nam

Tìm hiểu về TCP/IP, WebSocket,
JavaScript

100%

Nhân

Tìm hiểu tổng quan về hệ thống
chat và các mã nguồn mở về web
chat

100%

Trung


Tạo server thử nghiệm ban đầu

100%

Nam

Tìm hiểu các thư viện cần cho hệ
thống chat

100%

Nhân

Tạo client thử nghiệm ban đầu

100%

Trung

Tự tìm hiểu và thiết kế giao diện
cho web chat

100%

Nam

Tự tìm hiểu và thiết kế giao diện
cho web chat

100%


Nhân

Tự tìm hiểu và thiết kế giao diện
cho web chat

100%

Trung

Tạo tính năng đăng nhập cho web
chat

75%

Nam

Tạo tính năng chat nhóm nhiểu
người trên web chat

80%

Nhân

Tạo tính năng đăng xuất cho web
chat

75%

Trung


Tiếp tục công việc tuần 12

100%

Nam

Tiếp tục cơng việc tuần 12

100%
7

Ghi chú

Vì list video khá dài nên
việc xem video của
Trung bị kéo dài 1 chút
sang tuần 10 nhưng
không ảnh hưởng nhiều
đến công việc tuần 10.

Công việc là giống nhau
nhưng cách thức tiếp
cận khác nhau, tại họp
cuối tuần nhóm đã chọn
giao diện do Trung thiết
kế và đã cùng bổ sung
từ những gì tìm hiểu
được để tạo ra giao diện
web chat cho nhóm.

Khối lượng cơng việc
và kiến thức mới khá
nhiều nên cơng việc này
nhóm cần 2 tuần để
hồn thành.


14

15

16

Nhân

Tiếp tục cơng việc tuần 12

100%

Trung

Tạo tình năng thơng báo chat bot

100%

Nam

Thêm thời gian vào webchat

100%


Nhân

Tính năng thơng báo có người gõ
chữ

100%

Trung

Hoàn thiện giao diện web chat hoàn
chỉnh, thêm thuộc tính co dãn theo
kích thước tab

100%

Nam

Tìm hiểu cách up hệ thống lên
heroku

100%

Nhân

Thêm tính năng F5 hoặc đóng tab
để thốt ra phịng chat, thêm tính
năng gửi chat cho nút enter.

100%


Trung

Test hệ thống tìm lỗi và sửa lỗi

100%

Nam

Up hệ thống lên heroku

100%

Nhân

Test hệ thống tìm lỗi và sửa lỗi

100%

Trung

Quay video, làm slide, báo cáo
chương 2, 3.1, 3.2, 3.5 tổng hợp và
sửa lỗi báo cáo các chương

100%

Nam

Báo cáo chương 3.4


100%

Nhân

Báo cáo chương 1,4,5

100%

17

Thông qua các kịch bản
test thì nhóm đã tìm ra 1
số lỗi của hệ thống như
tràn từ dọc khi quá
nhiều tin nhắn, tràn từ
ngang khi gửi tin nhắn
quá dài.

* Để vừa với kích thước bảng nên nhóm em chỉ để tên thành viên và phần kết
quả đạt được minh chứng thông qua ảnh ở mục dưới.
2.2 Kết quả đạt được
- Tuần 9: cơng việc của từng thành viên đã hồn thành và và được tổng hợp lại.

8


Hình 2-1 Trích phần tìm hiểu về WebSocket trong báo cáo tổng hợp tuần 9

- Tuần 10: việc thiết lập các cài đặt môi trường, thư viện và khởi tạo client,

server thử nghiệm đã hồn thành.

Hình 2-2 Các thư viện ban đầu

9


Hình 2-3 Tạo server thử nghiệm ban đầu

Hình 2-4 Tạo client thử nghiệm ban đầu

10


Hình 2-5 Test chay thử tuần 10

-Tuần 11: Giao diện chat ban đầu của hệ thống web chat đã được hình thành.

Hình 2-6 Giao diện bên ngồi

11


Hình 2-7 Giao diện bên trong

- Tuần 12, 13: với 2 tuần làm việc các thành viên trong nhóm đã hồn thành tốt
nhiệm vụ được giao.

Hình 2-8 Tính năng đăng nhập


12


Hình 2-9 Một đốn chat demo

* Tính năng đăng xuất khơng có ảnh kết quả em xin được mơ tả ngắn gọn:khi
một người bấm logout để thốt ra khỏi phịng thì màn hình người đó sẽ được đưa
ra ngồi màn hình chat app và tên người đó trong mục Users Online của các
thành viên cịn lại trong nhóm sẽ bị xố đi.
- Tuần 14: một số tính năng cho webchat đã được thêm vào

Hình 2-10 Tính năng chat bot và thời gian cho web chat

13


- Tuần 15: Hệ thống cơ bản đã hồn thành.

Hình 2-11 Giao diện chat hồn chỉnh cho cả hệ thống

Hình 2-12 Thuộc tính vw và vh giúp hệ thống tự chỉnh kích thước phù hợp với tab

Hình 2-13 Code phần chat bằng enter

14


Hình 2-14 Code phần F5

-Tuần 16: Hệ thống đã được up lên heroku, lỗi được tìm ra và đã sửa.


Hình 2-15 Vào hệ thống được up trên Heroku

Hình 2-16 Sửa lỗi thông qua word-wrap và overflow

- Tuần 17

15


Hình 2-17 Silde báo cáo

Hình 2-18 Video demo

16


CHƯƠNG 3. Phân tích và thiết kế
3.1 Phân tích
Đề tài của nhóm là Thiết kế và triển khai hệ thống CHAT nhóm trên web.
Với hình thức chat nhóm, trong phịng chat sẽ có nhiều người tham gia chat cùng
lúc với nhau, chính vì thế việc nhắn tin thời gian thực với độ trễ thấp là điều rất
quan trọng, là cốt lõi của hệ thống chat. Để giải quyết vấn đề này nhóm em sử
dụng giao thức WebSocket.
Những ưu điểm của WebSocket:
- Websocket cung cấp giao thức hai chiều có khả năng giao tiếp vô cùng mạnh
mẽ, dễ sửa lỗi và có độ trễ rất thấp mà khơng cần phải có quá nhiều kết nối khác.
- Khả năng trả về những thơng tin từ Websocket nhanh chóng. Vì thế mà nó phù
hợp với các ứng dụng real time như chat, game online…
- API không cần đến bất kỳ các tầng bổ sung nào mà bạn có thể sử dụng nó trực

tiếp.
Với giao thức WebSocket qua tham khảo các tài liệu trên mạng nhóm em
cũng xác định dùng ngơn ngữ lập trình là JavaScript và mơi trường là Node.js.
Ngồi giao thức, hệ thống chat muốn hoàn chỉnh và đến được với người
dùng thì cịn thêm các tính năng khác. Để người dùng có thể phân biệt với nhau
trong phịng chat, nhóm chúng em thêm tính năng đăng nhập vào phịng với tên
đăng nhập khác nhau, nếu người sau muốn vào phịng thì phải có tên đăng nhập
khác với tên người đã có trịng phịng, nếu trùng thì hệ thống sẽ báo đăng nhập
thất bại. Và thêm tính năng đăng xuất để người dùng có thể thốt ra khỏi phịng .
Để người dùng nắm bắt thơng tin về người ra vào phịng chat, nhóm em
xây dựng thêm hệ thống chat bot để hiện thông báo tới người sử dụng. Hệ thống
muốn trở lên tiện ích hơn thì nhóm em thêm thời gian vào cho thông báo và tin
nhắn.
3.2 Tổng quan về WebSocket
WebSocket là một giao thức giúp truyền dữ liệu hai chiều giữa serverclient thông qua một kết nối TCP / IP socket duy nhất. Giao thức WebSocket
được IETF chuẩn hóa RFC 6455 vào năm 2011.
Về bản chất, WebSocket khác với HTTP, mặc dù cả giao thức đều ở trên
layer 7 của mô hình OSI, và cùng phụ thuộc vào TCP ở layer 4. HTTP là cần
client chủ động gửi yêu cầu cho server, client sẽ chờ đợi để nhận được dữ liệu từ
máy chủ. Với giao thức Websocket thì server có thể chủ động gửi thông tin đến
client mà không cần phải có yêu cầu từ client. Tất cả dữ liệu giao tiếp giữa clientserver sẽ được gửi trực tiếp qua một kết nối cố định làm cho thông tin được gửi
đi nhanh chóng và liên tục khi cần thiết. WebSocket làm giảm độ trễ bởi vì một
khi kết nối WebSocket được thành lập, server không cần phải chờ đợi cho một
yêu cầu từ client. Tương tự như vậy, client có thể gửi tin nhắn đến server bất cứ
lúc nào. Yêu cầu duy nhất này giúp làm giảm đáng kể độ trễ, mà sẽ gửi một yêu
cầu trong khoảng thời gian, cho dù thơng điệp có sẵn.
17


Hình 3-1 Cách thức hoạt động của WebSocket


Giao thức có hai phần: Handshake và truyền dữ liệu. Ban đầu client sẽ gửi
yêu cầu khởi tạo kết nối websocket đến server, server kiểm tra và gửi trả kết quả
chấp nhận kết nối, sau đó kết nối được tạo và q trình gửi dữ liệu có thể được
thực hiện, q trình diễn ra tới khi 1 trong 2 bên huỷ kết nối.
Ví dụ: Để thiết lập một giao thức WebSocket, trước tiên client sẽ gửi một
WebSocket handshake request. Sau đó server sẽ trả về một WebSocket
handshake response như hình dưới.

Hình 3-2 Client request

Hình 3-3 Server response

18


Client cũng sẽ gửi một header Sec-WebSocket-Key được tạo ngẫu nhiên
có giá trị 16 byte và mã hố base64.

Sau đó nhận được bản tin từ client request chứa Sec-WebSocket-Key
bên server sẽ thực hiện:
- Nối thêm chuỗi cố định là “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”
vào Sec-WebSocket-Key để được chuỗi mới là “x3JJHMbDL1EzLkh9GBhXDw
==258EAFA5-E914-47DA-95CA-C5AB0DC85B11”.
- Thực hiện mã hố SHA-1 chuỗi trên để được “1d29ab734b0c9585240069a6e4
e3e91b61da1969”.
-Mã hóa kết quả vừa nhận được bằng Base64 để được “HSmrc0sMlYUkAGmm5
OPpG2HaGWk=”.
- Sau đó gửi lại client bản tin response lại client kèm với giá trị Sec-WebSocketAccept chính là chuỗi kết quả vừa tạo ra.
Dữ liệu gửi trong WebSocket gọi là message, mỗi message bao gồm một

hoặc nhiều frame bọc lấy dữ liệu được gửi (payload). Để đảm bảo message được
cấu trúc lại đúng như ban đầu sau khi đến được đích, mỗi frame được thêm 4-12
bytes tiền tố là các mô tả về payload. Sử dụng frame-based message giúp giảm
lượng dữ liệu dư thừa đề cập ở trên từ đó độ trễ cũng suy giảm đáng kể.

Hình 3-4 Cấu trúc một fame được đưa ra trong RFC 6455

3.3 Thiết kế kiến trúc
Hệ thống chat của nhóm em được xây dựng trên mơ hình client – server.
- Client là nơi người dùng trải nghiệm và tương tác, các tương tác trong hệ thống
bao gồm gửi thông báo, hiển thị tin nhắn, đăng nhập, đăng xuất…
- Server là máy chủ chịu trách nhiệm cho hoạt động của cả hệ thống chat.

19


Hình 3-5 Mơ hình client – server

Hình 3-6 Kiến trúc của hệ thống chat của nhóm

3.3.1 Chat Server Engine
Là một phần cốt lõi trong việc xử lý gửi và nhận tin nhắn và các tính năng
khác cả hệ thống chat.
Trong phần Chat Server Engine này bao gồm các thành phần sau:
- Chat REST API: thành phần này xử lý các tác vụ không được kế nối trực tiếp
với việc gửi và nhận tin nhắn mà làm những công việc như xác thực người dùng,
thay đổi cài đặt người dùng, hoặc có thể là lời mời kết bạn, …Chat App giao tiếp
với Chat REST API thông qua Chat REST API Client Library.
- Chat WebSocket Server: có nhiệm vụ truyền tin nhắn giữa những người dùng,
Chat App giao tiếp với Chat WebSocket Sever thông qua Chat WebSocket Client

Library. Kết nối này là một kết nối liên tục giữa client và server cung cấp một lộ
trình giao tiếp 2 chiều, người dùng khơng cần đưa ra yêu cầu đối với máy chủ
nếu có bất kỳ thông tin nào, họ nhận chúng được ngay lập tức.
3.3.2 Chat App
Chat App chính là client của người dùng. Nó được chia thành 3 thành phần
20


riêng biệt:
- Chat Client Engine: xử lý tất cả các giao tiếp với Chat Server Engine thông qua
các thành phần bên trong của nó là: Chat RESET API Client Library, Chat
WebSocket Client Library.
- Chat UI: là phần giao diện người dùng, hiển thị dữ liệu thơng qua các tiện ích
của nó:
+ Chat Contact List UI: đây là phần giao diện hiển thị danh sách những
người đang online có mặt trong phòng chat.
+ Chat Dialog UI: đây là phần giao diện khung chat của người dùng.
- Chat Internal Notification Widget – một tiện ích Chat bot giúp hiện thị các
thơng báo của hệ thống về người dùng đăng nhập và đăng xuất khỏi phịng.
3.4 Thiết kế module
Nhóm em đã thiết kế các module chính đảm nhận các chức năng nhiệm vụ
khác nhau, khi kết hợp các module này lại chúng em sẽ có được hệ thống web
chat hồn chính.
3.4.1 Module web server và module client
Điều đầu tiên cần quan tâm là tạo một web server để phục vụ cho các file
client, HTML, CSS và một client để người dùng có thể tương tác. Server và
client tạo connection với nhau thông qua việc “nói” và “lắng nghe” các sự kiện.
Sử dụng các lệnh chính:
- socket.emit: dùng để “nói” sự kiện.
+ io.sockets.emit(): gửi sự kiện cho tất cả các client.

+ socket.broadcast.emit(): gửi sự kiện cho tất cả client ngoại trừ người
gửi.
+ socket.emit(): gửi sự kiện lại cho chính người gửi.
- socket.on: dùng để “lắng nghe” sự kiện.
Để có thể phát triển một ứng dụng web chat thì ta cần tạo một nơi để kiểm
tra các tính năng của hệ thống, trước khi chúng được đưa lên internet để mọi
người truy cập và sử dụng. Để làm được điều này thì localhost là nơi được sử
dụng để phát triển hệ thống. Localhost là một thuật ngữ mô tả 1 cổng giao tiếp
kết nối trực tiếp với máy chủ gốc. Localhost được ghép bởi 2 chữ "local" (máy
tính của bạn) với "host" (máy chủ). Đây là thuật ngữ được sử dụng để diễn ra
máy chủ chạy trên máy tính cá nhân..
Máy chủ cá nhân được sử dụng để truy cập và sử dụng các dịch vụ đang
vận hành trên máy tính đó. Máy tính lúc này được được hoạt động trong định
dạng hệ thống mạng ảo. Trong lĩnh vực công nghệ thông tin, máy chủ cá nhân và
127.0.0.1 có thể sử dụng thay thế cho nhau. Trên thực tế, máy chủ cá nhân là
nhãn cho địa chỉ IP chứ bản thân Localhost không phải địa chỉ IP. Nó có thể trỏ
về những địa chỉ IP khác nhau.
Nguyên lý hoạt động của localhost: localhost với việc cài đặt nhiều ứng
21


dụng hỗ trợ khác nhau, giúp bạn tạo ra một mơi trường giống như hosting có thể
chạy source code của web trên máy tính của bạn. Thường để tạo một website,
bạn sẽ phải thuê hosting và thiết kế website lên đó. Với Localhost, bạn vẫn có thể
xây dựng website lên đó, tuy nhiên nó chỉ mang tính chất để thử nghiệm hoặc
thực hành coding. Sau khi cặt đặt được localhost, và khởi động máy chủ ảo rồi
thì bạn có thể truy cập vào địa chỉ http://127.0.0.0 hoặc http://localhost
Ví dụ với đoạn code sau
Tạo một server trên localhost.
var express = require("express");

// goi thu vien express
var app = express();
// tao bien
app.use(express.static("public")); // bat ky request no cua
khach hang se o trong folder public
app.set("view engine","ejs");
app.set("views","./views");
var server = require("http").Server(app); // khoi tao
server
var io = require("socket.io")(server);
// goi bien io
với thư viện socket ra dung
server.listen(3000); // tao dia chi cho server localhost
Lập trình kết nối đơn giản giữa các client với nhau thông qua click send
socket.on("Client send data", function(data){
//server
lang nghe duong truyen du lieu cua client
socket.broadcast.emit("Server send data", data + "2109");
// phat cho tat ca ng dung tru ngu gui
})
Tạo một client phía người dùng với file là trangchu
<html>
<head>
<title>chat app</title>
<script src ="jquery.js"></script>
<script src ="socket.io/socket.io.js">// khai bao thu
vien socket o client</script>
<script>
// lien lac len server
var socket = io("http://localhost:3000");

socket.on("Server send data", function(data){
$("#noidung").append(data+ ", ");
});
$(document).ready(function(){
$("#mrA").click(function(){
socket.emit("Client send data","hello");
22


});
});
</script>
</head>
<body>
<div id="mrA">Click send</div>

</body>
</html>
Sau khi render file trangchu, chạy server và mở http://localhost:3000/ ta sẽ
được kết quả như hình dưới.
app.get("/", function(req, res){
res.render("trangchu");
// file trang chu la noi lap
trinh html cho giao dien
});

Hình 3-7 Kết quả nhận được trên localhost

23



3.4.2

Module đăng nhập người dùng.

Hình 3-8 Sơ đồ module đăng nhập người dùng

(1) client-send-Username
(2) server-send-dkthatbai
(3) server-send-dkthanhcong
(4) server-send-dsUser
Nguyên lý của phần đăng nhập người dùng:
UsersOnline [A B C] trong sơ đồ là mảng để chứa những người đang
online, mặc định khi bắt đầu hệ thống thì mảng này khơng chứa phần tử nào. Khi
người A (Client A) đăng nhập vào phòng chat thơng qua nút Register thì client A
sẽ gửi 1 sự kiện theo đường (1) trong sơ đồ, server sẽ lắng nghe và bắt sự kiện
nàu. Nếu server thấy client A chưa có trên mảng UsersOnline nên server sẽ cho
A đăng nhập vào hệ thống và thêm A vào trong mảng. Hệ thống cũng thông báo
đến client A thông báo đăng ký thành cơng thơng qua đường (3). Khi đó thì tất cả
mọi người trong hệ thống đều sẽ thấy thơng báo hiện thị lên màn hình và biết
được có người vừa mới đăng nhập vào phòng chat. Server còn phát về cho client
mọi người trong phòng kể cả client A thông tin danh sách những người đang
online nằm trong mảng UsersOnline[ ] thông qua đường (4).
Khi người A mở 1 tab khác mà tiếp tục đăng nhập với username trùng với
tên đang có trong mảng UsersOnline[ ] thì ngay lập tức server sẽ trả về thông báo
với nội dung đăng ký thất bại chỉ cho người A theo đường (2) trong sơ đồ.
3.4.3 Module giao diện phòng chat
Phần giao diện phịng chat gồm 4 phần chính
- Hiển thị danh sách những người đang online trong phòng chat.
24



- Hiển thị lời chào người dùng và cửa sổ đăng xuất(Logout)
- Vùng hiển thị nội dung Chat
- Vùng nhập nội dung Chat cần gửi đi

2
1
3

4
Hình 3-9 Giao diện phịng chat

3.4.4

Module truyền nhận dữ liệu giữa các user

Hình 3-10 Sơ đồ truyền nhận dữ liệu giữa các user

(5) user-send-mess
(6) server-send-mess
Nguyên lý của sơ đồ truyền, nhận dữ liệu giữa các user: khi người A
(client A) muốn gửi nội dung chat tới mọi người thì đầu tiên client A gửi nội
dung đó dưới dạng 1 sự kiện lên server theo đường (5) trong sơ đồ, server sẽ lắng
nghe và bắt sự kiện này, rồi lấy nội dung đó gửi cho tất cả mọi người trong trong
phòng chat kể cả người A theo đường (6). Chính vì thế mọi người có thể nhìn
thấy tin nhắn của nhau khi chat.
3.4.5

Module thời gian

25