Tìm hiểu react native và xây dựng ứng dụng minh họa

Tuy nhiên,ực hiện: ững ứng dụng nổi bật sử dụng React ộng của WebRTC ư b n sẽ có đạt động của WebRTC ượi ích của WebRTCc hi u su t g n nh ngôn ng đ y vì nó cung c p cho b n cácện: ất gầ

Đ 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Ố HỒ CHÍ MINH ỐC GIA THÀNH PHỐ HỒ CHÍ MINH Ồ CHÍ MINH TR ƯỜNG NG

Đ I H C CÔNG NGH THÔNG TIN ẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH Ệ THÔNG TIN

Đ ÁN 2 Ồ CHÍ MINH TÌM HI U REACT NATIVE ỂU REACT NATIVE

VÀ XÂY D NG NG D NG MINH H A ỰNG ỨNG DỤNG MINH HỌA ỨNG DỤNG MINH HỌA ỤNG MINH HỌA ỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

Gi ng viên hảng viên hướng dẫn: ướng dẫn:ng d n:ẫn: TH.S NGUY N CÔNG HOAN ỄN CÔNG HOAN

Sinh viên th c hi n:ực hiện: ện: ĐOÀN NG C LÃM – MSV: 19521737 ỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

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 hoà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ânthành để có thể làm được một đồ án hoà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 quytrì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 quá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ómchú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 TOÁN CẦN GIẢI QUYẾT, MÔ TẢ QUY TRÌNH ỆU BÀI TOÁ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Ả QUY TRÌNH ẢI QUYẾT, MÔ TẢ QUY TRÌNH

TH C HI N CÁC CÔNG VI C CHÍNHỰC HIỆN CÁC CÔNG VIỆC CHÍNH ỆU BÀI TOÁN CẦN GIẢI QUYẾT, MÔ TẢ QUY TRÌNH ỆU BÀI TOÁN CẦN GIẢI QUYẾT, MÔ TẢ QUY TRÌNH .2

1.1 Bài toán cần giải quyết 2

Chương 1.ng 2 CÔNG NGHỆU BÀI TOÁN CẦN GIẢI QUYẾT, MÔ TẢ QUY TRÌNH 3

2.1 React Native 3

2.1.1 Khái niệm 3

2.1.2 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ịch sử của WebRTC ử của WebRTC ủa WebRTC 14

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

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

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

2.3.6 Cách th c ho t đ ng c a WebRTCức hoạt động của WebRTC ạt động của WebRTC ộng của WebRTC ủ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à ần chính của WebRTC và chức năng của WebRTC API là ủa WebRTC ức hoạt động của WebRTC ủa WebRTC gì?

21 Chương 1.ng 3 XÁC ĐINH MÔ HÌNH HÓA YÊU C UẦN GIẢI QUYẾT, MÔ TẢ QUY TRÌNH .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 K H TH NGẾT, MÔ TẢ QUY TRÌNH ẾT, MÔ TẢ QUY TRÌNH ỆU BÀI TOÁN CẦN GIẢI QUYẾT, MÔ TẢ QUY TRÌNH ỐNG 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ậ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 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 đ tặt 30

6.2 Ki m th ph n m mể làm gì? ử của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ềm 30

6.3 Hướng dẫn:ng d n cài đ tẫn: ặt 30

Chương 1.ng 7 K T LU NẾT, MÔ TẢ QUY TRÌNH ẬN 31

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

MỤC LỤC ẢNH

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

Hình 2.1-2: Phát tri n đa ng d ng ển ứng dụng nhanh ứng dụng nhanh ụng nhanh 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 m i ến trúc cũ ới 10

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

Hình 2.3-2: WebRTC đ ược ứng dụng trong nhiều lĩnh vực ứng dụng nhanh c ng d ng trong nhi u lĩnh v c ụng nhanh ều lĩnh vực ự án mã nguồn mở của Google 15

Hình 2.3-3: WebRTC mang đ n nhi u l i ích cho c ng ến trúc cũ ều lĩnh vực ợc ứng dụng trong nhiều lĩnh vực ả người dùng và lập trình ườ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ợ đa nền tảng, đa trình duyệt trên các thiết bị ợc ứng dụng trong nhiều lĩnh vực ều lĩnh vực ả người dùng và lập trình ệt trên các thiết bị ến trúc cũ ị 18

Hình 2.3-5: WebRTC ch a h tr toàn di n t t c trình duy t ư ỗ trợ đa nền tảng, đa trình duyệt trên các thiết bị ợc ứng dụng trong nhiều lĩnh vực ệt trên các thiết bị ất cả trình duyệt ả người dùng và lập trình ệt trên các thiết bị 19

Hình 2.3-6: M ng l ưới i ho t đ ng gi a các đ i t ộ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ượng theo hình thức peer – to – ược ứng dụng trong nhiều lĩnh vực ng theo hình th c peer – to – ứng dụng nhanh peer 20

Hình 2.3-7: Cung c p tính năng truy n d li u th i gian th c ất cả trình duyệt ều lĩnh vực ữa các đối tượng theo hình thức peer – to – ệt trên các thiết bị ời dùng và lập trình ự án mã nguồn mở của Google 21

