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 I HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C GIA THÀNH PHỐC GIA THÀNH PHỐ HỒ CHÍ MINH HỒ CHÍ MINH CHÍ MINH TRƯỜNGNG

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH I HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C CÔNG NGHỆ THÔNG TIN THÔNG TIN
KHOA CÔNG NGHỆ THƠNG TIN PHẦN MỀMN MỀMM

ĐỒ CHÍ MINH ÁN 2

TÌM HIỂU REACT NATIVE U REACT NATIVE
VÀ XÂY DỰNG ỨNG DỤNG MINH HỌANG ỨNG DỤNG MINH HỌANG DỤNG MINH HỌANG MINH H ỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH A

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

ĐỒN NGỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH C LÃM – MSV: 19521737


Tp. Hồ Chí Minh, Tháng 7 năm 2023 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.ng 1.

GIỚI THIỆU BÀI TOÁN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH I THIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH U BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH N GIẢI QUYẾT, MƠ TẢ QUY TRÌNH I QUYẾT, MƠ TẢ QUY TRÌNH T, MƠ TẢI QUYẾT, MƠ TẢ QUY TRÌNH QUY TRÌNH

THỰC HIỆN CÁC CƠNG VIỆC CHÍNHC HIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH N CÁC CƠNG VIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH C CHÍNH...................................................................................2
1.1. Bài tốn cần giải quyết..................................................................................................2
Chương 1.ng 2.

CƠNG NGHỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH ........................................................................................................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 WebRTCch sử của WebRTC của WebRTCa WebRTC....................................................................................14

2.3.3.

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

2.3.4.

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

2.3.5.

Ưu và nhược điểm WebRTCu và nhượi ích của WebRTCc điể làm gì?m WebRTC.....................................................................17

2.3.6.

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

2.3.7.

Các phần chính của WebRTC và chức năng của WebRTC API là n chính của WebRTCa WebRTC và chức hoạt động của WebRTCc năng của WebRTCa WebRTC API là

gì?

....................................................................................................................................
21

Chương 1.ng 3.

XÁC ĐINH MƠ HÌNH HĨA U CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH 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 1.ng 4.

THIẾT, MƠ TẢ QUY TRÌNH T KẾT, MƠ TẢ QUY TRÌNH HỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH THỐNGNG................................................................................25

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

THIẾT, MƠ TẢ QUY TRÌNH T KẾT, MƠ TẢ QUY TRÌNH GIAO DIỆU BÀI TỐN CẦN GIẢI QUYẾT, MƠ TẢ QUY TRÌNH 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ậpp....................................................................................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 1.ng 6.

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

6.1. Môi trường cài đặtng cài đặtt.....................................................................................................30
6.2. Kiể làm gì?m thử của WebRTC phần chính của WebRTC và chức năng của WebRTC API là n mềmm................................................................................................30
6.3. Hướng dẫn:ng dẫn:n cài đặtt.....................................................................................................30
Chương 1.ng 7.

KẾT, MƠ TẢ QUY TRÌNH T LUẬNN........................................................................................................31

7.1. Kết quả đạt đượct quảng viên hướng dẫn: đạt động của WebRTCt đượi ích của WebRTCc......................................................................................................31
7.2. Hướng dẫn:ng phát triể làm gì?n trong tương 1.ng lai.......................................................................31


MỤC LỤC ẢNH
Hình 2.1-1: Phát triển ứng dụng nhanhn ứng dụng nhanhng dụng nhanhng nhanh...............................................................................5
Hình 2.1-2: Phát triển ứng dụng nhanhn đa ứng dụng nhanhng dụng nhanhng.......................................................................................6
Hình 2.1-3: Kiến trúc cũn trúc cũ..............................................................................................................7
Hình 2.1-4: Kiến trúc cũn trúc mớii........................................................................................................10
Hình 2.3-1: Là dự án mã nguồn mở của Google án mã nguồn mở của Googlen mở của Google của Googlea Google.............................................................14
Hình 2.3-2: WebRTC được ứng dụng trong nhiều lĩnh vựcc ứng dụng nhanhng dụng nhanhng trong nhiều lĩnh vựcu lĩnh vự án mã nguồn mở của Googlec........................................15
Hình 2.3-3: WebRTC mang đến trúc cũn nhiều lĩnh vựcu lợc ứng dụng trong nhiều lĩnh vựci ích cho cả người dùng và lập trình người dùng và lập trình i dùng và lập trình p trình
viên................................................................................................................................................... 16

