Khóa luận tốt nghiệp Hệ thống thông tin: Xây dựng nền tảng streaming trực tuyến

- Tính năng nỗi bật: + Truyền tải video trực tiếp + Tương tac thời gian thực + Thông báo cho người theo dõi + Ghi lại luồng trực tiếp và chia sẻ + Đa nền tảng và tích hợp + Thống kê và p

ĐẠI HỌC QUOC GIA TP HO CHÍ MINH

TRUONG DAI HOC CONG NGHE THONG TIN

KHOA HE THONG THONG TIN

NGUYEN TAN NGA - 19521879

KHOA LUAN TOT NGHIEP

Building a live streaming platform

KY SU NGANH HE THONG THONG TIN

GIANG VIEN HUONG DAN

Ths MAI XUAN HUNG

TP HO CHi MINH, 2023

LOI CAM ON

Dé hoàn thiện nghiên cứu nay, bên cạnh sự cô găng của ca nhân, em cũng đã nhận

được rất nhiều sự động viên, đóng góp ý kiến và chỉ dẫn tận tình của thầy cô, người

thân và bạn bẻ trong suốt thời gian học tập và thực hiện đề tài

Em xin tỏ lòng biết ơn sâu sắc đối với thầy - Ths Mai Xuân Hùng đã hết lòng giúp

đỡ và tận tình hướng dẫn để em hoàn thiện nghiên cứu này Sự dẫn dắt của thầy làđộng lực cho em có thê bồi đắp thêm kiến thức chuyên môn đề hoàn thành khóa luận

Em xin chân thành cảm ơn quý Thầy Cô khoa Hệ thống thông tin - Trường Đại họcCông nghệ thông tin Đại học quốc gia Thành phố Hồ Chí Minh đã truyền đạt những

kiến thức quý báu trong suốt thời gian qua dé em có thé vận dụng tốt vào trong quá

trình nghiên cứu.

Tuy đã có nhiêu cô găng nhưng chắc chăn còn nhiêu thiêu sót, em rât mong nhận

được đóng góp của quý thầy cô

Xin chân thành cảm on.

MỤC LỤC

Chương 1 MỞ ĐẦU s - 55° s52 2S EsEESESEESEsSESEsEESEseEsrtsrsrtsrsrssrssrsse 2

LD co na 2PB) an 2

1.3 Tìm hiểu các ứng dụng hiện CÓ - - 2-5-5 ss s2 sSses£eEsesesesseses 2

1.3.1 Facebook ÌLIV€ - < c1 29999 SSS ST ST TT 2

1.3.2 Youtube 0à-::aaadđiidđadaaÝŸÝŸÝ 4

1.4 Mu on 6

1.5 Đối tượng và phạm Vi sử dụng . s-s° se sessesessesessesessrsesses 6

Chương 2 CÁC CÔNG NGHỆ SỬ DỤNG - 5c scssscsscseesessessesses 7

2.1 Spring Boot FraIWOTFÌK 0s < G 6 6 S55 99 6899993 6899994 560898999496666996 7

"Na 7

2.1.2 Ưu điểm đe >.s.ea Í ⁄ à o2 8

2.1.3 Nhượđim —> đ> 9

„Non 9

2.2.1 Giới thiỆU - 5-5: Sc SE 3212121211 21221211121 7121111111111 111 re 9

2.2.2 Ưu điểm - 2 SE SE EEEEE2151121521217121712111111111111111 111 xe 9

2.2.3 Nhược điỂm ¿- 52+ 2E2E22E2E2122121221212121712171211121 111.1 crxe 10