Hình 3.2-1: S đ l p m c phân tích ơ đồ lớp mức phân tích ồn mở của Google ới ứng dụng nhanh 24

Hình 3.3-1: S đ usecase ơ đồ lớp mức phân tích ồn mở của Google 24

Hình 5.2-1: Màn hình Đăng nh p ập trình .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 ả người dùng và lập trình -1: Bi u m u 1 ển ứng dụng nhanh ẫu 1 23

B ng 3.1 ả người dùng và lập trình -2: Bi u m u 2 ển ứng dụng nhanh ẫu 1 23

B ng 3.1 ả người dùng và lập trình -3: Bi u m u 3 ển ứng dụng nhanh ẫu 1 23

B ng 5.1 ả người dùng và lập trình -1: Danh sách các màn hình 25

B ng 5.2 ả người dùng và lập trình -1: Mô t chi ti t màn hình Đăng nh p ả người dùng và lập trình ến trúc cũ ập trình .26

B ng 5.2 ả người dùng và lập trình -2: Mô t chi ti t màn hình Home ả người dùng và lập trình ến trúc cũ 27

B ng 5.2 ả người dùng và lập trình -3: Mô t chi ti t màn hình VideoCall ả người dùng và lập trình ến trúc cũ 28

B ng 5.2 ả người dùng và lập trình -4: Mô t chi ti t màn hình Chatting ả người dùng và lập trình ến trúc cũ 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ínhnăng ít thay đổi, trong quá trình phát triển đề tài đã sử dụng mô hình V-model cho việcxâ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 đượcphá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 codegithub 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 đã đượctriể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ếtluậ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ôngviệc chính

Trình bày sơ bộ về bài toá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 quátrình phát triển đồ án và nêu ra hướng phát triển trong tương lai

Chương 1. 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

 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à thamgia cuộc gọi video nhóm cũng như nhắn tin trao đổi trong thời gian thực hiệncuộ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 thamgia 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áccùng nhau thông qua ứng dụng

 Hình thức phát triển: App mobile

App đượi ích của WebRTCc xây d ng bao g m các n i dung c b n: ực hiện: ồm các nội dung cơ bản: ộng của WebRTC ơng 1 ảng viên hướng dẫ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 ng App mobile: ực hiện:

 Xác định yêu cầu, mô hình hoá

Instagram, Facebook, Skype… là nh ng ng d ng n i b t s d ng Reactững ứng dụng nổi bật sử dụng React ức hoạt động của WebRTC ụng di động đa nền tảng ổi bật sử dụng React ập ử của WebRTC ụng di động đa nền tảng.Native.

2.1.2 Tại sao lại chọn React Native

React native có th không nhanh nh các ng d ng g c th c s để làm gì? ư ức hoạt động của WebRTC ụng di động đa nền tảng ốc thực sự được xây ực hiện: ực hiện: ượi ích của WebRTCc xây

d ng b ng các ngôn ng quen thu c nh Java, Objective-C và C # Tuy nhiên,ực hiện: ) ững ứng dụng nổi bật sử dụng React ộng của WebRTC ư

b n sẽ có đạt động của WebRTC ượi ích của WebRTCc hi u su t g n nh ngôn ng đ y vì nó cung c p cho b n cácện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ần chính của WebRTC và chức năng của WebRTC API là ư ữ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ác ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ạt động của WebRTCthành ph n g c, Ch đ xem và Văn b n.ần chính của WebRTC và chức năng của WebRTC API là ốc thực sự được xây ết quả đạt được ộng của WebRTC ảng viên hướng dẫn:

ng d ng dành cho thi t b di đ ng d a trên React Native không ph i là ng+ ụng di động đa nền tảng ết quả đạt được ịch sử của WebRTC ộng của WebRTC ực hiện: ảng viên hướng dẫn: ức hoạt động của WebRTC

d ng web HTML5, hybrid ho c di đ ng Thay vào đó, nó là m t ng d ng diụng di động đa nền tảng ặt ộng của WebRTC ộng của WebRTC ức hoạt động của WebRTC ụng di động đa nền tảng

đ ng th c s ộng của WebRTC ực hiện: ực hiện:

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ạt động của WebRTC ể làm gì? ện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ức hoạt động của WebRTC ụng di động đa nền tảng ủa WebRTC ộng của WebRTC ần chính của WebRTC và chức năng của WebRTC API là

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ớng dẫn: ) ốc thực sự được xây ư ức hoạt động của WebRTC ụng di động đa nền tảng ủa WebRTC ạt động của WebRTC ) ốc thực sự được xâycũ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ạt động của WebRTC ử của WebRTC ụng di động đa nền tảng ốc thực sự được xây ể làm gì? ện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ốc thực sự được xây ạt động của WebRTC ể làm gì?

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ực hiện: ộng của WebRTC ốc thực sự được xây ức hoạt động của WebRTC ụng di động đa nền tảng ủa WebRTC ) ốc thực sự được xây ộng của WebRTC ốc thực sự được xâynăng v i React Native.ớng dẫn:

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ạt động của WebRTC ạt động của WebRTC ộng của WebRTC ắt mắt thông qua các thành ắt mắt thông qua các thành