Hình 2.3-4: Hỗ trợ đa nền tảng, đa trình duyệt trên các thiết bị trợc ứng dụng trong nhiều lĩnh vực đa nều lĩnh vựcn tả người dùng và lập trình ng, đa trình duyệt trên các thiết bịt trên các thiến trúc cũt bị............................18
Hình 2.3-5: WebRTC chưa hỗ trợ đa nền tảng, đa trình duyệt trên các thiết bị trợc ứng dụng trong nhiều lĩnh vực tồn diệt trên các thiết bịn tất cả trình duyệtt cả người dùng và lập trình trình duyệt trên các thiết bịt...............................19
Hình 2.3-6: M ng lướii ho t động giữa các đối tượng theo hình thức peer – to – ng giữa các đối tượng theo hình thức peer – to – a các đối tượng theo hình thức peer – to – i tược ứng dụng trong nhiều lĩnh vựcng theo hình thứng dụng nhanhc peer – to –
peer................................................................................................................................................... 20
Hình 2.3-7: Cung cất cả trình duyệtp tính năng truyều lĩnh vựcn dữa các đối tượng theo hình thức peer – to – liệt trên các thiết bịu thời dùng và lập trình i gian thự án mã nguồn mở của Googlec ................................21
Hình 3.2-1: Sơ đồ lớp mức phân tích đồn mở của Google lớip mứng dụng nhanhc phân tích...................................................................................24
Hình 3.3-1: Sơ đồ lớp mức phân tích đồn mở của Google usecase........................................................................................................24
Hình 5.2-1: Màn hình Đăng nhập trì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ười dùng và lập trình ng 3.1-1: Biển ứng dụng nhanhu mẫu 1u 1...........................................................................................................23
Bả người dùng và lập trình ng 3.1-2: Biển ứng dụng nhanhu mẫu 1u 2...........................................................................................................23
Bả người dùng và lập trình ng 3.1-3: Biển ứng dụng nhanhu mẫu 1u 3...........................................................................................................23
Bả người dùng và lập trình ng 5.1-1: Danh sách các màn hình..................................................................................25
Bả người dùng và lập trình ng 5.2-1: Mơ tả người dùng và lập trình chi tiến trúc cũt màn hình Đăng nhập trình p............................................................26
Bả người dùng và lập trình ng 5.2-2: Mơ tả người dùng và lập trình chi tiến trúc cũt màn hình Home.......................................................................27
Bả người dùng và lập trình ng 5.2-3: Mơ tả người dùng và lập trình chi tiến trúc cũt màn hình VideoCall...............................................................28
Bả người dùng và lập trình ng 5.2-4: Mơ tả người dùng và lập trình chi tiến trúc cũ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 toá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 đượi ích của WebRTCc xây dực hiện:ng bao gồm các nội dung cơ bản: m các nộng của WebRTCi dung cơng 1. bảng viên hướng dẫn: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ướng dẫn:c xây dực hiện: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
Đượi ích của WebRTCc phát triể làm gì?n bởi Facebook, React Native là một framework hướng đếni Facebook, React Native là mộng của WebRTCt framework hướng dẫn:ng đ ết quả đạt đượcn
phát triể làm gì?n ức hoạt động của WebRTCng dụng di động đa nền tảng.ng di động của WebRTCng đa nềmn tảng viên hướng dẫn:ng.
Vớng dẫn:i sực hiện: trợi ích của WebRTC giúp của WebRTCa React Native, lậpp trình viên (developer) có thể làm gì? sử của WebRTC dụng di động đa nền tảng.ng
JavaScript để làm gì? tạt động của WebRTCo ra mobile apps (ức hoạt động của WebRTCng dụng di động đa nền tảng.ng di động của WebRTCng) hỗ trợ cho cả nền tảng trợi ích của WebRTC cho cảng viên hướng dẫn: n ềmn tảng viên hướng dẫn:ng
Android và iOS.
Instagram, Facebook, Skype… là những ứng dụng nổi bật sử dụng Reactng ức hoạt động của WebRTCng dụng di động đa nền tảng.ng nổi bật sử dụng Reacti bậpt sử của WebRTC dụng di động đa nền tảng.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ể làm gì? khơng nhanh như các ức hoạt động của WebRTCng dụng di động đa nền tảng.ng gốc thực sự được xâyc thực hiện:c sực hiện: đượi ích của WebRTCc xây
dực hiện:ng b)ng các ngôn ngững ứng dụng nổi bật sử dụng React quen thuộng của WebRTCc như Java, Objective-C và C #. Tuy nhiên,
bạt động của WebRTCn sẽ có đượi ích của WebRTCc hiện:u suất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct gần chính của WebRTC và chức năng của WebRTC API là n như ngôn ngững ứng dụng nổi bật sử dụng React đất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácy vì nó cung cất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácp cho bạt động của WebRTCn các
thành phần chính của WebRTC và chức năng của WebRTC API là n gốc thực sự được xâyc, Chết quả đạt được động của WebRTC xem và Văn bảng viên hướng dẫn:n.
+ng dụng di động đa nền tảng.ng dành cho thiết quả đạt đượct bịch sử của WebRTC di động của WebRTCng dực hiện:a trên React Native không ph ảng viên hướng dẫn:i là ức hoạt động của WebRTCng

dụng di động đa nền tảng.ng web HTML5, hybrid hoặtc di động của WebRTCng. Thay vào đó, nó là m ộng của WebRTCt ức hoạt động của WebRTCng d ụng di động đa nền tảng.ng di
động của WebRTCng thực hiện:c sực hiện:.
Bạt động của WebRTCn có thể làm gì? nâng hiện:u suất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct ức hoạt động của WebRTCng dụng di động đa nền tảng.ng React Native của WebRTCa mình lên mộng của WebRTCt t ần chính của WebRTC và chức năng của WebRTC API là m cao
mớng dẫn:i b)ng cách tốc thực sự được xâyi ưu hóa ức hoạt động của WebRTCng dụng di động đa nền tảng.ng của WebRTCa bạt động của WebRTCn b)ng mã gốc thực sự được xâyc. Có, React Native
cũng cho phép bạt động của WebRTCn sử của WebRTC dụng di động đa nền tảng.ng mã gốc thực sự được xâyc. Để làm gì? có hiện:u suất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct tốc thực sự được xâyi đa, bạt động của WebRTCn có th ể làm gì? xây
dực hiện:ng mộng của WebRTCt sốc thực sự được xây tính năng trong ức hoạt động của WebRTCng dụng di động đa nền tảng.ng của WebRTCa mình b)ng mã gốc thực sự được xâyc và m ộng của WebRTCt s ốc thực sự được xây tính
năng vớng dẫn:i React Native.
2.1.2.2.

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

3


React Native cho phép bạt động của WebRTCn tạt động của WebRTCo các UI động của WebRTCc đáo, bắt mắt thông qua các thànht mắt mắt thông qua các thànht thơng qua các thành
phần chính của WebRTC và chức năng của WebRTC API là n khai báo đượi ích của WebRTCc xây dực hiện:ng sẵn, chẳng hạn như Picker, Nút, Thanh trượt,n, chẳng hạn như Picker, Nút, Thanh trượt,ng hạt động của WebRTCn như Picker, Nút, Thanh tr ượi ích của WebRTCt,
Chuyể làm gì?n đổi bật sử dụng Reacti, v.v. Bạt động của WebRTCn cũng có thể làm gì? tạt động của WebRTCo các thành phần chính của WebRTC và chức năng của WebRTC API là n của WebRTCa riêng b ạt động của WebRTCn v ớng dẫn:i
TouchableNativeFeedback và TouchableOpacity. Có nhiềmu thành phần chính của WebRTC và chức năng của WebRTC API là n dành
riêng cho iOS và Android có sẵn, chẳng hạn như Picker, Nút, Thanh trượt,n để làm gì? giúp thiết quả đạt đượct bịch sử của WebRTC hoạt động của WebRTCt đ ộng của WebRTCng hi ện:u qu ảng viên hướng dẫn: trên đi ện:n
thoạt động của WebRTCi di động của WebRTCng Android và iOS.
Ví dụng di động đa nền tảng.:
 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ất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácp cho bạt động của WebRTCn các thành phần chính của WebRTC và chức năng của WebRTC API là n cho văn bảng viên hướng dẫn:n, hình ảng viên hướng dẫn:nh, đ ần chính của WebRTC và chức năng của WebRTC API là u vào
