Đồ án tìm hiểu react native và xây dựng ứng dụng minh họa

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

TÌM HIỂU REACT NATIVE
VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA

Giảng viên hướng dẫn: TH.S NGUYỄN CƠNG HOAN
Sinh viên thực hiện:

ĐỒN NGỌC LÃM – MSV: 19521737

Tp. Hồ Chí Minh, Tháng 7 năm 2023


LỜI CẢM ƠN
Nhóm chúng em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đến thầy đã hướng
dẫn, tạo điều kiện cho nhóm chúng em hồn thành đồ án mơn Đồ án 2.
Trong vịng 11 tuần, qua các buổi học, nhờ sự chỉ dẫn nhiệt tình của thầy, chúng em
đã tiếp thu được những kiến thức quan trọng, bổ ích cùng những góp ý chân thành
để có thể làm được một đồ án hồn chỉnh. Trong khoảng thời gian thực hiện đồ án,
chúng em đã học hỏi thêm được nhiều kiến thức, kinh nghiệm, biết được quy trình
để tạo ra một sản phẩm phần mềm.
Bên cạnh đó, chúng em xin cảm ơn các bạn bè trong lớp đã động viên, thảo luận và
góp ý cho nhóm đồng thời đã khơi thêm nguồn động lực cho nhóm trong suốt q
trình đầy khó khăn.
Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song báo cáo của nhóm
chúng em chắc chắn khơng tránh khỏi những thiếu sót, chúng em rất mong nhận

được sự thơng cảm và góp ý chân thành từ cơ. Nhóm em xin chân thành cảm ơn.
Thành phố Hồ Chí Minh, tháng 7 năm 2023


MỤC LỤC
Chương 1.

GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY

TRÌNH THỰC HIỆN CÁC CƠNG VIỆC CHÍNH ................................................... 2
1.1. Bài tốn cần giải quyết ................................................................................. 2
Chương 2.

CƠNG NGHỆ..................................................................................... 3

2.1. React Native ................................................................................................. 3
2.1.1.
2.1.2.

Khái niệm ........................................................................................... 3
Tại sao lại chọn React Native ......................................................... 3

2.3. WebRTC ..................................................................................................... 14
2.3.1.

WebRTC là gì? ................................................................................. 14

2.3.2.

Lịch sử của WebRTC ....................................................................... 14

2.3.3.

WebRTC dùng để làm gì? ................................................................ 15

2.3.4.

Lợi ích của WebRTC........................................................................ 16

2.3.5.

Ưu và nhược điểm WebRTC ............................................................ 17

2.3.6.

Cách thức hoạt động của WebRTC .................................................. 20

2.3.7.

Các phần chính của WebRTC và chức năng của WebRTC API là gì?
.......................................................................................................... 21

Chương 3.

XÁC ĐINH MƠ HÌNH HĨA U CẦU ........................................ 23

3.1. Phân loại ..................................................................................................... 23
3.1.1.

Danh sách các yêu cầu nghiệp vụ ..................................................... 23

3.2. Sơ đồ lớp mức phân tích ............................................................................. 24
3.3. Sơ đồ Usecase ............................................................................................. 24
Chương 4.

THIẾT KẾ HỆ THỐNG ................................................................... 25

4.1. Kiến trúc hệ thống ...................................................................................... 25
Chương 5.

THIẾT KẾ GIAO DIỆN................................................................... 25

5.1. Danh sách các màn hình ............................................................................. 25


5.2. Mơ tả chi tiết các màn hình ........................................................................ 26
5.2.1.

Màn hình Đăng nhập ........................................................................ 26

5.2.2.

Màn hình Home ................................................................................ 27

5.2.3.

Màn hình VideoCall ......................................................................... 28

5.2.4.

Màn hình Chat .................................................................................. 29

Chương 6.

CÀI ĐẶT VÀ KIỂM THỬ .............................................................. 30

6.1. Môi trường cài đặt ...................................................................................... 30
6.2. Kiểm thử phần mềm ................................................................................... 30
6.3. Hướng dẫn cài đặt ....................................................................................... 30
Chương 7.

KẾT LUẬN ...................................................................................... 31

7.1. Kết quả đạt được ......................................................................................... 31
7.2. Hướng phát triển trong tương lai ................................................................ 31


MỤC LỤC ẢNH
Hình 2.1-1: Phát triển ứng dụng nhanh ..................................................................... 5
Hình 2.1-2: Phát triển đa ứng dụng ........................................................................... 6
Hình 2.1-3: Kiến trúc cũ ............................................................................................ 7
Hình 2.1-4: Kiến trúc mới ........................................................................................ 10
Hình 2.3-1: Là dự án mã nguồn mở của Google ..................................................... 14
Hình 2.3-2: WebRTC được ứng dụng trong nhiều lĩnh vực ..................................... 15
Hình 2.3-3: WebRTC mang đến nhiều lợi ích cho cả người dùng và lập trình viên16
Hình 2.3-4: Hỗ trợ đa nền tảng, đa trình duyệt trên các thiết bị ............................. 18
Hình 2.3-5: WebRTC chưa hỗ trợ tồn diện tất cả trình duyệt ............................... 19
Hình 2.3-6: Mạng lưới hoạt động giữa các đối tượng theo hình thức peer – to –
peer ........................................................................................................................... 20
Hình 2.3-7: Cung cấp tính năng truyền dữ liệu thời gian thực ............................... 21