ph n khai báo đần chính của WebRTC và chức năng của WebRTC API là ượi ích của WebRTCc xây d ng s n, ch ng h n nh Picker, Nút, Thanh trực hiện: ẵn, chẳng hạn như Picker, Nút, Thanh trượt, ẳng hạn như Picker, Nút, Thanh trượt, ạt động của WebRTC ư ượi ích của WebRTCt,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ể làm gì? ổi bật sử dụng React ạt động của WebRTC ể làm gì? ạt động của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ủa WebRTC ạt động của WebRTC ớng dẫn:TouchableNativeFeedback và TouchableOpacity Có nhi u thành ph n dànhềm ần chính của WebRTC và chức năng của WebRTC API là riêng cho iOS và Android có s n đ giúp thi t b ho t đ ng hi u qu trên đi nẵn, chẳng hạn như Picker, Nút, Thanh trượt, ể làm gì? ết quả đạt được ịch sử của WebRTC ạt động của WebRTC ộng của WebRTC ện: ảng viên hướng dẫn: ện:tho i di đ ng Android và iOS.ạt động của WebRTC ộng của WebRTC

Ph n ng th vi n b n đ a nh Redux (đ x lý tr ng thái ng d ng c a b n)ảng viên hướng dẫn: ức hoạt động của WebRTC ư ện: ảng viên hướng dẫn: ịch sử của WebRTC ư ể làm gì? ử của WebRTC ạt động của WebRTC ức hoạt động của WebRTC ụng di động đa nền tảng ủa WebRTC ạt động của WebRTC

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)ảng viên hướng dẫn: ức hoạt động của WebRTC ện: ờng cài đặt ảng viên hướng dẫn: ịch sử của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ảng viên hướng dẫn: ễn)cũng sẽ giúp b n hoàn thành công vi c phát tri n ng d ng di đ ng c a mìnhạt động của WebRTC ện: ể làm gì? ức hoạt động của WebRTC ụng di động đa nền tảng ộng của WebRTC ủa WebRTCnhanh h n.ơng 1

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ụng di động đa nền tảng ể làm gì? ư ạt động của WebRTC ể làm gì? ết quả đạt được ể làm gì? ực hiện: ốc thực sự được xây

đ theo dõi l i và s c , và Công c phát tri n React đ g l i làm cho quáể làm gì? ỗ trợ cho cả nền tảng ực hiện: ốc thực sự được xây ụng di động đa nền tảng ể làm gì? ể làm gì? ỡ lỗi làm cho quá ỗ trợ cho cả nền tảngtrình phát tri n React Native d dàng h n và nhanh h n r t nhi u Các côngể làm gì? ễn) ơng 1 ơng 1 ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ềm

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àụng di động đa nền tảng ện: ờng cài đặt ồm các nội dung cơ bản: ốc thực sự được xây ộng của WebRTC ợi ích của WebRTC ể làm gì?Bugsnag

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

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ộng của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ử của WebRTC ụng di động đa nền tảng ởi Facebook, React Native là một framework hướng đến ắt mắt thông qua các thành ọi nơi Tiết kiệm thời gian và tiền bạc ơng 1 ết quả đạt được ện: ờng cài đặt ềm ạt động của WebRTC

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 hiện: ức hoạt động của WebRTC ụng di động đa nền tảng ềm ảng viên hướng dẫn: ư ớng dẫn: ) ạt động của WebRTC ẫn:

c n th c hi n m t s đi u ch nh dành riêng cho n n t ng.ần chính của WebRTC và chức năng của WebRTC API là ực hiện: ện: ộng của WebRTC ốc thực sự được xây ềm ỉnh dành riêng cho nền tảng ềm ảng viên hướng dẫn:

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

H n 2.000 ngơng 1 ường cài đặti đóng góp v i h n 85.000 ngôi sao trên GitHub.ớng dẫn: ơng 1

Các công ty nh Callstack, Bi t th ph n m m, Microsoft, và Màu đ vô h n đãư ện: ực hiện: ần chính của WebRTC và chức năng của WebRTC API là ềm ỏ vô hạn đã ạt động của WebRTCđóng góp cho khuôn kh này B n sẽ tìm th y r t nhi u thành ph n và thổi bật sử dụng React ạt động của WebRTC ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ềm ần chính của WebRTC và chức năng của WebRTC API là ư

vi n React Native đện: ượi ích của WebRTC ạt động của WebRTCc t o b i c ng đ ng các nhà phát tri n trên các trangởi Facebook, React Native là một framework hướng đến ộng của WebRTC ồm các nội dung cơ bản: ể làm gì?web nh Mã thông báo và Th m c g c.ư ư ụng di động đa nền tảng ốc thực sự được xây

Nh n tr giúp v StackOverflow, Reddit ho c là B gi i mã B n luôn luôn tìmập ợi ích của WebRTC ềm ặt ộng của WebRTC ảng viên hướng dẫn: ạt động của WebRTC

ngường cài đặti giúp b n B n cũng có th nh n đạt động của WebRTC ạt động của WebRTC ể làm gì? ập ượi ích của WebRTC ực hiện:c s giúp đ t C ng đ ng b t hòaỡ lỗi làm cho quá ừ Cộng đồng bất hòa ộng của WebRTC ồm các nội dung cơ bản: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn cácReactiflux, các Ph n ng nhóm Facebook g c, và Ph n ng c ng đ ngảng viên hướng dẫn: ức hoạt động của WebRTC ốc thực sự được xây ảng viên hướng dẫn: ức hoạt động của WebRTC ộng của WebRTC ồm các nội dung cơ bản: Spectrum b n đ a.ảng viên hướng dẫn: ịch sử của WebRTC