bàn phím, danh sách có thể làm gì? cuộng của WebRTCn, thanh tiết quả đạt đượcn trình, hình động của WebRTCng, bảng viên hướng dẫn:ng tạt động của WebRTCm, liên
kết quả đạt đượct, v.v. Các thành phần chính của WebRTC và chức năng của WebRTC API là n này tăng tốc thực sự được xâyc đáng kể làm gì? quá trình phát triể làm gì?n ức hoạt động của WebRTCng d ụng di động đa nền tảng.ng và
tính năng Tảng viên hướng dẫn:i lạt động của WebRTCi nóng cũng giúp bạt động của WebRTCn tiết quả đạt đượct kiện:m rất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct nhiềmu th ờng cài đặti gian vì nó cho
phép bạt động của WebRTCn tảng viên hướng dẫn:i lạt động của WebRTCi ức hoạt động của WebRTCng dụng di động đa nền tảng.ng của WebRTCa mình mà khơng cần chính của WebRTC và chức năng của WebRTC API là n biên dịch sử của WebRTCch lạt động của WebRTCi toàn bộng của WebRTC mã.
Phảng viên hướng dẫn:n ức hoạt động của WebRTCng thư viện:n bảng viên hướng dẫn:n địch sử của WebRTCa như Redux (để làm gì? xử của WebRTC lý trạt động của WebRTCng thái ức hoạt động của WebRTCng dụng di động đa nền tảng.ng của WebRTCa bạt động của WebRTCn)
và Phảng viên hướng dẫn:n ức hoạt động của WebRTCng tuyện:t vờng cài đặti bảng viên hướng dẫn:n địch sử của WebRTCa (danh sách các thành phần chính của WebRTC và chức năng của WebRTC API là n và b ảng viên hướng dẫn:n trình di ễn)n)
cũng sẽ giúp bạt động của WebRTCn hồn thành cơng viện:c phát triể làm gì?n ức hoạt động của WebRTCng d ụng di động đa nền tảng.ng di đ ộng của WebRTCng c ủa WebRTCa mình
nhanh hơng 1.n.
Công cụng di động đa nền tảng. phát triể làm gì?n như Hạt động của WebRTCt nhân để làm gì? viết quả đạt đượct mã, Yoga để làm gì? xây dực hiện:ng bốc thực sự được xây trí, Lính gác
để làm gì? theo dõi lỗ trợ cho cả nền tảngi và sực hiện: cốc thực sự được xây, và Công cụng di động đa nền tảng. phát triể làm gì?n React để làm gì? gỡ lỗi làm cho quá lỗ trợ cho cả nền tảngi làm cho quá
trình phát triể làm gì?n React Native dễn) dàng hơng 1.n và nhanh h ơng 1.n rất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct nhi ềmu. Các công
cụng di động đa nền tảng. React Native tuyện:t vờng cài đặti khác bao gồm các nội dung cơ bản: m Mã VS, Đốc thực sự được xâyt cháy, Hộng của WebRTCi ch ợi ích của WebRTC tri ể làm gì?n lãm, và
Bugsnag.

4


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

2.1.2.4.

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

Code mộng của WebRTCt lần chính của WebRTC và chức năng của WebRTC API là n, sử của WebRTC dụng di động đa nền tảng.ng nó ởi Facebook, React Native là một framework hướng đến khắt mắt thông qua các thànhp mọi nơi. Tiết kiệm thời gian và tiền bạci nơng 1.i. Tiết quả đạt đượct kiện:m thờng cài đặti gian và tiềmn bạt động của WebRTCc
b)ng cách xây dực hiện:ng các ức hoạt động của WebRTCng dụng di động đa nền tảng.ng đa nềmn tảng viên hướng dẫn:ng. Nhưng hãy nh ớng dẫn: r)ng b ạt động của WebRTCn v ẫn:n
cần chính của WebRTC và chức năng của WebRTC API là n thực hiện:c hiện:n mộng của WebRTCt sốc thực sự được xây điềmu chỉnh dành riêng cho nền tảng.nh dành riêng cho nềmn tảng viên hướng dẫn:ng.

5


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

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

Hơng 1.n 2.000 ngường cài đặti đóng góp vớng dẫn:i hơng 1.n 85.000 ngôi sao trên GitHub.
Các công ty như Callstack, Biện:t thực hiện: phần chính của WebRTC và chức năng của WebRTC API là n mềmm, Microsoft, và Màu đỏ vô hạn đã vơ hạt động của WebRTCn đã
đóng góp cho khn khổi bật sử dụng React này. Bạt động của WebRTCn sẽ tìm thất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácy rất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct nhiềmu thành ph ần chính của WebRTC và chức năng của WebRTC API là n và th ư
viện:n React Native đượi ích của WebRTCc tạt động của WebRTCo bởi Facebook, React Native là một framework hướng đếni cộng của WebRTCng đồm các nội dung cơ bản: ng các nhà phát triể làm gì?n trên các trang
web như Mã thơng báo và Thư mụng di động đa nền tảng.c gốc thực sự được xâyc.
Nhậpn trợi ích của WebRTC giúp vềm StackOverflow, Reddit hoặtc là Bộng của WebRTC giảng viên hướng dẫn:i mã. Bạt động của WebRTCn ln ln tìm
ngường cài đặti giúp bạt động của WebRTCn. Bạt động của WebRTCn cũng có thể làm gì? nhậpn đượi ích của WebRTCc sực hiện: giúp đỡ lỗi làm cho quá từ Cộng đồng bất hòa Cộng của WebRTCng đồm các nội dung cơ bản: ng b ất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct hòa
Reactiflux, các Phảng viên hướng dẫn:n ức hoạt động của WebRTCng nhóm Facebook gốc thực sự được xâyc, và Phảng viên hướng dẫn:n ức hoạt động của WebRTCng cộng của WebRTCng đồm các nội dung cơ bản: ng
Spectrum bảng viên hướng dẫn:n địch sử của WebRTCa.
2.1.2.6.