Hình 3.2-1: Sơ đồ lớp mức phân tích ....................................................................... 24
Hình 3.3-1: Sơ đồ usecase........................................................................................ 24
Hình 5.2-1: Màn hình Đăng nhập ............................................................................ 26
Hình 5.2-2: Màn hình Home .................................................................................... 27
Hình 5.2-3: Màn hình Videocall .............................................................................. 28
Hình 5.2-4: Màn hình chattting ............................................................................... 29


MỤC LỤC BẢNG
Bảng 3.1-1: Biểu mẫu 1 ........................................................................................... 23
Bảng 3.1-2: Biểu mẫu 2 ........................................................................................... 23
Bảng 3.1-3: Biểu mẫu 3 ........................................................................................... 23
Bảng 5.1-1: Danh sách các màn hình ...................................................................... 25
Bảng 5.2-1: Mơ tả chi tiết màn hình Đăng nhập ..................................................... 26
Bảng 5.2-2: Mơ tả chi tiết màn hình Home .............................................................. 27
Bảng 5.2-3: Mơ tả chi tiết màn hình VideoCall ....................................................... 28
Bảng 5.2-4: Mơ tả chi tiết màn hình Chatting ......................................................... 29


TÓM TẮT ĐỒ ÁN
Đồ án với đề tài “Xây dựng ứng dụng video chat app” tập trung vào phân tích thực trạng
và ứng dụng các cơng nghệ để từ đó xây dụng ứng dụng ứng dụng mobile có thể sử dụng
mà không yêu cầu quá nhiều về phần cứng, phần mềm.
Đề tài được bắt đầu từ việc tìm hiểu thực trạng, đưa ra các vấn đề còn tồn đọng hoặc có
thể cải thiện. Xác định mục tiêu, phạm vi của đề tài cũng như các chức năng cần có của
hệ thống. Ngoài việc xử lý các nghiệp vụ cho hệ thống, nhóm cũng đã tìm hiểu, so sánh
và lựa chọn được các công nghệ mới và phù hợp giúp nâng cao trải nghiệm người dùng,
tối ưu chi phí phát triển và triển khai.
Nhờ việc phân tích các yêu cầu rõ ràng, thời gian phát triển ngắn và các yêu cầu, tính năng
ít thay đổi, trong q trình phát triển đề tài đã sử dụng mơ hình V-model cho việc xây

dựng hệ thống. Kết quả thu được trong giai đoạn thiết kế như kiến trúc hệ thống, cơ sở dữ
liệu, giao diện được thể hiện bằng sơ đồ người dùng, sơ đồ tuần tự và bản thiết kế sử dụng
công cụ Figma và Draw.io. Trong giai đoạn thực hiện, client và server được phát triển
song song sử dụng thư viện React cho client và ứng dụng socket IO, WebRTC để phục
vụ cho dự án, công cụ phát triển VS Code cùng công cụ quản lý source code github. Công
việc kiểm thử unit test được thực hiện xuyên suốt quá trình phát triển và được kiểm thử
tích hợp ở cuối giai đoạn. Trong giai đoạn vận hành, ứng dụng đã được triển khai lên máy
chủ EAS.
Phần cuối cùng của đồ án là trình bày kết quả đã thực hiện lên cuốn báo cáo, đưa ra kết
luận và hướng phát triển cho hệ thống trong tương lai.
Nội dung đồ án được trình bày trong 5 chương:
• Chương 01: Giới thiệu bài tốn cần giải quyết, mơ tả quy trình thực hiện các cơng
việc chính
Trình bày sơ bộ về bài tốn cần giải quyết, quy trình thực hiện đề tài.
• Chương 02: Cơ sở lý thuyết, tổng quan công nghệ
Giớ thiệu về giải thuật, những công nghệ, nền tảng được sử dụng trong đồ án.
• Chương 03: Phân tích thiết kế ứng dụng
Phân tích yêu cầu, thiết kế, hiện thực và triển khai ứng dụng.
• Chương 04: Kết luận
• Chương 05: Cài đặt và thử nghiệm
Những kết quả đạt được sau khi kết thúc đồ án. Những hạn chế, khó khăn trong q trình
phát triển đồ án và nêu ra hướng phát triển trong tương lai.

1


Chương 1. GIỚI THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH
THỰC HIỆN CÁC CƠNG VIỆC CHÍNH
1.1.