Các tài li u chính th c thân thi n v i ngện: ức hoạt động của WebRTC ện: ớng dẫn: ường cài đặti m i b t đ u và có source code víớng dẫn: ắt mắt thông qua các thành ần chính của WebRTC và chức năng của WebRTC API là

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 đụng di động đa nền tảng ạt động của WebRTC ện: ức hoạt động của WebRTC ạt động của WebRTC ể làm gì? ử của WebRTC ể làm gì?

th c hành.ực hiện:

2.1.3 Kiến trúc React Native

Th c ch t, React Native là m t gi i pháp platform-agnostic (không ph thu cực hiện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ộng của WebRTC ảng viên hướng dẫn: ụng di động đa nền tảng ộng của WebRTC

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ềm ảng viên hướng dẫn: ạt động của WebRTC ụng di động đa nền tảng ủa WebRTCdeveloper vi t code b ng Javascript v i ReactJS trong khi bên dết quả đạt được ) ớng dẫn: ởi Facebook, React Native là một framework hướng đến ướng dẫn:i ReactNative s d ng các c ch riêng c a nó đ biên d ch các React Element đ phíaử của WebRTC ụng di động đa nền tảng ơng 1 ết quả đạt được ủa WebRTC ể làm gì? ịch sử của WebRTC ể làm gì?

h đi u hành có th hi u đện: ềm ể làm gì? ể làm gì? ượi ích của WebRTCc Đi u này có nghĩa là:ềm

 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, đ i v i h đi u hành Android/iOS, c ch ho t đ ng sẽ nhốc thực sự được xây ớng dẫn: ện: ềm ơng 1 ết quả đạt được ạt động của WebRTC ộng của WebRTC ưsau:

Hình 2.1-3: Ki n trúc cũ ế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:ồm các nội dung cơ bản: ạt động của WebRTC ện: ỗ trợ cho cả nền tảng ức hoạt động của WebRTC ụng di động đa nền tảng.

● JS thread: là n i t t c code Javascript đơng 1 ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ảng viên hướng dẫn: ượi ích của WebRTCc đ c và biên d ch, n i x ọi nơi Tiết kiệm thời gian và tiền bạc ịch sử của WebRTC ơng 1 ử của WebRTC lý

h u h t các logic nghi p v c a ng d ng Metro sẽ đóng gói t t cần chính của WebRTC và chức năng của WebRTC API là ết quả đạt được ện: ụng di động đa nền tảng ủa WebRTC ức hoạt động của WebRTC ụng di động đa nền tảng ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ảng viên hướng dẫn:code Javascript thành m t file duy nh t Ph n code này sẽ động của WebRTC ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ần chính của WebRTC và chức năng của WebRTC API là ượi ích của WebRTCc chuy nể làm gì?

t i công c JavascriptCore (JSC) đ có th ch y đớng dẫn: ụng di động đa nền tảng ể làm gì? ể làm gì? ạt động của WebRTC ượi ích của WebRTCc

● Native thread: là n i x lý code native Nó giao ti p v i JS Thread b t cơng 1 ử của WebRTC ết quả đạt được ớng dẫn: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ức hoạt động của WebRTCkhi nào có nhu c u c n thay đ i UI ho c truy c p các hàm native Chúngần chính của WebRTC và chức năng của WebRTC API là ần chính của WebRTC và chức năng của WebRTC API là ổi bật sử dụng React ặt ập

ta có th chia Native Thread thành Native UI và Native Modules T t cể làm gì? ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ảng viên hướng dẫn:các Native Modules đ u đềm ượi ích của WebRTCc kh i đ ng khi chúng ta s d ng ngởi Facebook, React Native là một framework hướng đến ộng của WebRTC ử của WebRTC ụng di động đa nền tảng ức hoạt động của WebRTC

d ng Đi u đó có nghĩa là module Bluetooth sẽ luôn luôn tr ng tháiụng di động đa nền tảng ềm ởi Facebook, React Native là một framework hướng đến ạt động của WebRTCkích ho t b i React Native k c khi không có nhu c u s d ng.ạt động của WebRTC ởi Facebook, React Native là một framework hướng đến ể làm gì? ảng viên hướng dẫn: ần chính của WebRTC và chức năng của WebRTC API là ử của WebRTC ụng di động đa nền tảng

● Shadow Thread: là n i các layout sẽ đơng 1 ượi ích của WebRTCc tính toán Nó s d ng Layoutử của WebRTC ụng di động đa nền tảng.Engine riêng c a Facebook đủa WebRTC ượi ích của WebRTCc g i là Yoga nh m tính toán flexboxọi nơi Tiết kiệm thời gian và tiền bạc )layout, sau đó g i k t qu v phía Native UI.ử của WebRTC ết quả đạt được ảng viên hướng dẫn: ềm