2.4.2 Các đặc trưng của WebsocK( - -c 1 HS ng ng 22

2.4.3 Ưu điểm -c:- 5t tt tt 2 H2 H2 re 22

2.4.4 Nhược điỀm -c 2++cttrttr nghe 23

Chương 3 PHAN TICH THIẾT KE HE THONG . . - 5° s2 24

3.1 Mô hình quan HhỆ d- G5 G6 526 S9 99 99.99 99 4 0.9 0 09 009 6.66 24

3.2 Sơ đồ trường hợp sử dụng của ứng dụng (Use case diagram) 28

3.2.1 Use-case tông quất - c2 +kk SE E9EE1215111212111 0111111111 1 cx6 28

3.2.2 Danh sách các use-case của hệ thống -2- + ++cz+x+czx+cse2 29

3.3 Sơ đồ tuần tự (Sequence Diagram) ssssessssesseszsseszssesssse 39

3.3.1 Chức năng đăng ky LH HH HH ngu 39

3.3.2 Chức năng đăng nhập - - - 11g ng ch 40

3.3.3 Chức năng đăng XUẤT -¿- + St SEE 3E 1 111511212111 211111 21211 xe 41

3.3.4 Chức năng tim kiếm phiên livestream và streamer - 42

3.3.5 Chức năng tham gia phòng sfr€aim - -. c5 3+ ‡++svex+seeeresss 43

3.3.6 Chức năng tạo phiên livestream M01 - - 555552 s+++ssx 44

3.3.7 Chức năng phát trực tiếp thông qua chia sẻ màn hình 45

3.3.8 Chức năng chỉnh sửa thông tin livesfream -. 5< ««c+++sxc+sex 46 3.3.9 Chức năng trò chuyện trong phòng sfream - - + +s««+<+e++ 47

3.3.10 Chức năng theo dõi Str€aIm€T - - 5 13+ 31 S9 ve 48

3.3.11 Chức năng chia sé ÏIV€Sfr€AI - vn Sư 49

3.3.12 Chức năng thống kê dữ liệu ¿2 + 2E E+E££E+E£Ee£zEzEererxee 50

Chương 4 XÂY DUNG HE THÓNG -5 5 5s ssesssseeseseesesersese 51

4.1 Tổng quan về hệ thong ccccssscssesescssessscssessssssesessssesesscsssessesesesesseeeseess 51

4.2 Khái quát hệ thong c.cssssscsssscsssscessssessssessssesesseceessceesscsesacseeaeaeeaeseecens 53

4.3 Mô tả các màn hình 555555 5 5 5 5 9 9 9.9.9.9 6666665656855 54

4.3.1 Giao diện trang ChủỦ - eeseeseesneeeseessseceseessseseseesseeesseesseessaeeesees 54 4.3.2 Đăng nhap/Dang ky tài khoản người dùng: <++s-«<+++ 56

4.3.3 Giao diện các chức năng dành cho Streamer -‹-++s-s<+>+ 59

4.3.4 Giao diện các chức năng dành cho VIeW€T: ccsss+sss+ssexe+ 64

4.3.5 Giao điện tối: -: ¿©+- 22t 2t E9212EE212121211212112111 21112111111 rre 67

4.3.6 Đăng XUẤT: - 5-5 S HT E1 11 1111111111101112111 1101110111111 tre, 67

4.4 Phương pháp xây Aung ó5 9 9 90 03 009004996 68

4.4.1 Phần S€TV€T - 5c 52t 2 1921212121211 2121121112111 1111 1111111 re 69

4.4.2 Phần Clieni( - ¿c2 1252 s22 1921515212111 1 2111121111111 0111111111111 re 70

4.5 Ưu điểm của hệ thống - 2-5-5 s52 s£ss£sexeEsexeEsessrsssrsessrssrsess 70

4.5.1 Về chất lượng hình ảnh +: 2 +SE+E£EE+E£EEEEEEEEEEEEEErEerkrrerrree 704.5.2 Về độ trễ của luồng truyền phát + 2+ 2+E+£z+E+EzEerszxerszes 70

4.6 Mô hình xây dựng với WeblRTC - «<< ssssessssesessesexsessesssse 71

Chương 5 KET LUAN cccccsssssssssssssessessssssesessssesessscssessscsesesscsesesecsesesecseseseees 75

DANH MỤC HÌNH

Hình 1.1: Giao diện Facebook Live SE S11 1S SE S1 x22 3

Hình 1.2: Giao diện Youtube LIVe - - - c << c1 1111111111111 1 1111k khen, 6 Hình 2.1: Mô hình WebRTC cơ bản c6 1 11911199 19g ng key 11

Hình 2.2 : Những API chính của Web TÍC 1n ng ng re 13

Hình 2.3: Hàm lấy thiết bị từ JavasCrip( -¿- ¿©5522 2E‡E2EEEEzEeEErEerkrrerkrree 14

Hình 2.4 : Cấu trúc liên kết lưới +: +++cxt+ExttExtttkttttrrsrrrrrrrrrrrrrrree 18Hình 2.5 : Cấu trúc liên kết trỘn -:¿- +t++t2Ext2ExtEEkxrtkkttrtrtrkrrrrrrrrrrrrre 20Hình 2.6: Cấu trúc liên kết định tuyến -¿- + 2 2+E+E+E££E+E+E£EEzEeEeExzEererereee 21

Hình 3.1: Mô hình quan hỆ - - - + - E131 1133211111119 111 ng ng ket 24

Hình 3.2: Usecase tổng quát -¿- ¿5 ++2+2E+2EE2EE2EE2EEEE2E122123121 2121221 xe 28

Hình 3.3: Chức năng đăng Ky Q1 HH HH HH khu 39

Hình 3.4: Chức năng đăng nhập - c1 3122111311111 9111 5911111111 key 40

Hình 3.5: Chức năng đăng xuat - 5-22 S12 232152121121211211121111 1111 cxe 41

Hình 3.6: Chức năng tìm kiếm phiên livestream và streamer : :- 42

Hình 3.7: Chức năng tham gia phòng Sfr€am ¿+ + + ‡++++ssveexeeseeeesrs 43

Hình 3.8: Chức năng tạo phiên livestream TỚI - 555 5s ++++*£see+++seeess+ 44

Hình 3.9: Chức năng phát trực tiếp thông qua chia sẻ màn hình 45

Hình 3.10: Chức năng chỉnh sửa thông tin livestream - - «5< «+ s+ssveesx 46

Hình 3.11: Chức năng trò chuyện trong phòng stream -‹ s+++++<ssx++x 47

Hình 3.12: Chức năng theo dõi sfr€aTm€r + << E33 ** 1 +SESeerreeereeesre 48

Hình 3.13: Chức năng chia sẻ ÏIV€Sfr€aIm - c1 11+ 11139 11 111111 ven 49

Hình 3.14: Chức năng thống kê dữ liệu -¿2¿ 5 2©522S2+E£x+zxezzzzxezxez 50

Hình 4.1: Giao diện trang chủ khi chưa đăng nhập - 555cc 54

Hình 4.2: Giao diện trang chủ khi đã đăng nhập 5 5-5 + 3S x+ssvereses 54

Hình 4.3: Man hình đăng ký tài khoản - c1 332111131111 re 56 Hình 4.4: Màn hình đăng ký tài khoản thành công - 5 sex 56 Hình 4.5: Màn hình đăng nhập tài khoản - - - (5 S3 113k se 57 Hình 4.6: Màn hình đăng nhập thành công 55 <1 *+++*ssvverseseeeesrs 57

Hình 4.7: Nhập thông tin stream «5 211v ng ngư 59

Hình 4.8: Khởi tạo live stream thành cÔng - - << c +32 keeeeeeere 59

Hình 4.9: Màn hình các chế độ khi livestream - - - + SE EE£Ezt+xsErrrrerers 60

Hình 4.10: Màn hình quản lý bình luận - 5 5 2 SE keseesreeeesk 61

Hình 4.11: Màn hình lựa chọn màn hình dé chia sẻ 2-25 +5+x+EeEvEeEees 62

Hình 4.12: Màn hình đang chia sé màn hình ¿2S + 23+ +sevexssserrss 62

Hình 4.13: Màn hình thống kê - 2 - 2 +SE+E£EE+EEEESEEEEEEEEEEEEEEEEEEEErkrrrrkrree 63

Hình 4.14: Màn hình xem livestream từ phía VIeW€T ccẶ se 64

Hình 4.15: Chức năng theo dõi sfreaImer - - << s11 319 kg key 65 Hình 4.16: Chức nang chia sẻ ÏIvesfream c1 n1 S2 ng ve 66

Hình 4.17: Trò chuyện trong phòng Sfr€am - - - - << « s3 vs vrsesseeeere 67

Hình 4.18: Màn hình ở chế độ toi esceecccessscsneesneseseecstecseeesseesseeeseeeseesneenneesneeeneee 67Hình 4.19: Chức năng đăng Xuất -¿- 2- 52s S1EE2E£EE£EEEEEEEEEEEerkrrrrkrrrreree 68Hình 4.20: Sơ đồ phương pháp xây dựng ứng dụng ¿2 + ecs+s+£eczcsez 69Hình 4.21: Mô hình xây dựng tổng quan - ¿+ 2+ 2 2+E+E+E££EzE+Ee£zE+xerszxee 71Hình 4.22: Mô hình các client kết nối trong mạng RTC - 2 2 s+sz+s2 5+2 73

DANH MỤC BANG

Bảng 3.1: Quan hỆ US€TS G G5 1911 HT TH ng nh 25 Bảng 3.2: Quan hệ Streamm - - G 1 S99 TH ng vn 25 Bảng 3.3: Quan hệ Caf€OTV SH ng ket 26 Bảng 3.4: Quan hệ Category_ S†f€am - 2c 1 112g ng 26 Bảng 3.5: Quan hệ FFỌÏOW (G1 THn nu HH 27 Bảng 3.6: Quan hệ Record_ ViC€O - LH TH HH nhu 28 Bảng 3.7: Danh sách các UuS€C8§€ G1 HH ng ng ket 30

Bảng 3.8: Usecase đăng nhập - - - 2 122311122111 111 1 1 ng vn ng ky 31

Bảng 3.9: Usecase đăng Xuat c.ccccccscssessessssssssssessesssssssusssesessessssussusseesecsesussseaeeees 31

Bang 3.10: Usecase đăng Ky cọ ng 32

Bang 3.11: Usecase tìm kiếm phiên livestream và streamer - 2 25+: 33

Bảng 3.12: Usecase tham gia vào phịng stream - -< + esek 33

Bảng 3.13: Usecase tạo phiên ÏIvesfream THỚI - <5 21+ Eessveesek 34

Bang 3.14: Usecase thực hiện truyền trực tiếp thơng qua chia sẻ màn hình 35

Bảng 3.15: Usecase trị chuyện trong phịng sfream -‹ «+ ++++sssess+ 35 Bang 3.16: Usecase theo dõi S{T€aTm€T - - - 5 111113391111 1113991111 re 36

Bảng 3.17: Usecase chia sẻ ÏIV€SfT€am - << 11113 1k vn 37

Bang 3.18: Usecase chỉnh sửa thơng tin Ïivestream - - «se seeereee 37

Bang 3.19: Usecase thống kê dữ liệu -¿- - 52 S22E+E£E£E2EEEE2EEEEEErkrrrrrrkee 38

Bảng 4.1: Khái quát các màn hình của ứng dụng - 5+ s+sssseeess 53

Bang 4.2: Cac chức năng trên giao diện trang chủ - «+ xcs+veseeeese 55 Bang 4.3: Chức năng trên man hình đăng nhập/đăng ky .- «+ S«+ 58

Bang 4.4: Các chức nang tạo ÏIV€S{T€AT - S1 ng ng re 60

Bang 4.5: Các chức năng về chế độ khi livestream - - 2 2 s+se£szszzss+2 61

Bang 4.6: Chức năng bình luận - 5 1 133211113211 115511 11 111 9v ng key 62

Bảng 4.7: Chức năng chia sẻ màn hình - ¿+ +1 13323 EE+sseeeereeeeeesrs 63

Bang 4.8: Chức năng thống kê - ¿©2- ES E219 EE2EEEEE1212111 2121121211 ce 64

Bang 4.9: Chức năng nhận thơng tin livestream của VI€W€T sex 65

DANH MỤC TU VIET TAT

API: Application Programming Interface

DTLS: Datagram Transport Layer Security

ICE: Interactive Communication Establishment

NAT: Network Address Translation

RTC: Real-Time Communications

SCTP: Stream Control Tranmission Protocol

SIP: Session Initiation Protocol

SDP: Session Description Protocol

SRTP: Secure Real Time Protocol

STUN: Simple Traversal Of UDP Through NAT

TCP: Transmission Control Protocol

TURN: Traversal Using NAT Relay

MCU: Multipoint Conferencing Unit

SFU: Selective Forwarding Unit

TOM TAT KHÓA LUẬN

Trong thời đại phát triển các thiết bị điện tử đã sản sinh ra nhiều loại hình giải trí cho

con người Trong đó livestream là một trong những nền tang phát triển vượt trội vìđược người dùng đón nhận đông đảo Vì thế việc phát triển, nâng cấp các app, websitelivestream là lẽ tất yếu

Dé giải quyết nhu cầu này nên tác giả đã tìm hiểu, nghiên cứu và xây dựng thànhcông nền tảng streaming trực tuyến cho phép người dung trao nhận thông tin nhanh,

với số lượng tiếp nhận đông đảo theo thời gian thực

Đề thực hiện điều này, tác giả đã áp dụng công nghệ WebRTC, các công nghệ hỗ trợkhác, để tiến hành hoàn thành khóa luận

Khóa luận gồm có 5 chương với các nội dung chính sau:

* Chương 1: Mở đầu

* Chương 2: Cơ sở lý thuyết

* Chương 3: Phân tích thiết kế hệ thống

* Chương 4: Xây dựng hệ thong

* Chương 5: Kết luận và hướng phát triển

trong những nền tảng phát triển vượt trội vì được người dùng đón nhận đông đảo Vì

thế việc phát triển, nâng cấp các app, website livestream là lẽ tất yếu

1.3 Tìm hiểu các ứng dụng hiện có

1.3.1 Facebook Live

Facebook Live là tính năng truyền trực tiếp của mạng xã hội Facebook, chophép người dùng truyền tải video trực tiếp từ điện thoại di động hoặc máy tinh cánhân Với Facebook Live, người dùng có thể chia sẻ và tương tác với khán giả theothời gian thực thông qua bình luận Day là một trong những tinh năng phổ biến nhấtcủa Facebook và đã thu hút được sự quan tâm của nhiều người dùng và các nhà phát

người đang theo dõi mình Người xem sẽ đề lại những bình luận trong livestream mà

bạn có thé giải đáp ngay lập tức Đây là nền tảng livestream nổi tiếng được nhiều

người sử dụng hiện nay Người dùng khá da dạng như: người nổi tiếng, bán hàng

online, phát trực tiếp trò chơi điện tu,

- Tính năng nỗi bật:

+ Truyền tải video trực tiếp

+ Tương tac thời gian thực

+ Thông báo cho người theo dõi

+ Ghi lại luồng trực tiếp và chia sẻ

+ Đa nền tảng và tích hợp

+ Thống kê và phân tích

- Các giao thức được sử dụng trong Facebook Live

+ RTMPS (Real-Time Messaging Protocol Secure): Facebook Live sử dụng

giao thức RTMPS để truyền trực tiếp RTMPS là phiên bản bảo mật của giao thức

RTMP (Real-Time Messaging Protocol), nó sử dụng kết nối mã hóa SSL/TLS dé đảmbảo an toàn và bảo mật trong quá trình truyền tải đữ liệu video RTMPS giúp ngănchặn các cuộc tấn công va bảo vệ nội dung video trực tiếp trên Facebook Live khỏi

sự can thiệp trái phép.

+ DASH (Dynamic Adaptive Streaming over HTTP): Facebook Live cũng sử

dụng công nghệ DASH dé cung cấp trải nghiệm xem video trực tiếp tốt hơn cho người

dùng DASH là một giao thức truyền tải video linh hoạt, cho phép nội dung video

được phân chia thành các đoạn nhỏ và điều chỉnh tỷ lệ bit tuỳ thuộc vào tốc độ mạngcủa người xem Điều này giúp tối ưu hóa chất lượng video và giảm thiểu sự gián đoạnkhi xem video trực tiếp trên Facebook Live

1.3.2 Youtube Live

YouTube Live là một tính năng trực tuyến của nền tảng chia sẻ video YouTube,

cho phép người dùng truyền tải video trực tiếp và tương tác với khán giả trong thờigian thực Với YouTube Live, người dùng có thé phát sóng sự kiện trực tiếp, chia sẻkiến thức, diễn đạt ý tưởng và tạo kết nối với khán giả trên toàn thé giới

- Một số chức năng chính của Youtube Live bao gồm:

+ Phát sóng trực tiếp: cho phép người dùng tạo và phát sóng trực tiếp video với

chất lượng cao và tính năng tương tác với người xem

+ Tương tác trong phòng stream: người xem có thé tương tác với người phát

sóng trực tiếp bằng cách chat và đặt câu hỏi

+ Quản lý và xem lại video: cho phép người dùng quản lý các video phát sóng

trực tiếp, bao gồm chỉnh sửa, xóa và lưu trữ lại các video trên kênh của mình

+ Thống kê và báo cáo: cung cấp cho người dùng các thống kê và báo cáo về

lượng truy cập, tương tác của người xem và các hoạt động khác.

+ Đa nền tảng: Youtube Live cho phép người dùng phát sóng từ các thiết bị

khác nhau như máy tính, điện thoại và máy tính bảng.

+ Tiếp cận đến lượng khán giả rộng lớn: với hơn 2 tỷ người dùng hàng tháng,

Youtube Live cung cap khả năng tiêp cận đên người xem trên toàn câu.

- Giống như Facebook Live, Youtube Live cũng sử dụng các giao thức RTMPS

và DASH để thực hiện việc truyền phát trực tiếp Ngoài ra, Youtube Live còn sử dunggiao thức HLS (HTTP Live Streaming) dé phát trực tiếp trên nền tảng của ho HLS

là giao thức phát trực tuyến được phát triển bởi Apple và đã trở thành một tiêu chuẩn

phô biến trong ngành truyền thông phát trực tiếp Khi người dùng phát trực tiếp trên

Youtube Live, hình ảnh và âm thanh được mã hóa và chia thành các phân đoạn

(segments) nhỏ Các phân đoạn này được tải lên các máy chủ trung gian của Youtube

và sau đó truyền tải đến người xem thông qua giao thức HTTP Mỗi phân đoạn được

tải xuống và phát lại trên máy người xem, cho phép việc tự động điều chỉnh chất

lượng video dựa trên điêu kiện mạng của người xem.

You look li

3S Thanks for Ara:

iu WewabiGalaxy awesome

Hình 1.2: Giao diện Youtube Live

1.4 Mục tiêu đề tài

Đề tài này sẽ tìm hiéu về giao thức WebRTC và phương pháp xây dựng hệ thong

truyền tải video trực tuyến, nhằm tối ưu hóa chất lượng video (độ trễ, hình ảnh, âm

thanh, ) để đáp ứng nhu cầu của người đùng trong việc xem video trực tuyến

Đây sẽ là một nền tảng livestream đa dang hạng mục theo sở thích người dùng,

điều này tránh gây nhàm chán khi hiện nay các trang web streaming đang cạnh tranh

khá mạnh Do đó, nghiên cứu này chú trọng vào chất lượng thật sự từ hình ảnh, tốc

độ, âm thanh,

1.5 _ Đối tượng và phạm vi sử dụng

Phục vụ cho mọi đối tượng có nhu cầu truyền đạt thông tin và thu nhận thông

tin qua nền tảng streaming trực tuyến

Do đặc trưng các nên tảng livestream luôn đặt ra mục tiêu thu hút nhiêu người xem (viewer) và người livestream (streamer) nhât có thê nên phạm vi sử dụng của sản phâm là toàn câu.

Các đặc điểm chính của Spring Boot:

e Tự cấu hình: Spring Boot giúp tự động cấu hình ứng dụng dựa trên quy ước

mặc định và các thư viện tự động cung cấp Điều này giup giảm thiểu việc cấu hình

thủ công và tăng khả năng linh hoạt trong việc xây dựng ứng dụng.

e Hỗ trợ các chuẩn và các thư viện tích hợp sẵn: Spring Boot tích hợp và hỗ trợcác chuẩn phô biến trong ngành như Servlet, JPA (Java Persistence API), JDBC (JavaDatabase Connectivity) và nhiều công nghệ khác Nó cung cấp các khung làm việc

dé phát triển ứng dụng web, RESTful APIs, xử lý dữ liệu và nhiều lĩnh vực khác

® Microservices-ready: Spring Boot ho trợ kiên trúc microservices bang cach

cung cấp các tính năng như giảm độ trễ, khả năng mở rộng dễ dàng, quản lý tài

nguyên, khả năng triển khai và quản lý các dich vụ độc lập

e Tích hop Spring ecosystem: Spring Boot được tích hợp chặt chẽ với các dự án

khác trong hệ sinh thai Spring như Spring Data, Spring Security, Spring Cloud va

Spring Integration Điều nay giúp người phát triển dé dang sử dung và tích hợp các

thành phan của Spring dé phát triển các ứng dụng phức tap.

1 “Spring Boot - Introduction”

https://www.tutorialspoint.com/spring boot/spring boot introduction.htm

e Cộng đồng hỗ trợ mạnh mẽ: Spring Boot có một cộng đồng lớn và sôi động,với nhiều tài liệu, ví dụ và nguồn tư vấn trực tuyến Điều này giúp người dùng tìmkiếm thông tin, giải đáp câu hỏi và chia sẻ kinh nghiệm với nhau một cách dễ dàng.

2.1.2 Ưu điểm

Các ưu điểm chính của Spring Boot bao gồm:

e Dễ sử dung và triển khai nhanh chóng: Spring Boot cung cấp các cau hình mặcđịnh và tập trung vào sự tiện ích dé giảm thiểu công việc cấu hình và triển khai ứngdụng Điều này giúp người phát triển nhanh chóng xây dựng ứng dụng và tập trung

vào logic kinh doanh quan trọng hon.

e Tự động cấu hình: Spring Boot có khả năng tự động cấu hình dựa trên quy ướcmặc định và phân tích các thư viện đã được sử dụng Điều này giúp giảm thiêu công

việc cau hình thủ công và đảm bảo tính nhất quán trong các ứng dụng

e Hỗ trợ tốt cho việc tích hợp: Spring Boot tích hợp dé dang với các công nghệ

và thư viện phô biến khác như Spring Data, Spring Security, Hibernate, và nhiéu nén

tang cơ sở dữ liệu khác Điều này giúp người phat trién tiết kiệm thời gian và công

sức khi tích hợp các thành phần phức tạp vào ứng dụng

e Kiến trúc microservices: Spring Boot hỗ trợ xây dựng kiến trúc microservices

thông qua các tính năng như khả năng mở rộng dễ dàng, quản lý tài nguyên, và tích

hợp tốt với Spring Cloud Điều này giúp phát triển và quản lý các dịch vụ độc lập một

cách hiệu quả.

e Không có các file cấu hình XML.

e Dễ dàng truy cập vào cơ sở dữ liệu và các dịch vụ hang đợi như MySQL,

Oracle, MongoDB, Redis, ActiveMQ và các dịch vụ khác Spring Boot cung cấp cácmodule và thư viện để tương tác với cơ sở dit liệu quan hệ như MySQL thông qua

Spring Data JPA, giúp đơn giản hóa việc thao tác dit liệu và xử lý truy van SQL.

Ngoài ra, Spring Boot cũng hỗ trợ kết hợp với các cơ sở dữ liệu phi quan hệ như

MongoDB, Redis và các hệ thống dich vụ hàng đợi như ActiveMQ dé có thé làm việc

dễ dàng với chúng trong ứng dụng.

2.1.3 Nhược điểm

e Phức tạp với các ứng dụng lớn: Mặc dù Spring Boot giúp giảm thiểu công việc

cấu hình, nhưng với các ứng dụng lớn và phức tạp, cấu hình có thê trở nên phức tạp

hơn và đòi hỏi hiệu biệt sâu về framework.

e Có thể có khối lượng lớn các tùy chọn cấu hình: Spring Boot cung cấp nhiềutùy chọn cấu hình, và việc lựa chọn đúng có thể là một thách thức Người phát triểncần có hiểu biết rõ về các tùy chon này dé tận dụng hết tiềm năng của Spring Boot

e Có thể gặp khó khăn với các phiên bản cũ: Khi sử dụng các phiên bản cũ của

Spring Boot, bạn có thể gặp khó khăn trong việc tìm kiếm hỗ trợ và tài liệu đầy đủ

Vì vậy, nên luôn sử dụng phiên bản mới nhất để tận dụng các cải tiễn và sự hỗ trợ từcộng đồng

2.2 React

2.2.1 Giới thiệu

React? còn được gọi là Reactjs — là một thư viện JavaScript mã nguồn mở, được

phát triển bởi Facebook, nhằm xây dựng giao diện người dùng đáp ứng các tương táctrên các ứng dụng web React giúp người phát triển xây dựng giao diện người dùnglinh hoạt, dễ bảo trì và có hiệu suất cao Với sự phát triển nhanh chóng và sự hỗ trợmạnh mẽ từ cộng đồng, React đã trở thành một công nghệ phổ biến trong lĩnh vực

phát triển web.

2.2.2 Ưu điểm

e Hiệu suất cao: React sử dụng Virtual DOM và cập nhật giao diện chỉ khi cần

thiết, giúp tối ưu hiệu suất của ứng dụng Thay vì cập nhật toàn bộ DOM, React chỉ

2 “React - A JavaScript library for building user interfaces” https://reactjs.org/

cập nhật các thành phần có thay đổi, giúp giảm độ trễ và tối ưu hóa trải nghiệm người

dùng.

e Tái sử dụng thành phan: React cho phép phát triển giao diện thành từng thành

phần độc lập Các thành phần này có thê được tái sử dụng trong ứng dụng hoặc giữacác dự án khác nhau, giúp tiết kiệm thời gian phát triển và tăng khả năng bảo trì

e Quản lý trạng thái dé dàng: React giúp quan lý trạng thái của ứng dụng một

cách dé dàng thông qua các thành phan có trạng thái (stateful components) Quan lýtrạng thái tập trung và sử dụng các khái niệm như Props và State, giúp kiểm soát và

tái sử dụng dữ liệu trong ứng dụng một cách hiệu quả.

e Hệ sinh thái mạnh mẽ: React đi kèm với một hệ sinh thái phong phú gồm nhiều

công cụ va thư viện phụ trợ như React Router, Redux, React Native, Next.js va nhiéuthư viện khác Điều này giúp mở rộng khả năng phat triển, hỗ trợ cho các tinh năng

và yêu cầu đa dạng trong ứng đụng

® Cộng đồng và tài liệu đa dạng: React có một cộng đồng lớn và nhiệt huyết,

cung cấp nhiều tài liệu, ví dụ và hỗ trợ trực tuyến Điều này giúp người phát triển tìmkiếm thông tin, giải đáp câu hỏi va chia sẻ kinh nghiệm một cách dé dang

2.2.3 Nhược điểm

e Quản lý trạng thái phức tạp: Với ứng dụng lớn va phức tap, quản ly trạng thái

có thê trở nên phức tạp và khó khăn Người phát triển cần có kế hoạch và kiến thức

để quản lý trạng thái một cách hiệu quả, đề tránh sự phức tạp và khó bảo trì trong quátrình phát triển

e_ Một số tinh năng phụ thuộc bên ngoài: React tập trung vào việc xây dựng giaodiện người dùng, trong khi các tính năng khác như định tuyến (routing) và quản lýtrạng thái có thể phụ thuộc vào các thư viện và công cụ bên thứ ba Điều nảy có théđòi hỏi sự học hỏi và tích hợp với các công nghệ khác dé đáp ứng các yêu cầu cu thé

của ứng dụng.

10

2.3 Công nghệ WebRTC

2.3.1 Tống quan về WebRTC

2.3.1.1 Khái niệm

WebRTC là viết tắt của Web Real-Time Communication Đây là giao thức

truyền tải đữ liệu, âm thanh, hình ảnh theo thời gian thực và là công nghệ tiên tiến,

mạnh mẽ, đột phá trong lĩnh vực truyền phát trực tuyến.

thời gian thực giữa các trình duyệt và thiết bị Một trong những ưu điểm chính củaWebRTC là không yêu cau bat ky plugin trình duyệt hoặc phần mềm thứ ba nào làmđiều kiện tiên quyết WebRTC hiện đang được hỗ trợ bởi hầu hết các nhà cung cấptrình duyệt hàng đầu như Safari, Google Chrome, Firefox, Opera và nhiều nhà cungcấp khác Với công nghệ phát trực tuyến video của WebRTC, có thê nhúng videotheo thời gian thực trực tiếp dựa trên trình duyệt, tạo ra trải nghiệm phát trực tuyến

tương tác và hấp dẫn cho khán giả mà không cần lo lăng về độ trễ.

11

2.3.1.2 Lịch sử hình thành

Real-time Communication, hay RTC, là một trong những phần khó khăn nhất

của web Nó cho phép giao tiếp bằng âm thanh và video giữa các cá nhân

Chúng ta cần tương tác với nhau, đặc biệt sau đại dịch Covid-19, bất kế vềkhoảng cách hay địa lý Do đó, RTC đã trở thành phương thức giao tiếp mới của

chúng ta RTC trước đây rất phức tạp, đòi hỏi sự cấp phép hoặc phát triển nội bộ các

công nghệ âm thanh và hình ảnh đắt tiền Việc tích hợp công nghệ RTC với nội dung,

đữ liệu và dịch vụ hiện có đã gặp khó khăn rất lớn và tốn thời gian, đặc biệt là trênInternet

Với việc ra mắt tinh năng trò chuyện video trong Gmail vào năm 2008, Google

đã gia nhập thị trường trò chuyện video Hangouts ban đầu là một phần của Google+

và được Google giới thiệu vào năm 2011 Năm 2013, Hangouts đã trở thành một sản

phẩm độc lập Google rat quan tâm đến các đôi mới về RTC Ho đã mua lại GIPS,một công ty phát triên nhiều thành phần liên quan đến RTC như codec và phươngpháp hủy tiếng vọng Dé đạt được sự nhất quán trong ngành, Google đã công bốcông nghệ mở nguồn được GIPS phát triển và làm việc cùng các tô chức tiêu chuan

như World Wide Web Consortium (W3C) va Internet Engineering Task Force

(IETF) Khi Ericsson tao ra ban trién khai WebRTC dau tién vao tháng 5 năm 2011,

đó là một cột mốc quan trọng đánh dấu tương lai của ngành truyền thông Mục tiêu

của WebRTC là xây dựng một phương pháp giao tiếp thời gian thực bằng video, âmthanh và dữ liệu mà không cần sử dụng plugin

RTC được sử dụng bởi nhiều dịch vụ web như Skype, Facebook và Hangouts,nhưng dé sử dung chúng, người dùng thường cần tải xuống, cài đặt ứng dụng gốc

hoặc plugin Quá trình tải xuống, cài đặt và cập nhật plugin có thể khó khăn Các

3 “Are the WebRTC components from Google’s acquisition of Global IP Solutions?”

plugin thường gặp lỗi và hoạt động không tốt Sử dụng plugin cũng có thể đòi hỏi cáccông nghệ hoặc giấy phép đắt tiền Thuyết phục mọi người tải xuống một plugin cũngkhá khó khăn Với giả định rằng các API phải là mã nguồn mở, miễn phí, tiêu chuanhóa và tích hợp sẵn vào trình duyệt web, WebRTC đã được phát triển.

2.3.1.3 Các API chính

©

WebRTC

MediaStream

(getUserMedia) RTCPeerConnection RTCDataChannel

Cấp quyền truy cập Một interface Cung cấp phương pháp

vào máy ảnh và/hoặc micro cấu hình trỏ chuyện thiết lập đường truyền

của thiết bị và cắm video hoặc audio dữ liệu ngang hàng

tín hiệu vào kết nối RTC giữa các trinh duyệt

các thiết bị đầu vào như webcam và micro dé truyền dữ liệu hình anh va âm thanh

Có hai loại đầu vào và đầu ra trong một MediaStream Đầu ra được sử dụng bởiRTCPeerConnection hoặc dé hién thị màn hình, trong khi đầu vào thu thập dữ liệu

âm thanh và hình ảnh từ nguồn cục bộ Người dùng có thể yêu cầu truy cập vào thiết

bị nhập liệu bằng cách sử dụng API getUserMedia của JavaScript dé tạo một

MediaStream với các track chứa dữ liệu phương tiện Ngoài các track âm thanh và

video, MediaStream cũng có thé bao gồm các track bổ sung Hàm getUserMedia yêu

câu ba đôi sô:

13

e Mot hàm gọi lại khi thành công

e Một hàm gọi lại khi thất bại

e Một đối tượng ràng buộc

eee

-getUserMedia = avigat -getUserMedia;

var constraints = { audio: fa ; Video: t b sắn

var video = d ent.querySelector("video");

getUserMedia đến một phan tử âm thanh hoặc video ké từ phiên bản 25

RTCPeerConnection là một phan quan trọng của WebRTC, cho phép tạo kếtnối giữa các máy tính cục bộ và các máy tinh từ xa Nó cung cấp các phương thức dé

kết nối với máy tính từ xa, duy trì kết nối đó và kiểm soát nó, và cho phép ngắt kết

nối khi không còn cần thiết

Một thành phần của WebRTC gọi là RTCDataChannel cho phép truyền dữliệu không hạn chế giữa các máy tính trong môi trường ngang hàng Có nhiều ứngdụng cho API này, bao gồm truyền tập tin, trò chuyện trực tiếp và trò chơi trực tuyến.Ngoài ra, API cung cấp một loạt các chức năng để tận dụng đầy đủ khả năng của

RTCPeerConnection.

14

e Bao mật tích hợp san dựa trên DTLS và kiểm soát tắc nghẽn.

e Chức năng chia nhóm đa kênh đồng thời với độ ưu tiên

e Thiết lập phiên RTCPeerConnection

Ngay cả khi cần sử dụng máy chủ chuyền tiếp TURN, RTCDataChannel vẫn có

thé nhanh hơn WebSocket vì giao tiếp xảy ra trực tiếp giữa các trình duyệt

2.3.1.4 Tính năng nỗi bật của WebRTC

e_ Giao tiếp video, âm thanh và dữ liệu thời gian thực giữa các thiết bị được thực

hiện bang cách sử dụng WebRTC mà không cần sử dung plugin hoặc các ứng dụng

khác.

e WebRTC không chỉ được sử dụng cho các ứng dụng, mà còn cho phép phat

triển các trò chơi trực tuyến Đề tham gia trò chơi, người chơi chi cần sử dụng một

trình duyệt tương thích hỗ trợ WebRTC, không cần cài đặt phần mềm bổ sung

2.3.1.5 Ưu điểm

Khi xây dựng hệ thống phát trực tiếp, giao thức WebRTC mang đến những lợi

ích sau so với các giao thức khác như RTMP, HLS và DASH:

e_ Phát trực tuyến video với độ trễ thấp: WebRTC cho phép phát trực tuyến video

với độ trễ chỉ 0,5 giây hoặc thấp hơn

¢ Dự án mã nguồn mở và miễn phí: WebRTC là một giải pháp truyền thông thờigian thực hoàn toàn miễn phí và có sẵn trên tất cả các trình duyệt, theo như Google

đã đề cập

e Không cần phần mềm hoặc plugin từ bên thứ ba: WebRTC không yêu cau sửdụng phần mềm hoặc plugin từ bên thứ ba, mang lại sự tiện lợi, tốc độ và tiết kiệm

chi phí.

e Bao mật âm thanh và video: Sử dụng giao thức SRTP (Secure Real-Time

Transport Protocol) để mã hóa và xác thực dữ liệu truyền tải, giúp ngăn chặn việcđánh cắp thông tin âm thanh và video trong quá trình truyền tải

15

e Hỗ trợ đa nền tảng: WebRTC đã hoạt động tốt trên hầu hết các trình duyệt và

hệ điều hành khác nhau, mặc dù nó vẫn đang trong quá trình phát triển

e Don giản trong việc sử dụng: Bang cách sử dụng các API JavaScript và các

Framework sẵn có, WebRTC có thé được tích hợp dễ dàng vào các dịch vụ trực tuyến.

e Tận dụng băng thông một cách hiệu quả: WebRTC sử dụng băng thông một

cách hiệu quả và hoạt động tốt trong mọi môi trường mạng, có khả năng làm việc với

nhiều loại phương tiện và thiết bị kết ni

2.3.1.6 Nhược điểm

e WebRTC không phải là một công nghệ mới, nhưng hiện tại nó vẫn đang được

phát triển và cải tiến Điều này cho thấy việc hỗ trợ cho các nhà phát triển vẫn đanggap khó khăn, và tài liệu liên quan vẫn còn thiếu

e© Ung dụng sử dụng WebRTC có thê hoạt động kém hon do trình duyệt hỗ trợ

số lượng và sự đa dạng các API WebRTC khác nhau Do đó, các lập trình viên phải

đầu tư nhiều thời gian và nỗ lực để tùy chỉnh trang web hoặc ứng dụng của họ để hoạtđộng trên mọi trình duyệt Việc này có thể làm tăng khả năng xảy ra lỗi

2.3.2 WebRTC Server

2.3.2.1 WebRTC Server là gì

WebRTC Server là máy chủ cụ thể được sử dụng trong kiến trúc WebRTC để

hỗ trợ giao tiếp trực tuyến thời gian thực qua Internet giữa các thiết bị Việc thiết lập

và duy trì các kết nối ngang hàng (P2P) sử dụng giao thức WebRTC phải được máychủ này thực hiện giữa các trình duyệt hoặc ứng dụng.

Máy chủ WebRTC thực hiện các nhiệm vụ như quản lý luồng truyền

(streaming), bảo vệ dữ liệu an toàn thông qua việc sử dụng các g1ao thức và kỹ thuật

mã hóa phù hợp, và trung gian giao tiếp (signaling) giữa các bên dé truyền thông tin

về kết nối, chăng hạn như cung cấp địa chỉ IP và thông tin định danh Các máy chủnày cung cấp các công cụ và giao diện lập trình ứng dung (API) dé phát triển và triển

khai các ứng dụng giao tiếp thời gian thực dựa trên WebRTC

16

2.3.2.2 Các loại may chủ WebRTC

- WebRTC application servers: máy chu ứng dụng WebRTC là máy chủ dùng

dé lưu trữ các ứng dụng và trang web triển khai bang công nghệ WebRTC

- WebRTC signaling servers: là máy chủ quản lý các kết nối giữa các thiết bị.Máy chủ này không quan tâm đến lưu lượng truyền thông truyền qua nó; việc truyềntín hiệu (signaling) là ưu tiên chính của nó Điều này bao gồm việc cho phép ngườidùng phát hiện người dùng khác trên mạng, thiết lập kết nối, thiết lập lại kết nối nếucần thiết và kết thúc kết nối Các giao thức signaling phổ biến trong WebRTC baogồm Session Initiation Protocol (SIP), Interactive Connectivity Establishment (ICE),

va trung gian WebRTC (WebRTC Gateway).

- NAT traversal servers for WebRTC: Một kỹ thuật mạng máy tính được gọi

là NAT traversal (điều hướng qua NAT) được sử dụng dé tạo và duy trì các kết nốigiao thức Internet qua các gateway sử dụng NAT Nhiều ứng dụng mạng, như chia

sẻ tap tin ngang hang (peer-to-peer file sharing) va Voice over IP (gọi điện qua IP), đòi hỏi các giải pháp NAT traversal.

- WebRTC media servers: là phần mềm trung gian đa phương tiện (multimedia

middleware) năm giữa hai đầu cuộc giao tiếp và xử lý lưu lượng truyền thông khi nó

đi chuyền từ một bên sang bên kia MCU (Multipoint Conferencing Unit) là một loại

máy chủ truyền thông có thé xử lý các luồng truyền thông và phân phối chúng cho

nhiều người nhận khác nhau Các loại máy chủ truyền thông khác bao gồm việc trộn(chuyền đổi nhiều luồng đầu vào thành một luông tổng hợp duy nhất), chuyển đổi mã

hóa (thích nghi mã hóa và định dạng giữa các peers không tương thích) và ghi lại

luồng phương tiện (lưu trữ vĩnh viễn các phương tiện trao đổi giữa các bên)

17

2.3.3 Cấu trúc liên kết đa bên

2.3.3.1 Cấu trúc liên kết lưới (Mesh Topology)

Mesh Topology là một cấu trúc liên kết cho các ứng dụng đa bên Trong cấutrúc liên kết này, mọi client tham gia gửi luồng phương tiện của mình và nhận lạiphương tiện từ các client khác Mesh là một kỹ thuật rất phô biến trong việc xây dựng

các ứng dụng thời gian thực WebRTC nhỏ gọn (như ứng dụng video call, hội họp

trực tuyến) và cũng là kỹ thuật dễ triển khai nhất vì không yêu cầu bất kỳ máy chủ

trung gian nào.

Trong cấu trúc liên kết lưới, do mỗi máy khách phải liên tục truyền và nhận dữ

liệu đa phương tiện từ tất cả máy khách khác trong cùng phiên nên điều này sẽ dẫnđến việc tiêu tốn lượng lớn băng thông Do đó cấu trúc này không phù hợp đề áp dụngvào việc triển khai một hệ thống streaming trực tiếp, nơi mà yêu cầu khả năng phục

vụ một lượng lớn người xem (viewers).

œ

=⁄271%+

18

Ưu điểm của mesh:

e Chi phí vận hành thấp: các nhà phát triển có thé tiết kiệm chi phí cho thànhphan máy chủ vì không bắt buộc phải dùng máy chủ dé đóng vai trò trung gian truyền

dữ liệu Chi phí lớn nhất trong WebRTC thông thường là băng thông

e Chỉ cần triển khai WebRTC ở phía máy khách

Nhược điểm của mesh:

e Chỉ một số lượng hạn chế người tham gia (4-6 người) có thé kết nối với nhau

e Vì mỗi người tham gia gửi phương tiện cho nhau nên yêu cầu N-1 uplinks và

N-1 downlinks, với N là số người tham gia

2.3.3.2 Cầu trúc liên kết trộn (Mixing Topology) và MCU (Multipoint

Conferencing Unit)

Mixing Topology là một cấu trúc liên kết da bên trong đó mỗi máy khách gửi

luồng phương tiện của mình đến máy chủ trung tâm và nhận luồng phương tiện duynhất từ máy chủ đó sau khi máy chủ trộn (mixing) tất cả (hoặc một số) luồng mà nó

nhận được Máy chủ trung tâm này được gọi là MCU (Multi-Conference Unit).

Máy chủ MCU sẽ thực hiện việc trộn các luồng phương tiện mà nó nhận được

và trả về một luéng phương tiện duy nhất, điều này đồng nghĩa rang máy chủ MCUphải giải mã, sắp xếp và mã hóa lại phương tiện từ tat cả các máy khách tham gia Do

đó, cấu trúc liên kết này đòi hỏi một lượng lớn tài nguyên xử lý từ máy chủ trung tâm,

vì vậy nó không phù hợp dé triển khai một hệ thống phát trực tiếp (live streaming)

19

Ưu điểm của Mixing Topology:

e Chỉ cần triển khai WebRTC ở phía client

e Mỗi client chỉ có một uplink và một downlink.

Nhược điểm của Mixing Topology:

e Bởi vì máy chủ MCU thực hiện giải mã va mã hóa phương tiện của từng client,

nên yêu cầu công suất xử lý cao dẫn đến chi phí dat đỏ.

2.3.3.3 Cấu trúc liên kết định tuyến (Routing Topology) và SFU (Selective

Forwarding Unit)

Routing Topology là một cấu trúc liên kết đa bên trong đó mỗi máy khách gửiluồng phương tiện của mình đến máy chủ trung tâm và nhận tất cả các luồng phương

tiện từ các máy khách khác thông qua máy chủ đó Máy chủ trung tâm này được gọi

là SFU (Selective Forwarding Unit).

20

Trong cau trúc định tuyến, mỗi máy khách sử dụng máy chủ SFU dé phân phối

phương tiện truyền đến các máy khách khác, giúp giảm tải lưu lượng và băng thôngtrên đường truyền lên

Cơ chế định tuyến cũng giúp giảm công việc của máy chủ bằng cách loại bỏ yêu

cầu giải mã, sắp xếp và mã hóa lại các luồng phương tiện được gửi tới tất cả các máykhách Vi vậy, cấu trúc định tuyến này phù hợp dé triển khai một hệ thống phát trực

tiếp (live streaming)

SZ

Hình 2.6: Cầu trúc liên kết định tuyến

Ưu điểm của Routing Topology:

e Máy chủ SFU đòi hỏi ít công suất xử lý hơn máy chủ MCU, điều này giúp

giảm thiểu chi phí khi vận hành hệ thống

e Mỗi client có một uplink và nhiều downlinks: làm giảm tắc nghẽn và đạt được

tốc độ bit cao hơn, phù hợp với hệ thống live streaming

21

Nhược điểm của Routing Topology:

e Yêu cầu máy chủ định tuyến phụ trợ, mặc dù ít tốn kém hơn mixing topology.

2.4 Websocket

2.4.1 Khái niệm

WebSocket* là một giao thức truyền tải dữ liệu hai chiều thông qua một kết nối

mạng đơn duy nhất giữa server va client Nó cung cấp một phương thức dé các ứng

dụng web gửi và nhận dữ liệu thời gian thực một cách hiệu qua, thay vì phải sử dụng

các phương pháp truyền thống như HTTP

2.4.2 Các đặc trưng của Websocket

e Kết nối hai chiều: WebSocket cho phép truyền dif liệu từ máy chủ đến client

và ngược lại một cách đồng thời, không cần thiết lập lại kết nối

e Thời gian thực: Dữ liệu được truyền tải ngay lập tức và có khả năng cập nhật

dữ liệu trực tiếp trên giao điện người dùng

e_ Giao thức độc lập: WebSocket không ràng buộc với bat kỳ giao thức nào khác

e Tích hợp dé dàng: WebSocket dễ dàng tích hợp vào các ứng dung web hiện

có và hỗ trợ trên hầu hết các trình duyệt hiện đại

5 | Fette - Google, Inc., A Melnikov - Isode Ltd., “The WebSocket Protocol”, December 2011.

https://datatracker.ietf.org/doc/html/rfc6455

22

2.4.4 Nhược điểm

e Khả năng mở kết nối: WebSocket yêu cầu máy chủ và client hỗ trợ và duy tri

két nôi liên tục, điêu này có thê tạo áp lực về tài nguyên máy chủ và mạng.

e Hạn chế hỗ trợ: Một số trình duyệt cũ không hỗ trợ hoặc hỗ trợ không day đủ

cho WebSocket, điều này có thể gây khó khăn trong việc triển khai trên môi trường

đa nên tảng.

23

Chương 3 PHAN TÍCH THIẾT KE HE THONG

3.1 Mô hình quan hệ

+ Bang Users: Users (user 1d, username, email, avatar_url, password, isLive,

role)

Tân từ: mỗi dòng trong bang Users tương ứng với từng người dùng trong hệ

thông, gôm một mã sô user_id duy nhât phân biệt với các user khác

THUỘC TÍNH KIEU DU LIEU | RÀNG BUỘC

1 user_id Mã số user INT Khóa chính

2 username Tên đăng nhập VARCHAR(255) | NOT NULL

3 email Email VARCHAR(255) | NOT NULL

4 avatar_url Duong dan anh | VARCHAR(255) Không có

đại diện

24

5 password Mật khẩu VARCHAR(255) | NOT NULL

6 isLive Trang thái trực | BIT NOT NULL

tiếp

7 role Phân quyền VARCHAR(20) | NOT NULL

Bang 3.1: Quan hé users

+ Bang Stream: Stream (stream_id, stream_name, description, status,

start_time, end_time, user_id)

Tân từ: mỗi dòng trong bang Stream tương ứng với từng luồng stream mà người

dùng tạo ra, gôm một mã sô stream_ 1d duy nhât đê phân biệt với các stream khác

STT | THUỘC TÍNH | MÔ TẢ KIEU DU LIEU | RÀNG BUỘC

| stream_id Mã số stream INT Khóa chính

2 stream_name Tén stream VARCHAR(255) | NOT NULL

3 description M6 ta stream VARCHAR(255) | Không có

4 status Trang thai phat | VARCHAR(255) | NOT NULL

25

+ Bang Category: Category (category_id, name, description)

Tân từ: mỗi dòng trong bang Category tương ứng với từng danh mục của stream

và video record, gồm một mã số category_¡d duy nhất dé phân biệt với các category

STT | THUỘC TÍNH | MÔ TẢ KIEU DU LIEU | RÀNG BUỘC

1 category_id Mã số category INT Khóa chính

2 name Tên category VARCHAR(255) | NOT NULL

3 description M6 ta category VARCHAR(255) | Không có

Bảng 3.3: Quan hệ Cafegory

+Bang Category_Stream: Category_ Stream (stream_id, category_ 1d)

Tân từ: quan hệ Category_Stream là mối quan hệ nhiều - nhiều của Category và

Stream, mỗi Stream có thể có nhiều Category và mỗi Category có thể thuộc về nhiều

Stream

STT | THUỘC TÍNH | MÔ TẢ KIEU DU LIỆU | RÀNG BUỘC

1 stream_id Mã số stream INT Liên kết đến

bảng Stream

2 category_id Mã số category INT Liên kết đến

bảng Category Bang 3.4: Quan hệ Category_Stream

+ Bang Follow: Follow (follow_id, follower_id, following_id)

Tân từ: mỗi dòng trong bang follow đại diện cho mối quan hệ theo dõi giữa một

user với một user khác, gôm một mã sô follow_id duy nhat.

26

STT | THUỘC TÍNH | MÔ TẢ KIEU DU LIỆU | RANG BUỘC

1 follow_id Mã sé follow INT Khóa chính

2 follower_1d Mã số người | INT Khóa ngoại

+ Bang Record_Video: Record_Video (record_1d, record_url, record_name,

start_time, end_time, stream_id)

Tân từ: mỗi dòng trong bang Record Video tương ứng với các thông tin của

một video được ghi lại sau khi kết thúc một buôi phát trực tiếp

STT | THUỘC TÍNH | MÔ TẢ KIEU DU LIỆU | RÀNG BUỘC

1 record_id Mã số video được | INT Khóa chính

ghi lại

2 record_name Tên video VARCHAR(255) |NOTNULL

3 record_ url Đường dẫn đến | VARCHAR(255) | NOT NULL

nơi chứa video

4 start_time Thoi gian bat dau | VARCHAR(255) | NOT NULL

ban ghi

27

5 end_time Thời gian kết thúc | VARCHAR(255) | NOT NULL

bản ghi

6 stream_id Mã số stream INT Khóa ngoại

lên kết đến

bảng Stream

Bảng 3.6: Quan hệ Record_ Video

3.2 Sơ đồ trường hợp sử dụng của ứng dụng (Use case diagram)

3.2.1 Use-case tong quát

Tìm kiếm phiên livestream và

streamer

Tham gia vao phong stream

Tạo phiên live stream mới es Cees >

hực hiện truyền trực tiếp thong

<<include>> ar :

Theo dõi streamer - <<include>>

Chia sẻ live stream

Thống kê dữ liệu

Hình 3.2: Usecase tổng quát

28

3.2.2 Danh sách các use-case của hệ thông

STT | Usecase

Usecase đăng nhập Người dùng đăng nhập vào hệ thống

Usecase đăng xuất Người dùng đăng xuất khỏi hệ thống

Usecase đăng ky Người dùng đăng ky tai khoản

Usecase tìm kiêm phiên | Người dùng truy cập vào hệ thông và tìm

livestream và streamer kiêm phiên livestream hoặc streamer tùy

thích

Usecase tham gia vào phòng | Người dùng lựa chọn phòng stream mình

stream thich va nhan tham gia

Usecase tao phiên livestream | Người dùng truy cập vào hệ thống và thực

mới hiện tạo phiên livestream mới

Usecase thực hiện truyền trực | Người dùng sau khi tạo phiên livestream thitiếp thông qua chia sẻ màn | chọn chế độ truyền trực tiếp thông qua chia

Usecase theo dõi streamer Người dùng theo dõi streamer yêu thích

Usecase chia sẻ live stream | Người dùng chia sẻ livestream lên các nên

- Mô tả: Người dùng nhập tên đăng nhập và mật khâu Hệ thống kiểm tra tính

hợp lệ của thông tin đăng nhập

- Điều kiện trước: Không có

- Điều kiện sau: Nếu đăng nhập thành công, hệ thống lưu thông tin đăng nhập,người dùng sẽ thực hiện được các tính năng của website Ngược lại, nếu đăng nhập

sai hệ thống sẽ báo đăng nhập không thành công

- Luông sự kiện:

Hành động của tác nhân Phản ứng của hệ thống

Truy cập website và ấn vào biểu tượng | Chuyển đến trang đăng nhập chứa form

đăng nhập đăng nhập gồm: tên đăng nhập, mật

khâu và nút “Đăng nhập”

30

Người dùng nhập tên đăng nhập và mật

khâu sau đó nhân nút “Đăng nhập”

Hệ thống tiến hành kiểm tra thông tin

người dùng nhập trong CSDL:

+ Nếu người dùng nhập đúng thì hệ

thống xác nhận thành công, người dùng

duoc sử dụng các tính năng của website

+ Nếu người dùng nhập sai thì hệ thống

báo lỗi và chờ người dùng nhập lại

Bang 3.8: Usecase đăng nhập

3.2.2.2 Usecase đăng xuất

- Tác nhân: Tat cả người dùng

- Mô tả: Người dùng đăng xuất khỏi tài khoản đang đăng nhập

- Điều kiện trước: Người dùng đã đăng nhập thành công vào hệ thống

- Điều kiện sau: Người dùng không được sử dụng các tính năng của website liênquan đến đăng nhập như tạo phiên livestream mới, chia sẻ màn hình, chỉnh sửa thông

tin livestream, trò chuyện trong phòng stream, theo dõi streamer, thống kê dữ liệu

- Luông sự kiện:

Hành động của tác nhân Phản ứng của hệ thống

Nhân vào biêu tượng người dùng trên

website và chọn đăng xuât

Hiển thị thông báo xác nhận đăng xuất

+ Nếu đồng ý thì quay lại màn hình đăng

nhập

+ Nếu không đồng ý thì tắt thông báo và

giữ nguyên trạng thái hiện tại

Bảng 3.9: Usecase đăng xuất

3l