Bài tốn cần giải quyết

• Xây dựng một ứng dụng cho phép người dùng đăng nhập vào ứng dụng và tham
gia cuộc gọi video nhóm cũng như nhắn tin trao đổi trong thời gian thực hiện cuộc
gọi
• Đối tượng hướng đến: Tất cả người dùng có tài khoản gmail có mục đích tham gia
các cuộc gọi thoại video nhóm hoặc cá nhân
• Mục đích: Tạo ra một mơi trường trị chuyện, giao lưu, trao đổi thông tin, tài liệu.
Tạo điều kiện thuận lợi nhất để mọi người có thể kết nối, liên lạc và cộng tác cùng
nhau thơng qua ứng dụng.
• Hình thức phát triển: App mobile
1.2.

Quy trình thực hiện

App được xây dựng bao gồm các nội dung cơ bản:
• Đăng nhập bằng tài khoản Google, đăng xuất
• Tham gia room trị chuyện bằng room code
• Nhắn tin trong cuộc trị chuyện
• Xem danh sách người tham gia
Các bước xây dựng App mobile:
• Xác định u cầu, mơ hình hố
• Thiết kế hệ thống
• Thiết kế dữ liệu
• Thiết kế giao diện
• Lập trình
• Thử nghiệm và sửa lỗi
• Phát hành app, bảo trì

2

Chương 2. CÔNG NGHỆ
2.1.

React Native

2.1.1. Khái niệm
Được phát triển bởi Facebook, React Native là một framework hướng đến phát triển
ứng dụng di động đa nền tảng.
Với sự trợ giúp của React Native, lập trình viên (developer) có thể sử dụng JavaScript
để tạo ra mobile apps (ứng dụng di động) hỗ trợ cho cả nền tảng Android và iOS.
Instagram, Facebook, Skype… là những ứng dụng nổi bật sử dụng React Native.
2.1.2. Tại sao lại chọn React Native
2.1.2.1.

Hiệu suất tuyệt vời

React native có thể khơng nhanh như các ứng dụng gốc thực sự được xây dựng bằng
các ngôn ngữ quen thuộc như Java, Objective-C và C #. Tuy nhiên, bạn sẽ có được
hiệu suất gần như ngơn ngữ đấy vì nó cung cấp cho bạn các thành phần gốc, Chế độ
xem và Văn bản.
Ứng dụng dành cho thiết bị di động dựa trên React Native không phải là ứng dụng
web HTML5, hybrid hoặc di động. Thay vào đó, nó là một ứng dụng di động thực
sự.
Bạn có thể nâng hiệu suất ứng dụng React Native của mình lên một tầm cao mới bằng
cách tối ưu hóa ứng dụng của bạn bằng mã gốc. Có, React Native cũng cho phép bạn
sử dụng mã gốc. Để có hiệu suất tối đa, bạn có thể xây dựng một số tính năng trong
ứng dụng của mình bằng mã gốc và một số tính năng với React Native.
2.1.2.2.

Giao diện người dùng phong phú

React Native cho phép bạn tạo các UI độc đáo, bắt mắt thông qua các thành phần khai
báo được xây dựng sẵn, chẳng hạn như Picker, Nút, Thanh trượt, Chuyển đổi, v.v.
Bạn cũng có thể tạo các thành phần của riêng bạn với TouchableNativeFeedback và

3


TouchableOpacity. Có nhiều thành phần dành riêng cho iOS và Android có sẵn để
giúp thiết bị hoạt động hiệu quả trên điện thoại di động Android và iOS.
Ví dụ:
• iOS

–

ActionSheetIOS,

AlertIOS,

DatePickerIOS,

ImagePickerIOS,

ProgressViewIOS, PushNotificationIOS, SegmentedControlIOS, v.v...
• Android – DatePickerAndroid, DrawerLayoutAndroid, RightsAndroid,
ProgressBarAndroid, TimePickerAndroid, ToastAndroid, Thanh công cụ
Android, View Page Android, v.v...
2.1.2.3.

Phát triển ứng dụng nhanh

React Native cung cấp cho bạn các thành phần cho văn bản, hình ảnh, đầu vào bàn
phím, danh sách có thể cuộn, thanh tiến trình, hình động, bảng tạm, liên kết, v.v. Các
thành phần này tăng tốc đáng kể quá trình phát triển ứng dụng và tính năng Tải lại
nóng cũng giúp bạn tiết kiệm rất nhiều thời gian vì nó cho phép bạn tải lại ứng dụng
của mình mà khơng cần biên dịch lại tồn bộ mã.
Phản ứng thư viện bản địa như Redux (để xử lý trạng thái ứng dụng của bạn) và Phản
ứng tuyệt vời bản địa (danh sách các thành phần và bản trình diễn) cũng sẽ giúp bạn
hồn thành cơng việc phát triển ứng dụng di động của mình nhanh hơn.
Cơng cụ phát triển như Hạt nhân để viết mã, Yoga để xây dựng bố trí, Lính gác để
theo dõi lỗi và sự cố, và Công cụ phát triển React để gỡ lỗi làm cho quá trình phát
triển React Native dễ dàng hơn và nhanh hơn rất nhiều. Các công cụ React Native
tuyệt vời khác bao gồm Mã VS, Đốt cháy, Hội chợ triển lãm, và Bugsnag.