Đ giao ti p gi a JS thread và Native thread chúng ta sẽ s d ng m t Bridge.ể làm gì? ết quả đạt được ững ứng dụng nổi bật sử dụng React ử của WebRTC ụng di động đa nền tảng ộng của WebRTCPhía bên dướng dẫn:i, Module C++ này h u h t đần chính của WebRTC và chức năng của WebRTC API là ết quả đạt được ượi ích của WebRTCc xây d ng xung quanh b ng m tực hiện: ) ộng của WebRTChàng đ i b t đ ng b (asynchronous queue) B t c khi nào nó nh n đợi ích của WebRTC ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ồm các nội dung cơ bản: ộng của WebRTC ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ức hoạt động của WebRTC ập ượi ích của WebRTCc dững ứng dụng nổi bật sử dụng React

li u t m t trong hai phía (JS thread ho c Native thread), nó sẽ tu n t hóa dện: ừ Cộng đồng bất hòa ộng của WebRTC ặt ần chính của WebRTC và chức năng của WebRTC API là ực hiện: ững ứng dụng nổi bật sử dụng React

li u dện: ướng dẫn: ạt động của WebRTCi d ng JSON và chuy n nó qua hàng đ i, cu i cùng để làm gì? ợi ích của WebRTC ốc thực sự được xây ượi ích của WebRTCc gi i mã khiảng viên hướng dẫn:

nó t i n i.ớng dẫn: ơng 1

Đ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 đềm ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ảng viên hướng dẫn: ềm ực hiện: ỗ trợ cho cả nền tảng ện: ượi ích của WebRTCctruy n b t đ ng b qua Bridge, và chúng sẽ đềm ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ồm các nội dung cơ bản: ộng của WebRTC ượi ích của WebRTCc g i t i m t trong hai phíaử của WebRTC ớng dẫn: ộng của WebRTC

v i mong mu n (nh ng không ch c là đ m b o) sẽ nh n đớng dẫn: ốc thực sự được xây ư ắt mắt thông qua các thành ảng viên hướng dẫn: ảng viên hướng dẫn: ập ượi ích của WebRTCc ph n h i trongảng viên hướng dẫn: ồm các nội dung cơ bản:

tương 1.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ạt động của WebRTC ể làm gì? ặt ảng viên hướng dẫn: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ềm ắt mắt thông qua các thành

nh n đập ượi ích của WebRTCc ph n h i.ảng viên hướng dẫn: ồm các nội dung cơ bản:

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ộng của WebRTC ụng di động đa nền tảng ổi bật sử dụng React ết quả đạt được ết quả đạt được ạt động của WebRTC ềm ạt động của WebRTC ạt động của WebRTC ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ềm ềm

hi u su t khi đện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ượi ích của WebRTCc nhìn th y khi cu n m t danh sách d li u l n: B t c khiất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ộng của WebRTC ộng của WebRTC ững ứng dụng nổi bật sử dụng React ện: ớng dẫn: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ức hoạt động của WebRTCnào s ki n onScroll x y ra trên Native thread, thông tin sẽ đực hiện: ện: ảng viên hướng dẫn: ượi ích của WebRTCc g i khôngử của WebRTC

đ ng b đ n JS thread, nh ng Native thread không ch JS thread th c hi nồm các nội dung cơ bản: ộng của WebRTC ết quả đạt được ư ờng cài đặt ực hiện: ệ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óạt động của WebRTC ử của WebRTC ởi Facebook, React Native là một framework hướng đến ạt động của WebRTC ềm ạt động của WebRTC ộng của WebRTC ực hiện:

m t kho ng tr ng trộng của WebRTC ảng viên hướng dẫn: ốc thực sự được xây ướng dẫn:c khi thông tin xu t hi n trên màn hình.ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ện:

Tương 1.ng t nh v y, vi c tính toán hi n th layout c n ph i tr i qua nhi u vòngực hiện: ư ập ện: ể làm gì? ịch sử của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ảng viên hướng dẫn: ảng viên hướng dẫn: ềm

trướng dẫn:c khi nó có th để làm gì? ượi ích của WebRTCc hi n th trên màn hình, vì nó c n ph i đi qua Yogaể làm gì? ịch sử của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ảng viên hướng dẫn:engine trướng dẫn:c khi có th để làm gì? ượi ích của WebRTCc tính b i Native thread và t t nhiên chúng cũng sẽởi Facebook, React Native là một framework hướng đến ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các

ph i đi qua Bridge đ t i JS Thread.ảng viên hướng dẫn: ể làm gì? ớng dẫn:

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ể làm gì? ập ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ử của WebRTC ững ứng dụng nổi bật sử dụng React ện: ộng của WebRTC ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ồm các nội dung cơ bản: ộng của WebRTC ạt động của WebRTC

ra v n đ v hi u su t Nh ng còn cách nào khác đ Javascript c a chúng taất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ềm ềm ện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ư ể làm gì? ủa WebRTCgiao ti p v i Native code? Đây là n i JSI phát huy tác d ng.ết quả đạt được ớng dẫn: ơng 1 ụng di động đa nền tảng

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ện: ết quả đạt được ủa WebRTC ần chính của WebRTC và chức năng của WebRTC API là ạt động của WebRTC ỏ vô hạn đã ết quả đạt được )