Dễ học

6

Các tài liện:u chính thức hoạt động của WebRTCc thân thiện:n vớng dẫn:i ngường cài đặti mớng dẫn:i bắt mắt thơng qua các thànht đần chính của WebRTC và chức năng của WebRTC API là u và có source code ví
dụng di động đa nền tảng.. Bên cạt động của WebRTCnh các tài liện:u chính thức hoạt động của WebRTCc, bạt động của WebRTCn cũng có thể làm gì? thử của WebRTC các cách khác để làm gì?
thực hiện:c hành.
2.1.3. Kiến trúc React Native
2.1.3.1.

Kiến trúc cũ

Thực hiện:c chất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct, React Native là mộng của WebRTCt giảng viên hướng dẫn:i pháp platform-agnostic (không phụng di động đa nền tảng. thu ộng của WebRTCc
nềmn tảng viên hướng dẫn:ng). Trong phạt động của WebRTCm vi này, mụng di động đa nền tảng.c tiêu chính của WebRTCa framework là cho phép các
developer viết quả đạt đượct code b)ng Javascript vớng dẫn:i ReactJS trong khi ởi Facebook, React Native là một framework hướng đến bên d ướng dẫn:i React
Native sử của WebRTC dụng di động đa nền tảng.ng các cơng 1. chết quả đạt được riêng của WebRTCa nó để làm gì? biên dịch sử của WebRTCch các React Element để làm gì? phía
hện: điềmu hành có thể làm gì? hiể làm gì?u đượi ích của WebRTCc. Điềmu 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 cài đặtng, đốc thực sự được xâyi vớng dẫn:i hện: điềmu hành Android/iOS, cơng 1. chết quả đạt được hoạt động của WebRTCt động của WebRTCng sẽ như
sau:

Hình 2.1-3: Kiến trúc cũn trúc cũ

7


Có 3 luồm các nội dung cơ bản: ng chạt động của WebRTCy song song và riêng biện:t trong mỗ trợ cho cả nền tảngi ức hoạt động của WebRTCng dụng di động đa nền tảng.ng React Native:
● JS thread: là nơng 1.i tất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct cảng viên hướng dẫn: code Javascript đượi ích của WebRTCc đọi nơi. Tiết kiệm thời gian và tiền bạcc và biên dịch sử của WebRTCch, n ơng 1.i x ử của WebRTC lý
hần chính của WebRTC và chức năng của WebRTC API là u hết quả đạt đượct các logic nghiện:p vụng di động đa nền tảng. của WebRTCa ức hoạt động của WebRTCng dụng di động đa nền tảng.ng. Metro sẽ đóng gói t ất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct cảng viên hướng dẫn:
code Javascript thành mộng của WebRTCt file duy nhất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct. Phần chính của WebRTC và chức năng của WebRTC API là n code này sẽ đượi ích của WebRTCc chuy ể làm gì?n
tớng dẫn:i cơng cụng di động đa nền tảng. JavascriptCore (JSC) để làm gì? có thể làm gì? chạt động của WebRTCy đượi ích của WebRTCc.

● Native thread: là nơng 1.i xử của WebRTC lý code native. Nó giao tiết quả đạt đượcp vớng dẫn:i JS Thread bất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct c ức hoạt động của WebRTC
khi nào có nhu cần chính của WebRTC và chức năng của WebRTC API là u cần chính của WebRTC và chức năng của WebRTC API là n thay đổi bật sử dụng Reacti UI hoặtc truy cậpp các hàm native. Chúng
ta có thể làm gì? chia Native Thread thành Native UI và Native Modules. T ất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct c ảng viên hướng dẫn:
các Native Modules đềmu đượi ích của WebRTCc khởi Facebook, React Native là một framework hướng đếni động của WebRTCng khi chúng ta sử của WebRTC dụng di động đa nền tảng.ng ức hoạt động của WebRTCng
dụng di động đa nền tảng.ng. Điềmu đó có nghĩa là module Bluetooth sẽ ln ln ởi Facebook, React Native là một framework hướng đến tr ạt động của WebRTCng thái
kích hoạt động của WebRTCt bởi Facebook, React Native là một framework hướng đếni React Native kể làm gì? cảng viên hướng dẫn: khi khơng có nhu cần chính của WebRTC và chức năng của WebRTC API là u sử của WebRTC dụng di động đa nền tảng.ng.
● Shadow Thread: là nơng 1.i các layout sẽ đượi ích của WebRTCc tính tốn. Nó sử của WebRTC dụng di động đa nền tảng.ng Layout
Engine riêng của WebRTCa Facebook đượi ích của WebRTCc gọi nơi. Tiết kiệm thời gian và tiền bạci là Yoga nh)m tính tốn flexbox
layout, sau đó gử của WebRTCi kết quả đạt đượct quảng viên hướng dẫn: vềm phía Native UI.