4


Hình 2.1-1: Phát triển ứng dụng nhanh
2.1.2.4.

Phát triển da ứng dụng

Code một lần, sử dụng nó ở khắp mọi nơi. Tiết kiệm thời gian và tiền bạc bằng cách
xây dựng các ứng dụng đa nền tảng. Nhưng hãy nhớ rằng bạn vẫn cần thực hiện một
số điều chỉnh dành riêng cho nền tảng.

5

Hình 2.1-2: Phát triển đa ứng dụng
2.1.2.5.

Hỗ trợ cộng đồng mạnh mẽ

Hơn 2.000 người đóng góp với hơn 85.000 ngơi sao trên GitHub.
Các công ty như Callstack, Biệt thự phần mềm, Microsoft, và Màu đỏ vơ hạn đã đóng
góp cho khn khổ này. Bạn sẽ tìm thấy rất nhiều thành phần và thư viện React Native
được tạo bởi cộng đồng các nhà phát triển trên các trang web như Mã thông báo và
Thư mục gốc.
Nhận trợ giúp về StackOverflow, Reddit hoặc là Bộ giải mã. Bạn ln ln tìm người
giúp bạn. Bạn cũng có thể nhận được sự giúp đỡ từ Cộng đồng bất hịa Reactiflux,
các Phản ứng nhóm Facebook gốc, và Phản ứng cộng đồng Spectrum bản địa.
2.1.2.6.

Dễ học

6


Các tài liệu chính thức thân thiện với người mới bắt đầu và có source code ví dụ. Bên
cạnh các tài liệu chính thức, bạn cũng có thể thử các cách khác để thực hành.
2.1.3. Kiến trúc React Native
2.1.3.1.

Kiến trúc cũ

Thực chất, React Native là một giải pháp platform-agnostic (không phụ thuộc nền
tảng). Trong phạm vi này, mục tiêu chính của framework là cho phép các developer

viết code bằng Javascript với ReactJS trong khi ở bên dưới React Native sử dụng các
cơ chế riêng của nó để biên dịch các React Element để phía hệ điều hành có thể hiểu
được. Điều này có nghĩa là:
• Hiển thị chính xác giao diện người dùng
• Khả năng truy cập đến các thành phần native của hệ điều hành.
Thông thường, đối với hệ điều hành Android/iOS, cơ chế hoạt động sẽ như sau:

Hình 2.1-3: Kiến trúc cũ
Có 3 luồng chạy song song và riêng biệt trong mỗi ứng dụng React Native:
● JS thread: là nơi tất cả code Javascript được đọc và biên dịch, nơi xử lý hầu
hết các logic nghiệp vụ của ứng dụng. Metro sẽ đóng gói tất cả code Javascript

7


thành một file duy nhất. Phần code này sẽ được chuyển tới cơng cụ
JavascriptCore (JSC) để có thể chạy được.
● Native thread: là nơi xử lý code native. Nó giao tiếp với JS Thread bất cứ khi
nào có nhu cầu cần thay đổi UI hoặc truy cập các hàm native. Chúng ta có thể
chia Native Thread thành Native UI và Native Modules. Tất cả các Native
Modules đều được khởi động khi chúng ta sử dụng ứng dụng. Điều đó có nghĩa
là module Bluetooth sẽ ln ln ở trạng thái kích hoạt bởi React Native kể cả
khi khơng có nhu cầu sử dụng.
● Shadow Thread: là nơi các layout sẽ được tính tốn. Nó sử dụng Layout Engine
riêng của Facebook được gọi là Yoga nhằm tính tốn flexbox layout, sau đó
gửi kết quả về phía Native UI.

Để giao tiếp giữa JS thread và Native thread chúng ta sẽ sử dụng một Bridge. Phía
bên dưới, Module C++ này hầu hết được xây dựng xung quanh bằng một hàng đợi
bất đồng bộ (asynchronous queue). Bất cứ khi nào nó nhận được dữ liệu từ một trong