m t thành ph n m i có tên là Javascript Interface (JSI).ộng của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ớng dẫn:

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ộng của WebRTC ảng viên hướng dẫn: ết quả đạt được ớng dẫn: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ịch sử của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ụng di động đa nền tảng.thu c vào JS core n a Nói cách khác, JSC engine gi đây có th d dàng hoánộng của WebRTC ững ứng dụng nổi bật sử dụng React ờng cài đặt ể làm gì? ễn)

đ i v i các JavaScript engine khác - có kh năng ho t đ ng t t h n - nhổi bật sử dụng React ớng dẫn: ảng viên hướng dẫn: ạt động của WebRTC ộng của WebRTC ốc thực sự được xây ơng 1 ưChrome Engine V8 ch ng h n.ẳng hạn như Picker, Nút, Thanh trượt, ạt động của WebRTC

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óảng viên hướng dẫn: ết quả đạt được ức hoạt động của WebRTC ủa WebRTC ết quả đạt được ớng dẫn: ) ử của WebRTC ụng di động đa nền tảng

th gi tham chi u đ n C++ Host Object và truy c p phể làm gì? ững ứng dụng nổi bật sử dụng React ết quả đạt được ết quả đạt được ập ương 1.ng th c trên chúng.ức hoạt động của WebRTC

T đó JavaScript và các thành ph n Native sẽ nh n th c và giao ti p đừ Cộng đồng bất hòa ần chính của WebRTC và chức năng của WebRTC API là ập ức hoạt động của WebRTC ết quả đạt được ượi ích của WebRTC ẫn:c l nnhau

Nói cách khác, JSI sẽ cho phép kh năng tảng viên hướng dẫn: ương 1.ng tác hoàn toàn gi a t t c cácữ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ác ảng viên hướng dẫn:thread V i khái ni m chia s quy n s h u (shared ownership), codeớng dẫn: ện: ẻ quyền sở hữu (shared ownership), code ềm ởi Facebook, React Native là một framework hướng đến ững ứng dụng nổi bật sử dụng ReactJavaScript có th giao ti p v i các thành ph n Native tr c ti p t JS thread vàể làm gì? ết quả đạt được ớng dẫn: ần chính của WebRTC và chức năng của WebRTC API là ực hiện: ết quả đạt được ừ Cộng đồng bất hòa

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ỏ vô hạn đã ện: ần chính của WebRTC và chức năng của WebRTC API là ực hiện: ện: ạt động của WebRTC ững ứng dụng nổi bật sử dụng React ần chính của WebRTC và chức năng của WebRTC API là ạt động của WebRTC ỏ vô hạn đã

t t c các v n đ t c nghẽn và b t đ ng b trên Bridge.ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ảng viên hướng dẫn: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ềm ắt mắt thông qua các thành ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ồm các nội dung cơ bản: ộng của WebRTC

s c i thi n hi u su t h t s c rõ r t.ực hiện: ảng viên hướng dẫn: ện: ện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ết quả đạt được ức hoạt động của WebRTC ện:

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 1 ết quả đạt được ớng dẫn: ảng viên hướng dẫn: ạt động của WebRTC ể làm gì? ợi ích của WebRTC ềm ường cài đặtng

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++ợi ích của WebRTC ử của WebRTC ụng di động đa nền tảng ẳng hạn như Picker, Nút, Thanh trượt, ạt động của WebRTC ư ờng cài đặt ức hoạt động của WebRTC ạt động của WebRTC ủa WebRTCtrong tay, th t d dàng đ th y React Native có th đập ễn) ể làm gì? ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ể làm gì? ượi ích của WebRTC ử của WebRTC ụng di động đa nền tảng.c s d ng trong m tộng của WebRTC

h th ng r t l n.ện: ốc thực sự được xây ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ớng dẫn:

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ập ặt ức hoạt động của WebRTC ụng di động đa nền tảng ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ện: ết quả đạt được ững ứng dụng nổi bật sử dụng React

ch (Server) và máy khách (Client) là vi c r t quan tr ng Đ máy ch và máyủa WebRTC ện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ọi nơi Tiết kiệm thời gian và tiền bạc ể làm gì? ủa WebRTCkhách có th nh n bi t để làm gì? ập ết quả đạt được ượi ích của WebRTCc s thay đ i c a đ i phực hiện: ổi bật sử dụng React ủa WebRTC ốc thực sự được xây ương 1.ng thì c n s d ngần chính của WebRTC và chức năng của WebRTC API là ử của WebRTC ụng di động đa nền tảng

nh ng cách th c nh AJAX, long-polling, short-polling, & HTML5 server-sentững ứng dụng nổi bật sử dụng React ức hoạt động của WebRTC ư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ện: ử của WebRTC ụng di động đa nền tảng ết quả đạt được ) ững ứng dụng nổi bật sử dụng React ụng di động đa nền tảng ể làm gì? ồm các nội dung cơ bản: ạt động của WebRTC ềm

nhượi ích của WebRTCc đi m trong đó có th k đ n là k t qu tr v ch m và t n r t nhi uể làm gì? ể làm gì? ể làm gì? ết quả đạt được ết quả đạt được ảng viên hướng dẫn: ảng viên hướng dẫn: ềm ập ốc thực sự được xây ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ềmtài nguyên