Để làm gì? giao tiết quả đạt đượcp giững ứng dụng nổi bật sử dụng Reacta JS thread và Native thread chúng ta sẽ s ử của WebRTC d ụng di động đa nền tảng.ng m ộng của WebRTCt Bridge.
Phía bên dướng dẫn:i, Module C++ này hần chính của WebRTC và chức năng của WebRTC API là u hết quả đạt đượct đượi ích của WebRTCc xây dực hiện:ng xung quanh b )ng m ộng của WebRTCt
hàng đợi ích của WebRTCi bất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct đồm các nội dung cơ bản: ng bộng của WebRTC (asynchronous queue). Bất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct cức hoạt động của WebRTC khi nào nó nhậpn đ ượi ích của WebRTCc d ững ứng dụng nổi bật sử dụng React
liện:u từ Cộng đồng bất hịa mộng của WebRTCt trong hai phía (JS thread hoặtc Native thread), nó sẽ tu ần chính của WebRTC và chức năng của WebRTC API là n t ực hiện: hóa d ững ứng dụng nổi bật sử dụng React
liện:u dướng dẫn:i dạt động của WebRTCng JSON và chuyể làm gì?n nó qua hàng đợi ích của WebRTCi, cuốc thực sự được xâyi cùng đượi ích của WebRTCc giảng viên hướng dẫn:i mã khi
nó tớng dẫn:i nơng 1.i.
Điềmu này có nghĩa là tất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct cảng viên hướng dẫn: các thread đềmu dực hiện:a trên chu ỗ trợ cho cả nền tảngi tín hi ện:u JSON đ ượi ích của WebRTCc
truyềmn bất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct đồm các nội dung cơ bản: ng bộng của WebRTC qua Bridge, và chúng sẽ đượi ích của WebRTCc gử của WebRTCi tớng dẫn:i mộng của WebRTCt trong hai phía
vớng dẫn:i mong muốc thực sự được xâyn (nhưng không chắt mắt thông qua các thànhc là đảng viên hướng dẫn:m bảng viên hướng dẫn:o) sẽ nhậpn đượi ích của WebRTCc phảng viên hướng dẫn:n hồm các nội dung cơ bản: i trong
tương 1.ng lai. Bạt động của WebRTCn cũng có thể làm gì? sẽ gặtp phảng viên hướng dẫn:i vất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cácn đềm tắt mắt thông qua các thànhc nghẽn thông tin và không
nhậpn đượi ích của WebRTCc phảng viên hướng dẫn:n hồm các nội dung cơ bản: i.

8


Mộng của WebRTCt ví dụng di động đa nền tảng. phổi bật sử dụng React biết quả đạt đượcn cho biết quả đạt đượct lý do tạt động của WebRTCi sao điềmu này lạt động của WebRTCi t ạt động của WebRTCo ra các v ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cácn đ ềm v ềm
hiện:u suất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct khi đượi ích của WebRTCc nhìn thất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácy khi cuộng của WebRTCn mộng của WebRTCt danh sách dững ứng dụng nổi bật sử dụng React liện:u lớng dẫn:n: B ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct c ức hoạt động của WebRTC khi
nào sực hiện: kiện:n onScroll xảng viên hướng dẫn:y ra trên Native thread, thông tin sẽ đ ượi ích của WebRTCc g ử của WebRTCi khơng
đồm các nội dung cơ bản: ng bộng của WebRTC đết quả đạt đượcn JS thread, nhưng Native thread không chờng cài đặt JS thread thực hiện:c hiện:n
xong mà nó lạt động của WebRTCi gử của WebRTCi trởi Facebook, React Native là một framework hướng đến lạt động của WebRTCi theo cách khác. Điềmu này tạt động của WebRTCo ra m ộng của WebRTCt s ực hiện: delay, sẽ có

mộng của WebRTCt khoảng viên hướng dẫn:ng trốc thực sự được xâyng trướng dẫn:c khi thông tin xuất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct hiện:n trên màn hình.
Tương 1.ng tực hiện: như vậpy, viện:c tính tốn hiể làm gì?n thịch sử của WebRTC layout cần chính của WebRTC và chức năng của WebRTC API là n phảng viên hướng dẫn:i trảng viên hướng dẫn:i qua nhiềmu vịng
trướng dẫn:c khi nó có thể làm gì? đượi ích của WebRTCc hiể làm gì?n thịch sử của WebRTC trên màn hình, vì nó cần chính của WebRTC và chức năng của WebRTC API là n phảng viên hướng dẫn:i đi qua Yoga
engine trướng dẫn:c khi có thể làm gì? đượi ích của WebRTCc tính bởi Facebook, React Native là một framework hướng đếni Native thread và tất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct nhiên chúng cũng sẽ
phảng viên hướng dẫn:i đi qua Bridge để làm gì? tớng dẫn:i JS Thread.
Chúng ta có thể làm gì? nhậpn thất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácy cách gử của WebRTCi dững ứng dụng nổi bật sử dụng React liện:u JSON mộng của WebRTCt cách bất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct đ ồm các nội dung cơ bản: ng b ộng của WebRTC sẽ t ạt động của WebRTCo
ra vất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cácn đềm vềm hiện:u suất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct. Nhưng còn cách nào khác để làm gì? Javascript của WebRTCa chúng ta
giao tiết quả đạt đượcp vớng dẫn:i Native code? Đây là nơng 1.i JSI phát huy tác dụng di động đa nền tảng.ng.
2.1.3.2. Kiến trúc mới
Viện:c tái kiết quả đạt đượcn trúc của WebRTCa React Native sẽ dần chính của WebRTC và chức năng của WebRTC API là n loạt động của WebRTCi bỏ vô hạn đã Bridge và thay th ết quả đạt được nó b )ng
mộng của WebRTCt thành phần chính của WebRTC và chức năng của WebRTC API là n mớng dẫn:i có tên là Javascript Interface (JSI).
JSI có mộng của WebRTCt vài cảng viên hướng dẫn:i tiết quả đạt đượcn mớng dẫn:i rất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct thú vịch sử của WebRTC, đần chính của WebRTC và chức năng của WebRTC API là u tiên là JS bundle khơng cịn ph ụng di động đa nền tảng.
thuộng của WebRTCc vào JS core nững ứng dụng nổi bật sử dụng Reacta. Nói cách khác, JSC engine giờng cài đặt đây có th ể làm gì? d ễn) dàng hốn
đổi bật sử dụng Reacti vớng dẫn:i các JavaScript engine khác - có khảng viên hướng dẫn: năng hoạt động của WebRTCt động của WebRTCng tốc thực sự được xâyt h ơng 1.n - nh ư
Chrome Engine V8 chẳng hạn như Picker, Nút, Thanh trượt,ng hạt động của WebRTCn.
Cảng viên hướng dẫn:i tiết quả đạt đượcn thức hoạt động của WebRTC hai của WebRTCa kiết quả đạt đượcn trúc mớng dẫn:i này là B)ng cách s ử của WebRTC d ụng di động đa nền tảng.ng JSI, JavaScript có
thể làm gì? giững ứng dụng nổi bật sử dụng React tham chiết quả đạt đượcu đết quả đạt đượcn C++ Host Object và truy cậpp ph ương 1.ng th ức hoạt động của WebRTCc trên chúng.
Từ Cộng đồng bất hịa đó JavaScript và các thành phần chính của WebRTC và chức năng của WebRTC API là n Native sẽ nhậpn thức hoạt động của WebRTCc và giao ti ết quả đạt đượcp đ ượi ích của WebRTCc l ẫn:n
nhau.
Nói cách khác, JSI sẽ cho phép khảng viên hướng dẫn: năng tương 1.ng tác hoàn toàn giững ứng dụng nổi bật sử dụng Reacta tất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct c ảng viên hướng dẫn: các
thread. Vớng dẫn:i khái niện:m chia sẻ quyền sở hữu (shared ownership), code quyềmn sởi Facebook, React Native là một framework hướng đến hững ứng dụng nổi bật sử dụng Reactu (shared ownership), code
JavaScript có thể làm gì? giao tiết quả đạt đượcp vớng dẫn:i các thành phần chính của WebRTC và chức năng của WebRTC API là n Native trực hiện:c tiết quả đạt đượcp từ Cộng đồng bất hòa JS thread và