hai phía (JS thread hoặc Native thread), nó sẽ tuần tự hóa dữ liệu dưới dạng JSON và
chuyển nó qua hàng đợi, cuối cùng được giải mã khi nó tới nơi.
Điều này có nghĩa là tất cả các thread đều dựa trên chuỗi tín hiệu JSON được truyền
bất đồng bộ qua Bridge, và chúng sẽ được gửi tới một trong hai phía với mong muốn
(nhưng khơng chắc là đảm bảo) sẽ nhận được phản hồi trong tương lai. Bạn cũng có
thể sẽ gặp phải vấn đề tắc nghẽn thơng tin và khơng nhận được phản hồi.
Một ví dụ phổ biến cho biết lý do tại sao điều này lại tạo ra các vấn đề về hiệu suất
khi được nhìn thấy khi cuộn một danh sách dữ liệu lớn: Bất cứ khi nào sự kiện
onScroll xảy ra trên Native thread, thông tin sẽ được gửi không đồng bộ đến JS thread,
nhưng Native thread không chờ JS thread thực hiện xong mà nó lại gửi trở lại theo
cách khác. Điều này tạo ra một sự delay, sẽ có một khoảng trống trước khi thơng tin
xuất hiện trên màn hình.

8


Tương tự như vậy, việc tính tốn hiển thị layout cần phải trải qua nhiều vịng trước
khi nó có thể được hiển thị trên màn hình, vì nó cần phải đi qua Yoga engine trước
khi có thể được tính bởi Native thread và tất nhiên chúng cũng sẽ phải đi qua Bridge
để tới JS Thread.
Chúng ta có thể nhận thấy cách gửi dữ liệu JSON một cách bất đồng bộ sẽ tạo ra vấn
đề về hiệu suất. Nhưng còn cách nào khác để Javascript của chúng ta giao tiếp với
Native code? Đây là nơi JSI phát huy tác dụng.
2.1.3.2. Kiến trúc mới
Việc tái kiến trúc của React Native sẽ dần loại bỏ Bridge và thay thế nó bằng một
thành phần mới có tên là Javascript Interface (JSI).
JSI có một vài cải tiến mới rất thú vị, đầu tiên là JS bundle khơng cịn phụ thuộc vào
JS core nữa. Nói cách khác, JSC engine giờ đây có thể dễ dàng hốn đổi với các
JavaScript engine khác - có khả năng hoạt động tốt hơn - như Chrome Engine V8
chẳng hạn.

Cải tiến thứ hai của kiến trúc mới này là Bằng cách sử dụng JSI, JavaScript có thể
giữ tham chiếu đến C++ Host Object và truy cập phương thức trên chúng. Từ đó
JavaScript và các thành phần Native sẽ nhận thức và giao tiếp được lẫn nhau.
Nói cách khác, JSI sẽ cho phép khả năng tương tác hoàn toàn giữa tất cả các thread.
Với khái niệm chia sẻ quyền sở hữu (shared ownership), code JavaScript có thể giao
tiếp với các thành phần Native trực tiếp từ JS thread và bỏ qua việc tuần tự hóa thơng
điệp dạng JSON giữa các thành phần, loại bỏ tất cả các vấn đề tắc nghẽn và bất đồng
bộ trên Bridge.

9


Hình 2.1-4: Kiến trúc mới
Ngồi việc cải thiện đáng kể hiệu suất giao tiếp giữa các thread với nhau, kiến trúc
mới này cũng cho phép kiểm soát trực tiếp các Native modules. Có nghĩa là chúng ta
hồn tồn có thể sử dụng các Native modules khi chúng ta cần chúng, khơng cần kích
hoạt tất cả khi khởi chạy ứng dụng. Điều này mang lại sự cải thiện hiệu suất hết sức
rõ rệt.
Cơ chế mới này có khả năng linh hoạt, cũng có thể có lợi cho nhiều trường hợp sử
dụng khác nhau. Chẳng hạn như bây giờ chúng ta có sức mạnh của C++ trong tay,
thật dễ dàng để thấy React Native có thể được sử dụng trong một hệ thống rất lớn.

10


2.2.

Socket IO

2.2.1. Vì sao Socket IO ra đời

Khi truy cập vào 1 trang web hoặc ứng dụng bất kỳ thì việc giao tiếp giữa máy chủ
(Server) và máy khách (Client) là việc rất quan trọng. Để máy chủ và máy khách có
thể nhận biết được sự thay đổi của đối phương thì cần sử dụng những cách thức như
AJAX, long-polling, short-polling, & HTML5 server-sent events,..Việc sử dụng cách
giao tiếp bằng những công cụ kể trên tồn tại nhiều nhược điểm trong đó có thể kể đến
là kết quả trả về chậm và tốn rất nhiều tài nguyên.
Để khắc phục những nhược điểm này, công cụ socket.io ra đời để giúp cho việc giao
tiếp giữa Server và Client diễn ra tức khắc và chiếm ít tài nguyên nhất.
2.2.2. Socket IO là gì?
Socket IO được xem là 1 module trong Node.js được nhà sáng chế tạo ra và phát triển
từ năm 2010. Mục đích lớn nhất của Socket io là để tạo môi trường giao tiếp thuận
lợi trên Internet giúp trả về các giá trị thực ngay tại thời điểm giao tiếp giữa các bên
với nhau (thường là giữa server và client).
Việc giao tiếp 2 chiều giữa máy khách và máy chủ được thực hiện bởi socket io khi
và chỉ khi máy khách có module này trong trình duyệt và máy chủ cũng đã tích hợp
sẵn gói socket io. Các ứng dụng sử dụng socket io thường đòi hỏi tốc độ phản hồi
ngay lập tức. Một số ví dụ điển hình như xổ số, trực tiếp bóng đá, chat…
Cần phải nói thêm rằng socket io khơng phải là 1 ngơn ngữ, vì vậy nó phải được sử
dụng kết hợp với những ngơn ngữ khác như php, asp.net, nodejs,.. Đến đây nếu bạn
còn thắc mắc socket io là gì, hãy cùng tìm hiểu tiếp về đặc điểm của nó ở phần tiếp
theo.
2.2.3. Ưu điểm
2.2.3.1.