Đ kh c ph c nh ng nhể làm gì? ắt mắt thông qua các thành ụng di động đa nền tảng ững ứng dụng nổi bật sử dụng React ượi ích của WebRTCc đi m này, công c socket.io ra đ i đ giúp choể làm gì? ụng di động đa nền tảng ờng cài đặt ể làm gì?

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ện: ết quả đạt được ững ứng dụng nổi bật sử dụng React ễn) ức hoạt động của WebRTC ắt mắt thông qua các thành ết quả đạt được

nh t.ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các

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 o ra vàết quả đạt được ạt động của WebRTCphát tri n t năm 2010 M c đích l n nh t c a Socket io là đ t o môi trể làm gì? ừ Cộng đồng bất hòa ụng di động đa nền tảng ớng dẫn: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ủa WebRTC ể làm gì? ạt động của WebRTC ường cài đặtnggiao 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ết quả đạt được ập ợi ích của WebRTC ảng viên hướng dẫn: ềm ịch sử của WebRTC ực hiện: ạt động của WebRTC ờng cài đặt ể làm gì?giao ti p gi a các bên v i nhau (thết quả đạt được ững ứng dụng nổi bật sử dụng React ớng dẫn: ường cài đặtng là gi a server và client).ững ứng dụng nổi bật sử dụng React

Vi c giao ti p 2 chi u gi a máy khách và máy ch đện: ết quả đạt được ềm ững ứng dụng nổi bật sử dụng React ủa WebRTC ượi ích của WebRTCc th c hi n b i socketực hiện: ện: ởi Facebook, React Native là một framework hướng đến

io khi và ch khi máy khách có module này trong trình duy t và máy ch cũngỉnh dành riêng cho nền tảng ện: ủa WebRTC

đã tích h p s n gói socket io Các ng d ng s d ng socket io thợi ích của WebRTC ẵn, chẳng hạn như Picker, Nút, Thanh trượt, ức hoạt động của WebRTC ụng di động đa nền tảng ử của WebRTC ụng di động đa nền tảng ường cài đặtng đòi h iỏ vô hạn đã

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ốc thực sự được xây ộng của WebRTC ảng viên hướng dẫn: ồm các nội dung cơ bản: ập ức hoạt động của WebRTC ộng của WebRTC ốc thực sự được xây ụng di động đa nền tảng ể làm gì? ư ổi bật sử dụng React ốc thực sự được xây ực hiện: ết quả đạt đượcbó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ần chính của WebRTC và chức năng của WebRTC API là ảng viên hướng dẫn: ) ảng viên hướng dẫn: ững ứng dụng nổi bật sử dụng React ập ảng viên hướng dẫn:

đượi ích của WebRTCc s d ng k t h p v i nh ng ngôn ng khác nh php,ử của WebRTC ụng di động đa nền tảng ết quả đạt được ợi ích của WebRTC ớng dẫn: ững ứng dụng nổi bật sử dụng React ững ứng dụng nổi bật sử dụng React ư 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ết quả đạt được ết quả đạt được ạt động của WebRTC ắt mắt thông qua các thành ắt mắt thông qua các thành ể làm gì? ết quả đạt được ềm ặt

đi m c a nó ph n ti p theo.ể làm gì? ủa WebRTC ởi Facebook, React Native là một framework hướng đến ần chính của WebRTC và chức năng của WebRTC API là ết quả đạt được

2.2.3 Ưu điểm

2.2.3.1 Bảo mật cao

Socket io đượi ích của WebRTCc xây d ng d a trên Engine.IO Nó sẽ kh i ch y phực hiện: ực hiện: ởi Facebook, React Native là một framework hướng đến ạt động của WebRTC ương 1.ng th cức hoạt động của WebRTClong-polling trướng dẫn:c nh t đ k t n i Sau đó nó m i s d ng các phất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ể làm gì? ết quả đạt được ốc thực sự được xây ớng dẫn: ử của WebRTC ụng di động đa nền tảng ương 1.ng th cức hoạt động của WebRTCgiao ti p t t h n nh là Websocket ch ng h n Vì đết quả đạt được ốc thực sự được xây ơng 1 ư ẳng hạn như Picker, Nút, Thanh trượt, ạt động của WebRTC ượi ích của WebRTCc thi t l p ch t chẽ nhết quả đạt được ập ặt ư

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ập ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ện: ực hiện: ộng của WebRTC ạt động của WebRTC ững ứng dụng nổi bật sử dụng React ết quả đạt được ốc thực sự được xây ảng viên hướng dẫn: ập ưlà: proxy và cân b ng t i ho c là t) ảng viên hướng dẫn: ặt ường cài đặtng l a cá nhân và ph n m m ch ng vi rút.ử của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ềm ốc thực sự được xây

Đ c đi m t đ ng k t n i đ n server c a socket io là gì? Gi s trong quáặt ể làm gì? ực hiện: ộng của WebRTC ết quả đạt được ốc thực sự được xây ết quả đạt được ủa WebRTC ảng viên hướng dẫn: ử của WebRTCtrình kh i ch y b m t k t n i gi a client và server thì socket io sẽ t đ ngởi Facebook, React Native là một framework hướng đến ạt động của WebRTC ịch sử của WebRTC ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ết quả đạt được ốc thực sự được xây ững ứng dụng nổi bật sử dụng React ực hiện: ộng của WebRTC

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ắt mắt thông qua các thành ết quả đạt được ốc thực sự được xây ết quả đạt được ảng viên hướng dẫn: ồm các nội dung cơ bản: ạt động của WebRTC