9


bỏ vơ hạn đã qua viện:c tuần chính của WebRTC và chức năng của WebRTC API là n tực hiện: hóa thơng điện:p dạt động của WebRTCng JSON giững ứng dụng nổi bật sử dụng Reacta các thành ph ần chính của WebRTC và chức năng của WebRTC API là n, lo ạt động của WebRTCi b ỏ vô hạn đã
tất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct cảng viên hướng dẫn: các vất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácn đềm tắt mắt thông qua các thànhc nghẽn và bất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct đồm các nội dung cơ bản: ng bộng của WebRTC trên Bridge.

Hình 2.1-4: Kiến trúc cũn trúc mớii

Ngoài viện:c cảng viên hướng dẫn:i thiện:n đáng kể làm gì? hiện:u suất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct giao tiết quả đạt đượcp giững ứng dụng nổi bật sử dụng Reacta các thread vớng dẫn:i nhau, kiết quả đạt đượcn
trúc mớng dẫn:i này cũng cho phép kiể làm gì?m sốt trực hiện:c tiết quả đạt đượcp các Native modules. Có nghĩa
là chúng ta hồn tồn có thể làm gì? sử của WebRTC dụng di động đa nền tảng.ng các Native modules khi chúng ta c ần chính của WebRTC và chức năng của WebRTC API là n
chúng, khơng cần chính của WebRTC và chức năng của WebRTC API là n kích hoạt động của WebRTCt tất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct cảng viên hướng dẫn: khi khởi Facebook, React Native là một framework hướng đếni chạt động của WebRTCy ức hoạt động của WebRTCng d ụng di động đa nền tảng.ng. Đi ềmu này mang l ạt động của WebRTCi
sực hiện: cảng viên hướng dẫn:i thiện:n hiện:u suất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct hết quả đạt đượct sức hoạt động của WebRTCc rõ rện:t.
Cơng 1. chết quả đạt được mớng dẫn:i này có khảng viên hướng dẫn: năng linh hoạt động của WebRTCt, cũng có thể làm gì? có lợi ích của WebRTCi cho nhi ềmu tr ường cài đặtng
hợi ích của WebRTCp sử của WebRTC dụng di động đa nền tảng.ng khác nhau. Chẳng hạn như Picker, Nút, Thanh trượt,ng hạt động của WebRTCn như bây giờng cài đặt chúng ta có sức hoạt động của WebRTCc mạt động của WebRTCnh của WebRTCa C++
trong tay, thậpt dễn) dàng để làm gì? thất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cácy React Native có thể làm gì? đượi ích của WebRTCc sử của WebRTC dụng di động đa nền tảng.ng trong mộng của WebRTCt
hện: thốc thực sự được xâyng rất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct lớng dẫn:n.

10


2.2.

Socket IO

2.2.1. Vì sao Socket IO ra đời
Khi truy cậpp vào 1 trang web hoặtc ức hoạt động của WebRTCng dụng di động đa nền tảng.ng bất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct kỳ thì viện:c giao ti ết quả đạt đượcp gi ững ứng dụng nổi bật sử dụng Reacta máy
chủa WebRTC (Server) và máy khách (Client) là viện:c rất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct quan tr ọi nơi. Tiết kiệm thời gian và tiền bạcng. Đ ể làm gì? máy ch ủa WebRTC và máy
khách có thể làm gì? nhậpn biết quả đạt đượct đượi ích của WebRTCc sực hiện: thay đổi bật sử dụng Reacti của WebRTCa đốc thực sự được xâyi phương 1.ng thì cần chính của WebRTC và chức năng của WebRTC API là n sử của WebRTC dụng di động đa nền tảng.ng
những ứng dụng nổi bật sử dụng Reactng cách thức hoạt động của WebRTCc như AJAX, long-polling, short-polling, & HTML5 server-sent
events,..Viện:c sử của WebRTC dụng di động đa nền tảng.ng cách giao tiết quả đạt đượcp b)ng những ứng dụng nổi bật sử dụng Reactng công cụng di động đa nền tảng. kể làm gì? trên tồm các nội dung cơ bản: n t ạt động của WebRTCi nhi ềmu
nhượi ích của WebRTCc điể làm gì?m trong đó có thể làm gì? kể làm gì? đết quả đạt đượcn là kết quả đạt đượct quảng viên hướng dẫn: trảng viên hướng dẫn: vềm chậpm và tốc thực sự được xâyn rất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct nhi ềmu
tài nguyên.
Để làm gì? khắt mắt thông qua các thànhc phụng di động đa nền tảng.c những ứng dụng nổi bật sử dụng Reactng nhượi ích của WebRTCc điể làm gì?m này, cơng cụng di động đa nền tảng. socket.io ra đờng cài đặti để làm gì? giúp cho
viện:c giao tiết quả đạt đượcp giững ứng dụng nổi bật sử dụng Reacta Server và Client diễn)n ra tức hoạt động của WebRTCc khắt mắt thông qua các thànhc và chiết quả đạt đượcm ít tài ngun
nhất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct.
2.2.2. Socket IO là gì?
Socket IO đượi ích của WebRTCc xem là 1 module trong Node.js đượi ích của WebRTCc nhà sáng chết quả đạt được tạt động của WebRTCo ra và