Bảo mật cao

Socket io được xây dựng dựa trên Engine.IO. Nó sẽ khởi chạy phương thức longpolling trước nhất để kết nối. Sau đó nó mới sử dụng các phương thức giao tiếp tốt

11

hơn như là Websocket chẳng hạn. Vì được thiết lập chặt chẽ như vậy nên khi socket
io xuất hiện nó sẽ tự động tạo những kết nối bảo mật như là: proxy và cân bằng tải
hoặc là tường lửa cá nhân và phần mềm chống vi rút.
2.2.3.2.

Kết nối tự động tới server

Đặc điểm tự động kết nối đến server của socket io là gì? Giả sử trong quá trình khởi
chạy bị mất kết nối giữa client và server thì socket io sẽ tự động gắn kết nối mãi mãi
cho đến khi nào server phản hồi lại. Và đây là tính năng có thể tùy chỉnh được nên
bạn có quyền chọn không kết nối tự động đến bất kỳ server nào mà mình muốn.
2.2.3.3.

Mã hóa nhị phân

Socket io có thể hỗ trợ mã hóa nhị phân như ArrayBuffer và Blob trên trình duyệt
hoặc là ArrayBuffer và Buffer trong Node.js.
2.2.3.4.

Cho phép tạo kênh và phòng

Đặc điểm cho phép tạo kênh và phòng của Socket.io là gì? Có thể nói đây là 1 tính
năng khá nổi bật khi mà socket io có thể tạo ra mối quan hệ giữa các phần hoặc các
module riêng lẻ bằng cách tạo ra những kênh riêng biệt khác nhau. Ngồi việc tạo
kênh, nó cịn hỗ trợ tạo phịng cho các clients tham gia với mục đích gửi thơng báo
đến 1 nhóm người dùng được kết nối với 1 số thiết bị nào đó chẳng hạn. Trong đó có
thể kể đến 1 số các API đơn giản như hình dưới đây.
2.2.4. Làm thế nào để sử dụng Socket IO
Cấu trúc một ứng dụng realtime sử dụng socket bao gồm 2 phần: phía server, phía

client.
• Phía server Đây là nơi sẽ cài đặt socket io. Ngôn ngữ để dựng server có thể là
php, asp.net, nodejs,... Tuy nhiên, tùy vào ngôn ngữ lựa chọn mà cách cấu trúc
server khác nhau. Ở đây, nếu được thì khuyến khích sử dụng nodejs để dựng
server, vì như vậy có thể cài trực tiếp socketio vào cùng một server. Nếu sử
dụng php thì phải cài thêm những package khác, hoặc phải chuẩn bị riêng
server để chạy socketio.
• Phía client: Ở phía client sẽ xây dựng giao diện người dùng. Ở đây có thể sử
dụng js, hoặc các thư viện của js như jquery,... Nói chung là ngơn ngữ gì cũng
được.
• Những thứ cần chuẩn bị để sử dụng socketio
▪ PC: Mac hoặc Win đều được
▪ Download phần mềm socketio

12


• Cài đặt socketio trên server nodejs Tạo thư mục Demo (Có thể đặt tên bất kỳ)
Mở màn hình terminal (Mac)/ cmd (Win), cd đến thư mục Demo. Tại màn
hình cmd, gõ câu lệnh: npm init; rồi nhấn enter. Khi đó hệ thống sẽ chạy và
yêu cầu nhập tên dự án, nhập tên dự án bất kỳ. Ở các setting khác thì enter bỏ
qua, khi hệ thống hiển thị Yes or No? thì gõ Yes để cài đặt.
Sau khi hồn thành bước cài đặt ở trên, hệ thống sẽ tạo ra file package.json. Đây là
file dùng để cài đặt cấu hình server. Tiếp theo, cần đặt những package cần thiết trên
server để có thể làm web và ứng dụng realtime. Để cài những package này mở màn
hình cmd > cd đến thư mục Demo > gõ dòng lệnh npm install express ejs socketio Khi
cài đặt thành công, hệ thống sẽ tự tạo thư mục nodemodules
2.2.5. Duy trì và vận hành SocketIO
Máy chủ Node.js tạo điều kiện giúp thiết lập một ứng dụng giao tiếp bằng Socket.IO
dễ dàng với tính năng tùy chọn thời gian thực và giới hạn người dùng ứng dụng. Nếu