có th tùy ch nh để làm gì? ỉnh dành riêng cho nền tảng ượi ích của WebRTCc nên b n có quy n ch n không k t n i t đ ng đ n b tạt động của WebRTC ềm ọi nơi Tiết kiệm thời gian và tiền bạc ết quả đạt được ốc thực sự được xây ực hiện: ộng của WebRTC ết quả đạt được ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các

kỳ server nào mà mình mu n.ốc thực sự được xây

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

Đ c đi m cho phép t o kênh và phòng c a Socket.ioặt ể làm gì? ạt động của WebRTC ủa WebRTC là gì? Có th nói đây là 1ể làm gì?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ổi bật sử dụng React ập ể làm gì? ạt động của WebRTC ốc thực sự được xây ện: ững ứng dụng nổi bật sử dụng React

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ần chính của WebRTC và chức năng của WebRTC API là ặt ẻ quyền sở hữu (shared ownership), code ) ạt động của WebRTC ững ứng dụng nổi bật sử dụng React ện:nhau Ngoài vi c t o kênh, nó còn h tr t o phòng cho các clients tham gia v iện: ạt động của WebRTC ỗ trợ cho cả nền tảng ợi ích của WebRTC ạt động của WebRTC ớng dẫn:

m c đích g i thông báo đ n 1 nhóm ngụng di động đa nền tảng ử của WebRTC ết quả đạt được ường cài đặti dùng đượi ích của WebRTCc k t n i v i 1 s thi t bết quả đạt được ốc thực sự được xây ớng dẫn: ốc thực sự được xây ết quả đạt được ịch sử của WebRTCnào đó ch ng h n Trong đó có th k đ n 1 s các API đ n gi n nh hìnhẳng hạn như Picker, Nút, Thanh trượt, ạt động của WebRTC ể làm gì? ể làm gì? ết quả đạt được ốc thực sự được xây ơng 1 ảng viên hướng dẫn: ư

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íaclient

 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ấutrú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

 Cài đ t socketio trên server nodejs T o th m c Demo (Có th đ t tênặt ạt động của WebRTC ư ụng di động đa nền tảng ể làm gì? ặt

b t kỳ) M màn hình terminal (Mac)/ cmd (Win), cd đ n th m cất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các ởi Facebook, React Native là một framework hướng đến ết quả đạt được ư ụng di động đa nền tảng.Demo T i màn hình cmd, gõ câu l nh: npm init; r i nh n enter Khi đóạt động của WebRTC ện: ồm các nội dung cơ bản: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các

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ỳ ện: ốc thực sự được xây ạt động của WebRTC ần chính của WebRTC và chức năng của WebRTC API là ập ực hiện: ập ực hiện: ất gần như ngôn ngữ đấy vì nó cung cấp cho bạn các Ởcác setting khác thì enter b qua, khi h th ng hi n th Yes or No? thì gõỏ vô hạn đã ện: ốc thực sự được xây ể làm gì? ịch sử của WebRTCYes đ cài đ t.ể làm gì? ặt

Sau khi hoà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ênserver để có thể làm web và ứng dụng realtime Để cài những package này mở mànhình cmd > cd đến thư mục Demo > gõ dòng lệnh npm install express ejssocketio 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ủa WebRTC ạt động của WebRTC ềm ện: ết quả đạt được ập ộng của WebRTC ức hoạt động của WebRTC ụng di động đa nền tảng ết quả đạt được )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ễn) ớng dẫn: ọi nơi Tiết kiệm thời gian và tiền bạc ờng cài đặt ực hiện: ớng dẫn: ạt động của WebRTC ường cài đặtidù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ức hoạt động của WebRTC ụng di động đa nền tảng ết quả đạt được ư ạt động của WebRTC ốc thực sự được xây ết quả đạt được ập ộng của WebRTC ức hoạt động của WebRTC ụng di động đa nền tảng ết quả đạt được ững ứng dụng nổi bật sử dụng Reactdoanh nghi p gi ng nhện: ốc thực sự được xây ư CRM thì Socket.IO sẽ t o ra các th vi n m ng khôngạt động của WebRTC ư ện: ạt động của WebRTC

đ 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.ồm các nội dung cơ bản: ộng của WebRTC ện: ết quả đạt được ốc thực sự được xây ịch sử của WebRTC ạt động của WebRTC ững ứng dụng nổi bật sử dụng React ện: ễn) ịch sử của WebRTC ắt mắt thông qua các thành

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ơng 1 ững ứng dụng nổi bật sử dụng React ộng của WebRTC ụng di động đa nền tảng ết quả đạt được ốc thực sự được xây ởi Facebook, React Native là một framework hướng đến ức hoạt động của WebRTC ảng viên hướng dẫn: ềmcác k t n i c a ngết quả đạt được ốc thực sự được xây ủa WebRTC ường cài đặti dùng v i m i máy ch khác nhau.ớng dẫn: ọi nơi Tiết kiệm thời gian và tiền bạc ủa WebRTC

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