phát triể làm gì?n từ Cộng đồng bất hòa năm 2010. Mụng di động đa nền tảng.c đích lớng dẫn:n nhất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct của WebRTCa Socket io là để làm gì? tạt động của WebRTCo mơi tr ường cài đặtng
giao tiết quả đạt đượcp thuậpn lợi ích của WebRTCi trên Internet giúp trảng viên hướng dẫn: vềm các giá trịch sử của WebRTC thực hiện:c ngay tạt động của WebRTCi th ờng cài đặti điể làm gì?m
giao tiết quả đạt đượcp giững ứng dụng nổi bật sử dụng Reacta các bên vớng dẫn:i nhau (thường cài đặtng là giững ứng dụng nổi bật sử dụng Reacta server và client).
Viện:c giao tiết quả đạt đượcp 2 chiềmu giững ứng dụng nổi bật sử dụng Reacta máy khách và máy chủa WebRTC đượi ích của WebRTCc thực hiện:c hiện:n bởi Facebook, React Native là một framework hướng đếni socket
io khi và chỉnh dành riêng cho nền tảng. khi máy khách có module này trong trình duyện:t và máy ch ủa WebRTC cũng
đã tích hợi ích của WebRTCp sẵn, chẳng hạn như Picker, Nút, Thanh trượt,n gói socket io. Các ức hoạt động của WebRTCng dụng di động đa nền tảng.ng sử của WebRTC dụng di động đa nền tảng.ng socket io thường cài đặtng địi h ỏ vơ hạn đãi
tốc thực sự được xâyc động của WebRTC phảng viên hướng dẫn:n hồm các nội dung cơ bản: i ngay lậpp tức hoạt động của WebRTCc. Mộng của WebRTCt sốc thực sự được xây ví dụng di động đa nền tảng. điể làm gì?n hình như xổi bật sử dụng React sốc thực sự được xây, trực hiện:c tiết quả đạt đượcp
bóng đá, chat…
Cần chính của WebRTC và chức năng của WebRTC API là n phảng viên hướng dẫn:i nói thêm r)ng socket io không phảng viên hướng dẫn:i là 1 ngôn ngững ứng dụng nổi bật sử dụng React, vì vậpy nó phảng viên hướng dẫn:i
đượi ích của WebRTCc sử của WebRTC dụng di động đa nền tảng.ng kết quả đạt đượct hợi ích của WebRTCp vớng dẫn:i những ứng dụng nổi bật sử dụng Reactng ngôn ngững ứng dụng nổi bật sử dụng React khác như php, asp.net, nodejs,..
Đết quả đạt đượcn đây nết quả đạt đượcu bạt động của WebRTCn cịn thắt mắt thơng qua các thànhc mắt mắt thơng qua các thànhc socket io là gì, hãy cùng tìm hi ể làm gì?u ti ết quả đạt đượcp v ềm đ ặtc
điể làm gì?m của WebRTCa nó ởi Facebook, React Native là một framework hướng đến phần chính của WebRTC và chức năng của WebRTC API là n tiết quả đạt đượcp theo.
2.2.3. Ưu điểm

11


2.2.3.1.

Bảo mật cao

Socket io đượi ích của WebRTCc xây dực hiện:ng dực hiện:a trên Engine.IO. Nó sẽ khởi Facebook, React Native là một framework hướng đếni chạt động của WebRTCy ph ương 1.ng thức hoạt động của WebRTCc
long-polling trướng dẫn:c nhất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct để làm gì? kết quả đạt đượct nốc thực sự được xâyi. Sau đó nó mớng dẫn:i sử của WebRTC dụng di động đa nền tảng.ng các phương 1.ng thức hoạt động của WebRTCc
giao tiết quả đạt đượcp tốc thực sự được xâyt hơng 1.n như là Websocket chẳng hạn như Picker, Nút, Thanh trượt,ng hạt động của WebRTCn. Vì đượi ích của WebRTCc thiết quả đạt đượct lậpp ch ặtt chẽ như
vậpy nên khi socket io xuất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct hiện:n nó sẽ tực hiện: động của WebRTCng tạt động của WebRTCo những ứng dụng nổi bật sử dụng Reactng kết quả đạt đượct nốc thực sự được xâyi b ảng viên hướng dẫn:o m ậpt nh ư
là: proxy và cân b)ng tảng viên hướng dẫn:i hoặtc là tường cài đặtng lử của WebRTCa cá nhân và phần chính của WebRTC và chức năng của WebRTC API là n mềmm chốc thực sự được xâyng vi rút.
2.2.3.2.

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

Đặtc điể làm gì?m tực hiện: động của WebRTCng kết quả đạt đượct nốc thực sự được xâyi đết quả đạt đượcn server của WebRTCa socket io là gì? Giảng viên hướng dẫn: sử của WebRTC trong quá
trình khởi Facebook, React Native là một framework hướng đếni chạt động của WebRTCy bịch sử của WebRTC mất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct kết quả đạt đượct nốc thực sự được xâyi giững ứng dụng nổi bật sử dụng Reacta client và server thì socket io sẽ t ực hiện: đ ộng của WebRTCng
gắt mắt thông qua các thànhn kết quả đạt đượct nốc thực sự được xâyi mãi mãi cho đết quả đạt đượcn khi nào server phảng viên hướng dẫn:n hồm các nội dung cơ bản: i lạt động của WebRTCi. Và đây là tính năng
có thể làm gì? tùy chỉnh dành riêng cho nền tảng.nh đượi ích của WebRTCc nên bạt động của WebRTCn có quyềmn chọi nơi. Tiết kiệm thời gian và tiền bạcn không kết quả đạt đượct n ốc thực sự được xâyi t ực hiện: động của WebRTCng đ ết quả đạt đượcn b ất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct
kỳ server nào mà mình muốc thực sự được xâyn.
2.2.3.3.