như bạn muốn thiết lập một ứng dụng giao tiếp giữa các doanh nghiệp giống
như CRM thì Socket.IO sẽ tạo ra các thư viện mạng không đồng bộ làm cho việc kết
nối bị gián đoạn, các dữ liệu dễ dàng bị đánh cắp. Hơn nữa, socket là một cơng cụ kết
nối mở khơng có chức năng quản lý sâu về các kết nối của người dùng với mọi máy
chủ khác nhau.
Giải pháp khắc phục duy nhất đó là sử dụng kho lưu trữ dữ liệu bộ nhớ Redis như
pub/sub để gửi thông báo cho các máy chủ về số người tham gia có thể nhận được tin
nhắn. Ngồi ra, Socket.IO cịn tích hợp với pub/sub và máy chủ để chia sẻ thơng tin
hiệu quả hơn.
Ngồi sử dụng Redis, bạn cũng có thể tham khảo các cơng cụ khác như CoreOS. Đây
là một loại công cụ cho phép chia nhỏ các đơn vị trên phần cứng máy chủ và giúp
cập nhật các phiên bản mới nhanh hơn.
Tuy nhiên, có một vấn đề đối với WebSockets đó là khi kết nối bị gián đoạn các yêu
cầu thăm dò sẽ được gửi về hệ thống hoặc một số máy chủ khác với dòng lỗi “Error
during WebSocket handshake: Unexpected response code: 400”.

13


Để khắc phục vấn đề này, bạn có thể sử dụng định tuyến máy khách dựa trên địa chỉ
gốc có sẵn hoặc sử dụng cookie. Tài liệu của Socket.IO có thể giải quyết lỗi trong
hầu hết các môi trường và được xem là biện pháp khắc phục hiệu quả.
2.3.

WebRTC

2.3.1. WebRTC là gì?
WebRTC là các API viết bằng javascript giúp giao tiếp theo thời gian thực mà
không cần cài plugin hay phần mềm hỗ trợ. WebRTC có khả năng hỗ trợ trình
duyệt giao tiếp thời gian thực thơng qua Video Call, Voice Call hay transfer data

P2P(peer-to-peer), không cần đến plugin, phần mềm khác.
WebRTC là viết tắt của cụm từ Web Real-Time Communication rất được các lập
trình viên ưa chuộng. WebRTC cho phép các trình duyệt giao tiếp với nhau theo
thời gian thực. Ví dụ như: gọi điện, video, chơi game… Ngồi ra, WebRTC là một
sản phẩm của World Wide Web Consortium (W3C).
2.3.2. Lịch sử của WebRTC

Hình 2.3-1: Là dự án mã nguồn mở của Google

14


WebRTC đã được hình thành ý tưởng từ những năm 2009 bởi nhóm kỹ sư Google
Hangouts. Thay vì sử dụng Flash để truyền video, hình ảnh trên web, họ quyết định
tự tạo ra một sản phẩm của riêng mình.
Năm 2010, khi hai công ty On2 và Global IP Solutions (GIPS) chính thức bị Google
thâu tóm, cơng nghệ truyền dữ liệu thời gian thực cũng được lấy làm nền tảng
cho WebRTC. Đến tháng 5 năm 2011, dự án nguồn mở hỗ trợ giao tiếp thời gian
thực giữa trình duyệt mang tên WebRTC mới chính thức được ra mắt.
Cùng lúc đó, W3C và Hiệp Hội Kỹ Sư Quốc Tế(IETF) cũng phát triển các giao thức
kết nối thời gian thực. Vì thế, họ đã quyết định bắt tay để cùng nhau xây dựng sản
phẩm này. Tháng 10 năm 2011, phiên bản đầu tiên của WebRTC chính thức ra mắt,
đến tháng 11, Chrome 23 ra đời và trở thành trình duyệt đầu tiên tích hợp sẵn
WebRTC.

2.3.3. WebRTC dùng để làm gì?

Hình 2.3-2: WebRTC được ứng dụng trong nhiều lĩnh vực

15

Tính năng nổi bật nhất của WebRTC chắc chắn chính là khả năng truyền tải video,
âm thanh, gửi dữ liệu theo thời gian thực giữa hai hay nhiều thiết bị mà không qua
trung gian, không cần cài thêm plugin.
Trang web Appear.in từng là một trong những trang web sử dụng WebRTC khá nổi
tiếng. Trang này cung cấp dịch vụ tạo phịng chat video nhanh chóng mà khơng cần
cài đặt thêm bất kì plugin nào, khơng cần đăng nhập tài khoản.
Khơng chỉ các ứng dụng mà WebRTC còn được sử dụng cho việc tạo ra các tựa game
trên trình duyệt. Người chơi chỉ cần sử dụng trình duyệt có hỗ trợ WebRTC để chơi,
khơng cần cài đặt rườm rà.

2.3.4. Lợi ích của WebRTC

Hình 2.3-3: WebRTC mang đến nhiều lợi ích cho cả người dùng và lập trình viên
• Mã nguồn mở miễn phí: WebRTC là một dự án mã nguồn mở miễn phí.
Google cho biết đây là một cơng cụ truyền thơng thời gian thực hồn tồn
miễn phí và có sẵn trên mọi trình duyệt.

16


• Hỗ trợ đa nền tảng: Mặc dù WebRTC vẫn trong giai đoạn phát triển nhưng
nó đã hoạt động tốt trên hầu hết mọi trình duyệt của các hệ điều hành bất kì.
Cho phép lập trình viên viết các đoạn mã HTML làm việc với máy tính hoặc
thiết bị di động.
• Bảo mật voice và video: Giao thức SRTP (Secure Real-Time Transport
Protocol) được dùng để mã hóa và xác thực dữ liệu media. Chống lại các khả
năng bị nghe trộm trong q trình thực hiện tác vụ video hay voice.
• Không cần plugin hay phần mềm hỗ trợ: Yếu tố quan trọng

giúp WebRTC được đánh giá rất cao chính là khả năng hoạt động không cần
đến plugin bên thứ ba mang đến sự tiện lợi, tối ưu tốc độ, tiết kiệm chi phí,…
• Tương đối dễ sử dụng: WebRTC có thể được tích hợp trong các dịch vụ web
bằng cách dùng JavaScript APIs, các Framework có sẵn.
• Sử dụng bằng thông hiệu quả: Hỗ trợ nhiều kiểu media và các thiết bị đầu
cuối khác nhau, WebRTC sử dụng băng thông hiệu quả hơn, hoạt động tốt
trong mọi điều kiện đường truyền mạng.
2.3.5. Ưu và nhược điểm WebRTC
2.3.5.1.

Ưu điểm

17


Hình 2.3-4: Hỗ trợ đa nền tảng, đa trình duyệt trên các thiết bị
• Hình thức mã nguồn mở miễn phí: Google cho biết đây là cơng cụ truyền
thơng thời gian thực hồn tồn khơng mất phí. Bạn ln thấy sự xuất hiện sẵn
sàng trên mọi trình duyệt.
• Hỗ trợ trên đa nền tảng khác nhau: Dù vẫn đang trong giai đoạn phát triển
nhưng khả năng hoạt động tốt trên mọi trình duyệt, hệ điều hành. Điều này
cịn cho phép lập trình viên viết đoạn mã HTML làm việc với máy tính, thiết
bị di động.
• Bảo mật âm thanh và video: WebRTC sử dụng giao thức SRTP (Secure
Real-Time Transport Protocol). Mục đích để mã hóa và xác thực dữ liệu
Media.Trong quá trình thực hiện tác vụ video hay voice đảm bảo chống lại
hoạt động nghe trộm.
• Khơng cần Plugin hoặc phần mềm hỗ trợ: Điều này là quá rõ ràng ngay từ
khi bạn bắt đầu tìm hiểu. Cơng cụ được đánh giá cao về khả năng linh hoạt.
Nhờ đó, người dùng có trải nghiệm tiện lợi, tối ưu tốc độ, tiết kiệm chi phí, …

• Dễ sử dụng: WebRTC được tích hợp trong các hàng loạt dịch vụ web bằng
cách dùng JavaScript APIs, các Framework có sẵn.

18


• Dùng băng thông hiệu quả: Công cụ sử dụng băng thông hiệu quả, hoạt động
tốt trong mọi điều kiện đường truyền mạng.
• Ưu điểm khác: Viết bằng JavaScripts nên dễ dàng tiếp cận và sử dụng; hồn
tồn miễn phí; bảo mật cao…
2.3.5.2.

Nhược điểm

Hình 2.3-5: WebRTC chưa hỗ trợ tồn diện tất cả trình duyệt
• WebRTC bị cản bởi NAT và tường lửa khi cố gắng thực hiện kết nối P2P.
• Khơng có cơ chế báo hiệu cài sẵn khi WebRTC tạo kết nối P2P giữa các trình
duyệt.
• WebRTC vẫn chưa chính thức hồn thiện, một số trình duyệt như IE, Safari
chưa thực sự được hỗ trợ tốt nhất.
• Các hãng trình duyệt chưa thống nhất được chuẩn video sử dụng cho
WebRTC.
• Số lượng hàm API WebRTC hỗ trợ cho mỗi trình duyệt là khác nhau, tăng rủi
ro phát sinh lỗi khi sử dụng trên các trình duyệt khác nhau.

19