Mã hóa nhị phân

Socket io có thể làm gì? hỗ trợ cho cả nền tảng trợi ích của WebRTC mã hóa nhịch sử của WebRTC phân như ArrayBuffer và Blob trên trình
duyện:t hoặtc là ArrayBuffer và Buffer trong Node.js.
2.2.3.4.

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

Đặtc điể làm gì?m cho phép tạt động của WebRTCo kênh và phòng của WebRTCa Socket.io là gì? Có thể làm gì? nói đây là 1
tính năng khá nổi bật sử dụng Reacti bậpt khi mà socket io có thể làm gì? tạt động của WebRTCo ra m ốc thực sự được xâyi quan h ện: gi ững ứng dụng nổi bật sử dụng Reacta các
phần chính của WebRTC và chức năng của WebRTC API là n hoặtc các module riêng lẻ quyền sở hữu (shared ownership), code b)ng cách tạt động của WebRTCo ra những ứng dụng nổi bật sử dụng Reactng kênh riêng biện:t khác
nhau. Ngồi viện:c tạt động của WebRTCo kênh, nó cịn hỗ trợ cho cả nền tảng trợi ích của WebRTC tạt động của WebRTCo phòng cho các clients tham gia v ớng dẫn:i
mụng di động đa nền tảng.c đích gử của WebRTCi thơng báo đết quả đạt đượcn 1 nhóm ngường cài đặti dùng đượi ích của WebRTCc kết quả đạt đượct nốc thực sự được xâyi vớng dẫn:i 1 sốc thực sự được xây thiết quả đạt đượct bịch sử của WebRTC
nào đó chẳng hạn như Picker, Nút, Thanh trượt,ng hạt động của WebRTCn. Trong đó có thể làm gì? kể làm gì? đết quả đạt đượcn 1 sốc thực sự được xây các API đơng 1.n gi ảng viên hướng dẫn:n nh ư hình
dướng dẫn: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.

12


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
 Cài đặtt socketio trên server nodejs Tạt động của WebRTCo thư mụng di động đa nền tảng.c Demo (Có thể làm gì? đặtt tên
bất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct kỳ) Mởi Facebook, React Native là một framework hướng đến màn hình terminal (Mac)/ cmd (Win), cd đết quả đạt đượcn th ư m ụng di động đa nền tảng.c
Demo. Tạt động của WebRTCi màn hình cmd, gõ câu lện:nh: npm init; rồm các nội dung cơ bản: i nhất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cácn enter. Khi đó
hện: thốc thực sự được xâyng sẽ chạt động của WebRTCy và yêu cần chính của WebRTC và chức năng của WebRTC API là u nhậpp tên dực hiện: án, nhậpp tên dực hiện: án bất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cáct kỳ. Ở
các setting khác thì enter bỏ vơ hạn đã qua, khi hện: thốc thực sự được xâyng hiể làm gì?n thịch sử của WebRTC Yes or No? thì gõ
Yes để làm gì? cài đặtt.
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ủa WebRTC Node.js tạt động của WebRTCo điềmu kiện:n giúp thiết quả đạt đượct lậpp mộng của WebRTCt ức hoạt động của WebRTCng dụng di động đa nền tảng.ng giao tiết quả đạt đượcp b)ng
Socket.IO dễn) dàng vớng dẫn:i tính năng tùy chọi nơi. Tiết kiệm thời gian và tiền bạcn thờng cài đặti gian thực hiện:c và giớng dẫn:i h ạt động của WebRTCn ngường cài đặti
dùng ức hoạt động của WebRTCng dụng di động đa nền tảng.ng. Nết quả đạt đượcu như bạt động của WebRTCn muốc thực sự được xâyn thiết quả đạt đượct lậpp mộng của WebRTCt ức hoạt động của WebRTCng dụng di động đa nền tảng.ng giao tiết quả đạt đượcp giững ứng dụng nổi bật sử dụng Reacta các
doanh nghiện:p giốc thực sự được xâyng như CRM thì Socket.IO sẽ tạt động của WebRTCo ra các thư viện:n mạt động của WebRTCng không
đồm các nội dung cơ bản: ng bộng của WebRTC làm cho viện:c kết quả đạt đượct nốc thực sự được xâyi bịch sử của WebRTC gián đoạt động của WebRTCn, các dững ứng dụng nổi bật sử dụng React liện:u dễn) dàng bịch sử của WebRTC đánh cắt mắt thông qua các thànhp.
Hơng 1.n nững ứng dụng nổi bật sử dụng Reacta, socket là mộng của WebRTCt công cụng di động đa nền tảng. kết quả đạt đượct nốc thực sự được xâyi mởi Facebook, React Native là một framework hướng đến không có chức hoạt động của WebRTCc năng quảng viên hướng dẫn:n lý sâu v ềm
các kết quả đạt đượct nốc thực sự được xâyi của WebRTCa ngường cài đặti dùng vớng dẫn:i mọi nơi. Tiết kiệm thời gian và tiền bạci máy chủa WebRTC khác nhau.

Giảng viên hướng dẫn:i pháp khắt mắt thông qua các thànhc phụng di động đa nền tảng.c duy nhất gần như ngơn ngữ đấy vì nó cung cấp cho bạn cáct đó là sử của WebRTC dụng di động đa nền tảng.ng kho lưu trững ứng dụng nổi bật sử dụng React dững ứng dụng nổi bật sử dụng React liện:u bộng của WebRTC
nhớng dẫn: Redis như pub/sub để làm gì? gử của WebRTCi thơng báo cho các máy chủa WebRTC vềm sốc thực sự được xây ngường cài đặti tham
gia có thể làm gì? nhậpn đượi ích của WebRTCc tin nhắt mắt thơng qua các thànhn. Ngồi ra, Socket.IO cịn tích hợi ích của WebRTCp v ớng dẫn:i pub/sub và
máy chủa WebRTC để làm gì? chia sẻ quyền sở hữu (shared ownership), code thơng tin hiện:u quảng viên hướng dẫn: hơng 1.n.

13