(Đồ án hcmute) xây dựng mạng xã hội bằng mern stack

Mục đích của đề tài Mục đích chính của đề tài là vận dụng những gì đã tìm hiểu được từ tiểu luận chuyên ngành trước đó về MERN stack để phát triển thêm tính năng cho mạng xã hội, cụ thể

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK

GVHD: TS NGUYỄN THÀNH SƠN SVTH: NGUYỄN HOÀNG HUY

PHẠM NHỰT TRƯỜNG

S KL01 0 5 6 2

ccBỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

-

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK

GIÁO VIÊN HƯỚNG DẪN: TS NGUYỄN THÀNH SƠN

NHÓM SINH VIÊN THỰC HIỆN

NGUYỄN HOÀNG HUY 18110294 PHẠM NHỰT TRƯỜNG 18110385

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

-

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK

GIÁO VIÊN HƯỚNG DẪN: TS NGUYỄN THÀNH SƠN

NHÓM SINH VIÊN THỰC HIỆN

NGUYỄN HOÀNG HUY 18110294 PHẠM NHỰT TRƯỜNG 18110385

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự do – Hạnh Phúc

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Nguyễn Hoàng Huy MSSV 1: 18110294

Họ và tên Sinh viên 2: Phạm Nhựt Trường MSSV 2: 18110385

Ngành: Công nghệ thông tin

Tên đề tài: XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK

Họ và tên Giáo viên hướng dẫn: TS NGUYỄN THÀNH SƠN

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 202

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự do – Hạnh Phúc

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Nguyễn Hoàng Huy MSSV 1: 18110294

Họ và tên Sinh viên 2: Phạm Nhựt Trường MSSV 2: 18110385

Ngành: Công nghệ thông tin

Tên đề tài: XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK

Họ và tên Giáo viên phản biện: ThS LÊ THỊ MINH CHÂU

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 202

Giáo viên phản biện

(Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên, chúng em xin chân thành cảm ơn Thầy Nguyễn Thành Sơn, người đã trực tiếp giảng dạy, truyền đạt những kiến thức quý báu và tận tình giúp cho nhóm chúng

em trong suốt quá trình thực hiện đề tài

Chúng em cũng xin gửi lời cảm ơn sâu sắc đến tất cả giảng viên khoa Công Nghệ Thông Tin thuộc trường đại học Sư Phạm Kỹ Thuật thành phố Hồ Chí Minh đã dẫn dắt và tạo điều kiện cho chúng em hoàn thành khoá luận tốt nghiệp này

Với hạn chế về kinh nghiệm và thời gian, đồ án này sẽ không thể tránh được những thiếu sót Chúng em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của thầy để bọn em

có thể bổ sung và nâng cao kiến thức của mình nhằm phục vụ tốt hơn các đồ án sau này Xin chân thành cảm ơn

Tp Hồ Chí Minh, ngày 23 tháng 12 năm 2022 Nhóm sinh viên thực hiện

Nguyễn Hoàng Huy & Phạm Nhựt Trường

ĐH SƯ PHẠM KỸ THUẬT TP.HCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự do – Hạnh Phúc

ĐỀ CƯƠNG CHI TIẾT CỦA KHOÁ LUẬN

Họ và tên Sinh viên 1: Nguyễn Hoàng Huy MSSV 1: 18110294

Họ và tên Sinh viên 2: Phạm Nhựt Trường MSSV 2: 18110385

Ngành: Công nghệ thông tin Chuyên ngành: Hệ thống thông tin Thời gian thực hiện: Từ ngày 15/08/2022 đến ngày 23/12/2022

Tên đề tài: XÂY DỰNG MẠNG XÃ HỘI BẰNG MERN STACK

Họ và tên Giáo viên hướng dẫn: TS NGUYỄN THÀNH SƠN

NHIỆM VỤ CỦA KHOÁ LUẬN:

1 Tiếp tục tìm hiểu, nghiên cứu về công nghệ MERN STACK, bao gồm: MongoDB, ExpressJS, ReactJS và NodeJS

2 Kiểm tra, sửa lỗi, hoàn thành các chức năng và giao diện đã phát triển trong Tiểu Luận Chuyên Ngành

3 Tìm hiểu, phân tích các công nghệ, các API mới để áp dụng vào đề tài mạng xã hội và phát triển thêm các tính năng khác cho trang web như:

• Phát triển tính năng chặn từ ngữ tiêu cực bằng cách áp dụng công nghệ AI

• Phát triển tính năng tìm kiếm bằng giọng nói

• Thống kê lượt xem của hình ảnh, video và bài đăng

• Bổ sung tính năng trò chuyện nhóm

• Bổ sung tính năng gọi điện thoại và gọi điện video giữa các người dùng

KẾ HOẠCH THỰC HIỆN:

1 15/08/2022 - 30/09/2022 Lên kế hoạch thực hiện

2 2/10/2022 - 15/10/2022 Hoàn thành các tính năng cơ bản

3 16/10/2022 - 05/11/2022 Xây dựng tính năng tìm kiếm

bằng giọng nói, audio/video call

4 10/11/2022 - 03/12/2022

Xây dựng tính năng chặn nội dung tiêu cực, chat group, đếm lượt view

5 04/12/2022 - 23/12/2022 Hoàn hiện code, làm báo cáo

MỤC LỤC

DANH MỤC HÌNH 1

DANH SÁCH CÁC TỪ VIẾT TẮT 4

PHẦN 1: MỞ ĐẦU 5

1 Tính cấp thiết của đề tài 5

2 Mục đích của đề tài 5

3 Nhiệm vụ của đề tài 5

4 Cách tiếp cận và phạm vi nghiên cứu 6

5 Ý nghĩa khoa học và thực tiễn 6

PHẦN 2: NỘI DUNG 7

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 7

1.1 Giới thiệu về MERN Stack 7

1.2 MERN Stack hoạt động như thế nào? 19

1.3 Cấu trúc của một MERN Stack 20

1.4 Tại sao chọn MERN Stack 21

1.5 Xử lý tiếng nói 22

1.6 Nội dung tiêu cực 25

1.7 Audio / Video Call 28

CHƯƠNG 2: TÌM HIỂU VỀ CÁC MẠNG XÃ HỘI ĐANG HOẠT ĐỘNG 32

2.1 Facebook 32

2.2 Twitter 34

2.3 Instagram 36

2.4 TikTok 37

2.5 YouTube 39

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG THÔNG TIN DỰ ÁN WEBSITE MẠNG XÃ HỘI 42

3.1 Đặc tả đề tài 42

3.2 Mô hình Usecase 43

3.3 Thiết kế thành phần dữ liệu 46

3.4 Phân tích thiết kế thành phần chức năng 53

3.5 Phân tích, thiết kế giao diện và chức năng của giao diện đó 57

CHƯƠNG 4: CÀI ĐẶT DEMO 66

4.1 Các yêu cầu về môi trường cài đặt và phiên bản phần mềm 66

4.2 Tổ chức mã nguồn chương trình 66

4.3 Cài đặt Server 67

4.4 Cài đặt Client 68

4.5 Cài đặt Admin 70

PHẦN 3: KẾT LUẬN 71

1 Kết quả đạt được 71

2 Hạn chế 71

3 Hướng phát triển 71

DANH MỤC TÀI LIỆU THAM KHẢO 72

PHỤ LỤC 1: HƯỚNG DẪN CÀI ĐẶT ĐỂ CHẠY ỨNG DỤNG LOCAL 74

PHỤ LỤC 2: HƯỚNG DẪN SỬ DỤNG DEMO 75

DANH MỤC HÌNH

Hình 1 Tải về NodeJS 9

Hình 2 Chạy file cài đặt NodeJS 9

Hình 3 Cấu hình NodeJS 10

Hình 4 Chấp nhận điều khoản cài đặt NodeJS 10

Hình 5 Chọn thư mục cài đặt NodeJS 11

Hình 6 Cài đặt npm 11

Hình 7 Hoàn thành cài đặt NodeJS 12

Hình 8 Kiểm tra việc cài đặt NodeJS 12

Hình 9 Tạo thư mục cần cài đặt ExpressJS 14

Hình 10 Khởi tạo các tệp ban đầu cho ứng dụng ExpressJS 14

Hình 11.Cài đặt ExpressJS bằng lệnh 14

Hình 12 Tạo thư mục chứa ứng dụng ReactJS 16

Hình 13 Cài đặt ReactJS bằng lệnh 17

Hình 14 Kiến trúc của MERN Stack 19

Hình 15 Mô hình Transfer Leaning 23

Hình 16 Áp dụng mô hình xử lí tiếng nói vào đề tài 24

Hình 17 Giao diện tìm kiếm giọng nói 25

Hình 18 Ví dụ về chia sẻ dữ liệu của peerjs 30

Hình 19 Ví dụ về cuộc gọi audio/video của peerjs 31

Hình 20 Facebook 32

Hình 21 Twitter 34

Hình 22 Instagram 36

Hình 23 TikTok 37

Hình 24 YouTube 39

Hình 25 Usecase tổng quan 44

Hình 26 UseCase đăng ký 44

Hình 27 UseCase đăng nhập 44

Hình 28 UseCase quản lý người dùng 45

Hình 29 UseCase quản lý bài đăng 45

Hình 30 UseCase bài đăng 45

Hình 31 UseCase bạn bè 46

Hình 32 Sequence diagram đăng nhập 53

Hình 33 Sequence diagram đăng ký 54

Hình 34 Sequence diagram quản lý người dùng và bài viết 54

Hình 35 Sequence diagram tương tác bài viết 55

Hình 36 Sequence diagram quản lý bạn bè 56

Hình 38 Giao diện đăng nhập admin 57

Hình 39 Giao diện quản lý người dùng 57

Hình 40 Giao diện xem thông tin người dùng 58

Hình 41 Giao diện quản lý bài đăng 58

Hình 42 Giao diện xem thông tin bài đăng 59

Hình 43 Giao diện đăng nhập client 60

Hình 44 Giao diện đăng ký client 60

Hình 45 Giao diện trang chủ 61

Hình 46 Giao diện hộp thoại bài đăng 61

Hình 47 Giao diện trang cá nhân 62

Hình 48 Giao diện bạn bè 62

Hình 49 Giao diện các chức năng của bài đăng 63

Hình 50 Giao diện tìm kiếm người dùng 63

Hình 51 Giao diện tìm kiếm người dùng bằng giọng nói 64

Hình 52 Giao diện nhắn tin 64

Hình 53 Giao diện thông báo 65

Hình 54 Giao diện tạo một cuộc trò chuyện nhóm mới 65

Hình 55 Tổ chức mã nguồn chương trình 66

Hình 56 Tổ chức thư mục và tệp của Server 67

Hình 57 Kết nối với MongoDB atlas 68

Hình 58 Cấu hình biến kết nối với mongodb 68

Hình 59 Tổ chức thư mục và tệp của Client 69

Hình 60 Tổ chức thư mục và tệp của Admin 70

DANH MỤC BẢNG

Bảng 1 Một số câu lệnh cơ bản trên MongoDB 18

Bảng 2 Các chức năng lớn của ứng dụng 43

Bảng 3 Tổng quan các mô hình UseCase 43

Bảng 4 Bảng USERS 48

Bảng 5 Bảng POSTS 48

Bảng 6 Bảng NOTIFIES 49

Bảng 7 Bảng CONVERSATIONS 50

Bảng 8 Bảng COMMENTS 50

Bảng 9 Bảng MESSAGE 51

Bảng 10 Bảng REPORTS 52

Bảng 11 Bảng GROUPCONVERSATIONS 52

Bảng 12 Bảng GROUPMESSAGES 53

DANH SÁCH CÁC TỪ VIẾT TẮT

PHẦN 1: MỞ ĐẦU

1 Tính cấp thiết của đề tài

Sự phát triển của khoa học và công nghệ đã mang lại những thay đổi to lớn cho xã hội loài người Tất cả những đột phá về công nghệ đều đặt nền móng cho việc phát triển các hình thức truyền thông mới Công nghệ mới mang lại phong cách và mô hình giao tiếp mới Khi Internet bùng nổ, các hình thức truyền thông mới đang thu hút lượng khán giả ngày càng lớn hơn Người dùng Internet (đặc biệt là giới trẻ) bắt đầu tìm kiếm một nơi đáp ứng mọi nhu cầu về thông tin, giải trí, kết nối… và mạng xã hội ra đời đáp ứng gần như hoàn hảo những nhu cầu này Hiện nay trên thế giới có hàng trăm mạng xã hội khác nhau như Facebook, YouTube, Twitter và Instagram

Trong thời đại của cái gọi là “thế giới phẳng” này, chúng ta không thể phủ nhận những tiện ích của mạng xã hội, đặc biệt là trong giới trẻ Có rất nhiều tiện ích mà mạng xã hội mang lại cho người dùng: Thông tin nhanh, lượng thông tin lớn được cập nhật liên tục, nhiều chương trình giải trí Ngoài ra còn có một khía cạnh quan trọng tạo ra sự thay đổi hình thức giao tiếp giữa các nhóm và các quốc gia với nhau, đó là tính năng kết nối Có thể nói, đó là không gian giao tiếp công cộng phi vật thể tạo ra phương thức kết nối mọi người

dễ dàng nhất, thuận tiện nhất và nhanh nhất thông qua nhiều hình thức và kết nối không bị ràng buộc bởi không gian và thời gian Do đó, lượng thông tin được chia sẻ là rất lớn, rất phong phú và đa dạng Vì vậy, số lượng người sử dụng mạng xã hội ngày càng tăng

2 Mục đích của đề tài

Mục đích chính của đề tài là vận dụng những gì đã tìm hiểu được từ tiểu luận chuyên ngành trước đó về MERN stack để phát triển thêm tính năng cho mạng xã hội, cụ thể được nói đến là tính năng tìm kiếm bằng giọng nói, chặn nội dung tiêu cực và một số tính năng như chat group, audio/video call, đếm view

3 Nhiệm vụ của đề tài

Các nhiệm vụ chính cần thực hiện trong đề tài:

- Trình bày cơ sở lý thuyết về các công nghệ sử dụng

- Tìm hiểu, phân tích và thiết kế hệ thống của một website mạng xã hội

- Phân tích các tính năng mới và áp dụng vào đề tài

4 Cách tiếp cận và phạm vi nghiên cứu

Đối tượng nghiên cứu đề tài là những tác động (tích cực và tiêu cực) của mạng xã hội đến giới trẻ về nhu cầu, thói quen thu thập, tiếp nhận, kết nối, trao đổi, chia sẻ và truyền phát thông tin

Bên cạch đó ta còn nghiên cứu những công nghệ, những tính năng và cách thức mà một website mạng xã hội duy trì và hoạt động Để có thể nghiên cứu sâu thì chúng em tham khảo theo các mạng xã hội điển hình như là Instagram và YouTube

5 Ý nghĩa khoa học và thực tiễn

Thứ nhất về khía cạnh khoa học, đề tài sẽ giúp ta hiểu được công nghệ MERN stack cũng như cách mà một mạng xã hội hoạt động, bên cạnh đó luận văn góp thêm một góc nhìn về những ảnh hưởng của mạng xã hội đến giới trẻ sau sự phát triển bùng nổ của mạng

xã hội phổ biến hiện nay

Về giá trị thực tiễn, đề tài sẽ nêu chi tiết cách mà một trang web mạng xã hội hoạt động cũng như quy trình và công nghệ tạo ra nó

PHẦN 2: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1 Giới thiệu về MERN Stack

1.1.1 MERN Stack là gì?

MERN stack là sự kết hợp của các công nghệ phổ biến nhất hiện nay và các công nghệ này đều liên quan đến JavaScript như MongoDB, ExpressJS, ReactJS, NodeJS Lập trình viên thường dùng MERN stack để xây dựng ứng dụng React Universal [1]

1.1.2 NodeJS là gì?

a Giới thiệu NodeJS

NodeJS là một mã nguồn mở, một môi trường được thiết kế để viết các ứng dụng mạng có khả năng mở rộng, đặc biệt là máy chủ web NodeJS được viết bằng ngôn ngữ JavaScript và có thể chạy trên các hệ điều hành như Mac OS X, Windows, Linux, FreeBSD

và IBM i

b Lịch sử ra đời

Năm 2009, NodeJS được viết bởi lập trình viên Ryan Dahl Ban đầu chỉ có hệ điều hành Linux và MacOS X mới được hỗ trợ Ngoài ra, Ryan Dahl cũng là người phát triển và bảo trì NodeJS (được tài trợ bởi Joyent)

Tháng 1 năm 2010, trình quản lí gói npm cho NodeJS được ra mắt

Tháng 6 năm 2011, phiên bản Windows gốc của NodeJS được triển khai bởi Microsoft và Joyent

Tháng 12 năm 2014, do sung đột nội bộ nên NodeJS bị chia rẽ, IO.js được hình thành

Tháng 6 năm 2015, cộng đồng IO.js và cộng đồng NodeJS đã thống nhất bỏ phiếu

để hợp tác với nhau dưới dạng NodeJS Foundation

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

Ưu điểm:

Tất cả đều viết bằng JavaScript: với NodeJS thì JavaScript có thể viết trên server Khả năng mở rộng: NodeJS có khả năng mở rộng cao và tốc độ xây dựng ứng dụng nhanh, đó là nhờ vào kiến trúc Event Loop

Công nghệ Web thời gian thực: Các công nghệ thời gian hiện nay rất phổ biến Chẳng hạn như công nghệ WebSocket đã làm cho các ứng dụng web gần như không có độ trễ Chính những công nghệ này đã giúp cho NodeJS có thể xử lý một lượng kết nối khổng lồ

Hiệu năng: NodeJS sử dụng engine V8 của Google cùng với non-blocking IO thì việc tạo một trang web với tốc độ xử lí nhanh là điều vô cùng dễ dàng

Nhược điểm:

NodeJS gây tiêu tốn cả về thời gian lẫn tài nguyên CPU Nodejs được viết bằng JavaScript và C++ đo đó cần phải trải qua một quá trình biên dịch khi xử lí Lập trình viên không nên sử dụng NodeJS cho những ứng dụng tiêu tốn tài nguyên CPU

NodeJS không khác nhiều so với các ngôn ngữ khác như Python, Ruby hay PHP Lập trình viên có thể chọn NodeJS cho việc phát triển các ứng dụng mới Tuy nhiên, NodeJS không phải là một lựa chọn sáng suốt khi xây dựng, triển khai các dự án quan trọng [2]

d Ứng dụng trong đề tài

Hệ thống Notification: thông báo cho người dùng tương tự các mạng xã hội hiện hành như Facebook hay Instagram

WebSocket server: cung cấp giao thức giao tiếp hai chiều mạnh mẽ do có độ trễ thấp

và dễ dàng xử lý khi xảy ra lỗi WebSocket được sử dụng cho những trường hợp yêu cầu thời gian như trong trò chuyện

Ứng dụng truy vấn tới cơ sở dữ liệu NoSQL: với cơ sở dữ liệu MongoDB thì NodeJS

là sự lựa chọn hoàn hảo vì nó có nhiều thư viện hỗ trợ mạnh

Fast File Upload Client: dùng để upload file tốc độ cao

e Cài đặt NodeJS

Download NodeJS: Vào trang chủ của NodeJS: https://nodejs.org/en/download/

Hình 1 Tải về NodeJS

Sau khi download thành công ta có 1 file như hình dưới:

Hình 2 Chạy file cài đặt NodeJS

Cài đặt NodeJS: Chấp nhận các tùy chọn mặc định, nhấn tiếp theo cho tới bước cuối cùng và nhấn hoàn thành

Hình 3 Cấu hình NodeJS

Hình 4 Chấp nhận điều khoản cài đặt NodeJS

Hình 5 Chọn thư mục cài đặt NodeJS

Phần mềm quản lý các thư viện JavaScript cũng được cài đặt theo mặc định

Hình 6 Cài đặt npm

Hình 7 Hoàn thành cài đặt NodeJS

Kiểm tra và cấu hình: Nhập lần lượt các lệnh như bên dưới trong CMD để kiểm tra

phiên bản của NodeJS và npm package:

Hình 8 Kiểm tra việc cài đặt NodeJS

Như vậy là đã cài đặt thành công NodeJS trên window [3]

1.1.3 ExpressJS là gì?

a Giới thiệu ExpressJS

ExpressJS là một framework mã nguồn mở miễn phí dành cho NodeJS ExpressJS được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng

Do ExpressJS chỉ yêu cầu ngôn ngữ lập trình JavaScript nên góp phần giúp các lập trình viên và nhà phát triển xây dựng các ứng dụng web và API dễ dàng hơn

b Lịch sử phát triển

ExpressJS là một framework mã nguồn mở, miễn phí dành cho NodeJS vì vậy hầu hết các đoạn code đã được viết sẵn cho các lập trình viên có thể làm việc ExpressJS giúp các nhà phát triển dễ dàng tạo các ứng dụng đơn web, đa web hoặc kết hợp ExpressJS tương đối nhẹ, giúp cho việc tổ chức các ứng dụng web theo kiến trúc MVC có tổ chức hơn

Lập trình viên cần phải biết về JavaScript và HTML để sử dụng được ExpressJS ExpressJS cũng là một phần của công nghệ giúp quản lý các ứng dụng web một cách dễ dàng hơn hay còn được gọi là MEAN stack

Nhờ có ExpressJS, các nhà lập trình có thể xây dựng nên các ứng dụng web hiệu quả và nhanh chóng hơn Trên thực tế, lập trình viên sẽ phải thực hiện rất nhiều bước lập trình phức tạp để có thể tạo ra một API hiệu quả nếu như không có ExpressJS ExpressJS

đã đơn giản hóa việc lập trình trong NodeJS và bổ sung thêm nhiều tính năng mới

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

Ưu điểm

Mức độ phổ biến của JavaScript: ngày nay, JavaScript là một ngôn ngữ lập trình được sử dụng rộng rãi, dễ đọc và có một cộng đồng người dùng lớn Việc sử dụng ExpressJS

sẽ trở nên vô cùng đơn giản nếu đã biết JavaScript từ trước do ExpressJS hỗ trợ JavaScript

Phát triển trang web nhanh hơn: Do Express có nhiều tính năng hỗ trợ khác nhau giúp giảm một nửa thời gian viết mã và giảm những áp lực cần thiết khi xây dựng mà vẫn giữ tính hiệu quả của ứng dụng web

Hỗ trợ định tuyến: ExpressJS giúp việc xây dựng các thành phần định tuyến ít tốn thời gian nhưng lại hiệu quả và đơn giản hơn

Nhược điểm:

ExpressJS phù hợp với các dự án có quy mô nhỏ: với ExpressJS ta có thể xây đựng website một cách nhanh chóng nhưng để xây dựng những dự án lớn có độ phức tạp cao thì đây không là lựa chọn phù hợp [4]

d Ứng dụng trong đề tài

Các chức năng của ExpressJS được sử dụng trong đề tài:

- Cấu hình các lớp trung gian để trả về các HTTP request

- Cho phép sử dụng với các hành động khác nhau dựa trên các phương thức HTTP và URL bằng define router

- Trả về các trang HTML dựa vào các tham số

e Cài đặt ExpressJS

Lưu ý: cần phải có NodeJS trước để có thể cài đặt và sử dụng ExpressJS

Mở CMD ở thư mục cần tạo ứng dụng ExpressJS:

Hình 9 Tạo thư mục cần cài đặt ExpressJS

Sử dụng lệnh như hình dưới để khởi tạo các tệp ban đầu cho ứng dụng:

Hình 10 Khởi tạo các tệp ban đầu cho ứng dụng ExpressJS

Cuối cùng là cài đặt ExpressJS bằng câu lệnh như hình dưới [5]

Hình 11.Cài đặt ExpressJS bằng lệnh

1.1.4 ReactJS là gì?

a Giới thiệu ReactJS

React là một trong những thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI) React sử dụng phương pháp mới để render trang web nên cung cấp khả năng phản hồi tốt hơn khi có input từ người dùng

Components của react là một công cụ JavaScript mã nguồn mở được phát triển bởi Facebook và được ra mắt vào năm 2014 React hiện tại thì vượt trội so với các đối thủ cạnh tranh lớn như Angular và Bootstrap (hai thư viện JavaScript bán chạy nhất vào thời điểm đó)

b Lịch sử phát triển

ReactJS được hiểu nôm na là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở Mục đích của việc tạo ReactJS là tạo ra các ứng dụng web nhanh, hiệu quả và viết ít code

Hiện tại, Facebook và toàn bộ nhóm phát triển ReactJS vẫn đang làm việc để cải thiện hiệu quả của ReactJS Đây là một trong những yêu cầu để cho thấy tốc độ phát triển đáp ứng nhanh như thế nào và vượt trội so với các framework khác như Vue.Js

React được sử dụng bởi hàng trăm công ty hàng đầu trên thế giới, bao gồm Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay, Instagram

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

Nhược điểm

ReactJS chỉ phục vụ cho tầng View do chỉ là View Library (không phải MVC framework) Đo dó React sẽ không có phần Model và Controller, 2-way binding hay là Ajax

Yêu cầu cần phải cấu hình lại khi tích hợp vào các framework MVC truyền thống

Có dung lượng nặng so với cái thư viện khác

Khó tiếp cận cho người mới học [6]

d Ứng dụng trong đề tài

ReactJS kết hợp với Redux để tạo nên front end

Redux: Là một thành phần quan trọng trong react, được dùng để quản lí các state

e Cài đặt ReactJS

Lưu ý: cần phải có NodeJS trước để có thể cài đặt và sử dụng React

Tạo thư mục cần chứa ứng dụng react và mở CMD:

Hình 12 Tạo thư mục chứa ứng dụng ReactJS

Gõ câu lệnh như hình để tạo ứng dụng react

NoSQL (None-Relational SQL hay Not-Only SQL) là 1 dạng cơ sở dữ liệu mã nguồn

mở NoSQL có kiểu dữ liệu JSON, dạng dữ liệu theo kiểu key và value và được phát triển trên JavaScript Framework

NoSQL ra đời để khắc phục những hạn chế của cơ sở dữ liệu quan hệ về tốc độ, tính năng, khả năng mở rộng, NoSQL cho phép tạo cơ sở dữ liệu mà không cần quan tâm đến khoá chính, khoá ngoại hay ràng buộc NoSQL chọn hiệu suất nhanh và khả năng mở rộng thay vì tính toàn vẹn của dữ liệu hay transaction

NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn chẳng hạn như Facebook phát triển và sử dụng Cassandra, Google phát triển và sử dụng BigTable,

b MongoDB:

MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở, được nhiều người dùng MongoDB là một cơ sở dữ liệu hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như cơ sở dữ liệu quan hệ nên truy vấn sẽ rất nhanh

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định [10]

c Một số câu lệnh cơ bản trên MongoDB

Tạo csdl CREATE DATABASE test; use test;

Tạo bảng CREATE TABLE students

(ten_cot - kieu_du_lieu); db.createCollection('students');

Tạo bản ghi INSERT INTO studetns ('name',

'gender') VALUES ('thanh', 'male');

db.students.insert ({name:'thanh', gender: 'male'});

Cập nhật UPDATE students SET name =

'thanh update' WHERE id = 1;

db.students.update ({_id: 1}, {$set:{ name: 'thanh update' }});

Xóa bản ghi DELETE FROM students Where

Tìm kiếm all SELECT * FROM students; db.students.find ({});

Tìm kiếm SELECT * FROM students

WHERE name = 'thanh'; db.students.find ({name: 'thanh' });

Bảng 1 Một số câu lệnh cơ bản trên MongoDB

d Ưu điểm của MongoDB

- Mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên

- Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau nên khi thực hiện lệnh thêm xoá sửa xem thì không cần kiểm tra ràng buộc như cơ sở dữ liệu quan hệ

- MongoDB rất dễ mở rộng theo chiều ngang (Horizontal Scalability) Cluster là một cụm các node chứa dữ liệu giao tiếp với nhau, lập trình viên chỉ cần thêm một node mới vào cluster khi cần mở rộng

- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) nhằm tăng tốc độ truy vấn

- Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng

- Hiệu năng cao: MongoDB có tốc độ truy vấn cao hơn nhiều so với cơ sở dữ liệu quan hệ

e Nhược điểm của MongoDB

- Khi thao tác trong MongoDB cần phải thận trọng do không có tính ràng buộc như trong cơ sở dữ liệu quan hệ

- Dữ liệu được lưu dưới dạng key-value nên trong các collection khác về value do

đó key sẽ bị lặp lại, dẫn đến tốn bộ nhớ

- Không hỗ trợ join nên dữ liệu dễ bị dư thừa

- MongoDB cần 60 giấy để ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng, dễ gây ra tình trạng mất dữ liệu

f Khi nào nên dùng MongoDB

Khi các ứng dụng có hệ thống thời gian thực đòi hỏi phản hồi nhanh, các dự án big data yêu cầu truy vấn nhanh hay các hệ thống có lượng phản hồi lớn thì nên ưu tiên sử dụng MongoDB thay cho các cơ sở dữ liệu quan hệ Tuy nhiên, lập trình viên cần xem xét tuỳ theo dự án và trường hợp cụ thể để sử dụng cơ sở dữ liệu quan hệ hay MongoDB nhằm đem lại hiệu quả cao

1.2 MERN Stack hoạt động như thế nào?

MERN cho phép chúng ta dễ dàng xây dựng kiến trúc 3 tầng (frontend, backend, database) hoàn toàn sử dụng JavaScript và JSON

Hình 14 Kiến trúc của MERN Stack

1.2.1 React.js Front End

Tầng trên cùng của MERN Stack là React.js, khung JavaScript khai báo để tạo các ứng dụng phía máy khách trong HTML React cho phép chúng ta xây dựng các giao diện phức tạp thông qua các Components, kết nối chúng với dữ liệu trên máy chủ backend của bạn và hiển thị chúng dưới dạng HTML

1.2.2 ExpressJS and NodeJS Server

Tầng tiếp theo là framework ExpressJS phía máy chủ, nó chạy bên trong máy chủ NodeJS ExpressJS có các mô hình mạnh mẽ để định tuyến URL (khớp URL đến với một chức năng của máy chủ) và xử lý các yêu cầu và phản hồi HTTP

Bằng cách thực hiện các HTTP XML Requests (XHR) hoặc GETs hoặc POSTs từ React.js front-end, chúng ta có thể kết nối với các hàm ExpressJS cung cấp quyền chi phối cho ứng dụng Các chức năng đó lần lượt sử dụng trình điều khiển NodeJS của MongoDB, hoặc thông qua lệnh gọi lại để sử dụng Promises, để truy cập và cập nhật dữ liệu trong cơ

sở dữ liệu MongoDB

1.2.3 MongoDB Database

Cơ sở dữ liệu đó là MongoDB: Các tài liệu JSON được tạo trong React.js front-end được gửi đến máy chủ ExpressJS, nơi chúng có thể được xử lý và được lưu trữ trực tiếp trong MongoDB để truy xuất sau này MongoDB có thể được lưu dưới dạng local trên máy hoặc trên cloud bằng MongoDB Atlas [8]

1.3 Cấu trúc của một MERN Stack

- Webpack Configs: MERN sử dụng Webpack cho việc bundle mô-đun Có bốn loại cấu

hình Webpack cung cấp webpack.config.dev.js (cho development), webpack.config.prod.js (cho production), webpack.config.server.js (cho bundling server in production) và webpack.config.babel.js (dành cho babel-plugin-webpack-loaders cho việc render các assets được đưa vào thông qua webpack)

- Server: khởi tạo server

- Server-Side Rendering: sử dụng chức năng phù hợp của React Router để xử lý tất cả các yêu cầu trang để lịch sử trình duyệt có thể hoạt động tốt

- Client: chứa tất cả các components, các routes, các module

- Components: chứa các components phổ biến, hay sử dụng lại

- Index.js: hiển thị phía client

- Modules: chứa các modules chuyên biệt cho từng úng dụng

- Node_modules: chứa các package được cài đặt qua npm

- Controllers: chứa các chức năng chính của ứng dụng [9]

1.4 Tại sao chọn MERN Stack

MERN Stack được tạo ra để cung cấp quá trình phát triển mượt mà hơn Nó là một nhóm các framework, cơ sở dữ liệu và môi trường thời gian chạy dựa trên JavaScript Công nghệ này cung cấp một khuôn khổ end-to-end cho các nhà phát triển và nó đang trở nên phổ biến nhanh hơn

Lợi ích của việc chọn MERN Stack:

• Toàn bộ hệ thống của MERN Stack, bao gồm front-end, back-end và cơ sở dữ liệu, đều sử dụng API REST, có thể tái sử dụng cho bất kỳ ứng dụng nào khác:

di động, web… rất đơn giản Các API REST dựa trên HTTP và bắt chước các phong cách giao tiếp web, vì vậy, việc kết nối lớp với nhau trong MERN rất dễ dàng và thuận lợi

• MERN Stack được sử dụng NodeJS, là một ngôn ngữ không đồng bộ, vì vậy hiệu suất của nó rất ấn tượng so với mức trung bình của các ngôn ngữ khác Back-end nhanh chóng có nghĩa là người dùng ứng dụng web của bạn sẽ có quyền truy cập vào dữ liệu của họ nhanh hơn nhiều và điều đó rất cạnh tranh Điều này rất quan trọng trong thời đại của chúng ta, đó là người dùng có ít kiên nhẫn hơn khi đợi tải một trang web

• MERN Stack dựa trên React.js và React.js dựa trên một ứng dụng trang duy nhất

là một trang web không yêu cầu tải lại trang khi sử dụng Ứng dụng web một trang cải thiện trải nghiệm của người dùng bằng cách tìm nạp trước nội dung từ máy chủ, giúp giảm thời gian chờ đợi Nó sẽ giúp người dùng cảm nhận rõ ràng

sự thoải mái và dễ dàng khi sử dụng mạng xã hội Đối với một trang web thương mại điện tử, loại trải nghiệm linh hoạt và được tối ưu hóa này là điều cần thiết để chống lại các đối thủ cạnh tranh

và phần mềm thân thiện hơn và tăng năng suất

Một micrô được sử dụng để thu âm thanh, và sau đó nó được chuyển đổi từ âm thanh tương tự sang âm thanh kỹ thuật số bằng cách lấy mẫu tại khoảng thời gian đó Khi chúng

ta lấy mẫu âm thanh, chúng ta đo biên độ hoặc công suất của âm thanh, với tốc độ lấy mẫu

cụ thể Sau đó, chúng ta có thể lấy thông tin này và biểu diễn tín hiệu bằng đồ họa dưới dạng dạng sóng

Những điều cơ bản của việc xây dựng một mô hình học máy âm thanh, từ việc hiểu

âm thanh tương tự sẽ như thế nào khi chuyển đổi thành âm thanh kỹ thuật số, để tạo hình ảnh phổ của các tệp Ta sử dụng bộ dataset chứa các bình luận, các từ ngữ tiêu cực, bạo lực, phân tích các lớp, xem xét các cách để hiểu và trực quan hóa dữ liệu âm thanh và tạo phổ hình ảnh dựa trên âm thanh Từ đó sử dụng mạng thần kinh tích chập để xây dựng mô hình

và sử dụng phổ hình ảnh để đào tạo nó

Có một số kỹ thuật để thực hiện các mô hình nhận dạng giọng nói Một trong những

kỹ thuật mới nổi là sử dụng các mạng lưới thần kinh với việc học sâu để nhận dạng giọng nói

a Tool used: Teachable Machine

Teachable Machine is Google's AutoML (automated machine learning), một công

cụ dựa trên web làm việc tạo nhanh các mô hình học máy, dễ dàng và dễ tiếp cận với mọi người Các mô hình có thể được tạo để phân loại hình ảnh, âm thanh hoặc thậm chí tư thế

b Teachable Machine operating principle

Teachable Machine sử dụng Tensorflow.js, thư viện máy học dựa trên nền tảng JavaScript, để đào tạo và chạy các mô hình bạn tạo trong trình duyệt web của mình

Những mô hình này sử dụng một kỹ thuật gọi là Transfer-Learning Có một mạng lưới thần kinh được đào tạo trước và khi bạn tạo các class, có thể hiểu rằng các class của

bạn trở thành last layer hoặc bước trong mạng lưới thần kinh Cụ thể, các mô hình hình ảnh

và âm thanh học hỏi từ các mô hình mạng được đào tạo trước

Transfer learning là quá trình thực hiện một mô hình được đào tạo trước đây trên một Dataset (giả sử, bộ dữ liệu A) và áp dụng nó cho một tập dữ liệu khác (giả sử, tập dữ liệu B) Để thực hiện Transfer learning, mô hình phải được sửa đổi một chút và được đào tạo lại trên bộ dữ liệu B Tuy nhiên, vì khóa đào tạo về bộ dữ liệu gốc (A), đào tạo về bộ

dữ liệu mới(B) mất ít thời gian và tài nguyên tính toán hơn và yêu cầu một lượng dữ liệu nhỏ hơn nhiều so với bản gốc Dataset Quá trình sửa đổi bao gồm loại bỏ top dense layer - lớp dày đặc (đầu ra) của mô hình ban đầu và giữ "base" của mô hình Do đào tạo trước đó,

cơ sở có thể được sử dụng như một trình trích xuất tính năng tốt cho tất cả dữ liệu như dữ liệu đào tạo ban đầu Lớp dày đặc bị xóa được thay thế bằng một lớp dày đặc mới được cấu hình cụ thể đối với bộ dữ liệu mới

Hình 15 Mô hình Transfer Leaning

1.5.2 Hướng dẫn cài đặt

Sử dụng lệnh

npm install react-speech-recognition

Sau đó import vào component

import SpeechRecognition, {useSpeechRecognition} from 'react-speech-recognition';

1.5.3 Nguyên lý hoạt động

useSpeechRecognition là một function để truy cập vào transcript của đoạn phát

biểu cũng như lời nói của người dùng vào microphone [18]

Một số thuộc tính cơ bản như:

- transcript: là đoạn text nhận được khi nói vào micro

- resetTranscript: là function reset lại giá trị của transcript về null

SpeechRecognition quản lí các giá trị state toàn cục của Speech API, cũng như các

chức năng bật và tắt micro như:

- startListening(): kích hoạt Web Speech API bật mic, để lắng nghe âm thanh thu

được từ micro và chuyển thành giá trị string lưu vào transcript

- stopListening(): kích hoạt Web Speech API bật mic, nhưng sẽ vẫn duy trì những

tiến trình nhận diện speech cho tới khi nó kết thúc

- browserSupportsSpeechRecognition(): check xem browser có đủ tiêu chuẩn để

được nó hỗ trợ hay không

- listening(): check xem Web Speech API có đang lắng nghe những gì bạn nói từ

micro hay không [19]

Để nghe một ngôn ngữ cụ thể, bạn có thể chuyển thẻ ngôn ngữ (ví dụ: đối với tiếng Việt) khi gọi:

SpeechRecognition.startListening({ language: vi-VN' })

1.5.4 Áp dụng

Hình 16 Áp dụng mô hình xử lí tiếng nói vào đề tài

Ở giao diện tìm kiếm bằng giọng nói, có thể chọn 2 ngôn ngữ: Tiếng việt, Tiếng Anh

Hình 17 Giao diện tìm kiếm giọng nói

1.6 Nội dung tiêu cực

1.6.1 Cơ sở lý thuyết

Toxicity model phát hiện xem văn bản có chứa nội dung độc hại như ngôn ngữ đe dọa, lăng mạ, tục tĩu, thù hận dựa trên danh tính hoặc ngôn ngữ khiêu dâm hay không Mô hình đã được đào tạo trên tập dữ liệu nhận xét dân sự: https://figshare.com/articles/data_json/7376747 chứa ~ 2 triệu bình luận được dán nhãn cho độc tính Mô hình được xây dựng dựa trên Bộ mã hóa câu phổ quát (Cer và cộng sự, 2018)

Nói với việc phát hiện ngôn ngữ toxic trong một bộ sưu tập các bình luận trực tuyến Đối với mỗi nhận xét được cung cấp, vui lòng chọn mức độ toxic có trong nhận xét Khi xếp hạng một nhận xét, vui lòng sử dụng các định nghĩa sau làm mẫu:

- Rất độc hại - một nhận xét rất đáng ghét, hung hăng, thiếu tôn trọng hoặc rất có khả năng khiến người dùng rời khỏi cuộc thảo luận hoặc từ bỏ việc chia sẻ quan điểm của họ

- Độc hại - một nhận xét thô lỗ, thiếu tôn trọng, không hợp lý hoặc có phần có khả năng khiến người dùng rời khỏi cuộc thảo luận hoặc từ bỏ việc chia sẻ quan điểm của họ

- Hơi độc hoặc khó nói

- Không độc hại

Ngoài ra, chúng em cũng quan tâm đến việc xác định xem nhận xét có chứa ngôn từ tục tĩu, nội dung khiêu dâm, các cuộc tấn công dựa trên danh tính, ngôn từ đe dọa và lăng

mạ hay không Vui lòng sử dụng các định nghĩa sau làm mẫu:

- Ngôn từ tục tĩu/tục tĩu: Chứa các từ chửi thề, lời nguyền rủa hoặc ngôn ngữ tục tĩu hoặc tục tĩu khác

- Rõ ràng về tình dục: Chứa nội dung đề cập đến các hành vi tình dục hoặc các bộ phận cơ thể theo cách tình dục hoặc nội dung dâm dục khác

- Tấn công dựa trên danh tính: Nhận xét tiêu cực, phân biệt đối xử hoặc thù địch

về một người hoặc một nhóm người dựa trên các tiêu chí bao gồm (nhưng không giới hạn) chủng tộc hoặc dân tộc, tôn giáo, giới tính, quốc tịch hoặc quốc tịch, khuyết tật, tuổi tác hoặc khuynh hướng tình dục

- Xúc phạm: Bình luận lăng mạ, kích động hoặc tiêu cực đối với một người hoặc một nhóm người

- Đe dọa: mô tả mong muốn hoặc ý định gây đau đớn, thương tích hoặc bạo lực đối với một cá nhân hoặc một nhóm người

Một bộ chú thích được cung cấp với:

- Một vài ví dụ train

- Một nhận xét để đánh giá

- Một câu hỏi về việc liệu một nhận xét có phải bằng tiếng Anh hay không

- Một câu hỏi về mức độ độc tính có trong bình luận

- Một tập hợp các câu hỏi về các thuộc tính khác nhau của nhận xét, cho biết họ cảm thấy mạnh mẽ như thế nào về nó trên thang điểm 3 (2: Có, có * thuộc tính

&; 1: khó nói hoặc chỉ có một chút thuộc tính; 0: Không thuộc tính)

Ví dụ câu trả lời từ một rater

o Tấn công dựa trên danh tính: Không

o Sự xúc phạm: Có

o Đe dọa: Không

• Lý luận: Xúc phạm trí thông minh và ngoại hình của một cá nhân Vì không

có thuộc tính danh tính nào được đề cập, nhận xét này không phải là một cuộc tấn công dựa trên danh tính

• Lý do: Đe dọa, lăng mạ và độc hại đối với cộng đồng đồng tính nam Từ

"fking" là một phiên bản viết sai chính tả của "fucking", đó là ngôn từ tục tĩu Trong bình luận này, từ "chết tiệt" không có ý nghĩa tình dục

Sau đó Import vào Component

import useTextToxicity from "react-text-toxicity"

useTextToxicity là một funtion với tham số truyền vào là đoạn văn bản và trả về

một object các giá trị đã tính toán như sau:

- insult: nhục mạ, lăng mạ

- obscene: tục tỉu, ghê tởm

- sexual explicit: tình dục, nhạy cảm

- threat: đe dọa, hăm dọa

- toxicity: toxic, ngôn từ gây thù ghét, ác ý

- identity attack: xúc phạm danh tính, nhân phẩm

Giá trị trả về “probability” thể hiện độ chính xác tối đa là 100 và “match” với mức

ngưỡn dự đoán khoảng 0.9 tức > 90% thì ngôn từ đó được xác đinh là vi phạm [20]

Ta minh họa bằng một object như sau /*{

hàm để hai người gọi video cho nhau, cũng là chức năng "nổi tiếng" nhất của WebRTC tính

đến thời điểm hiện tại

WebRTC cung cấp 3 APIs chính

• getUserMedia: cho phép trình duyệt web truy cập vào camera và/hoặc microphone để lấy dữ liệu hình ảnh âm thanh cho việc truyền tải

• RTCPeerConnection: dùng để cài đặt videocall/voicecall dùng cho việc truyền tải

• RTCDatasChannel: cho phép trình duyệt chia sẻ dữ liệu peer-to-peer

Một ứng dụng WebRTC như sau:

• Sử dụng getUserMedia API để truy cập vào camera và microphone

• Lấy thông tin network như địa chỉ IP, ports và trao đổi thông tin đó với các peer khác (những peer mà mình muốn connect tới) để tạo connection (kết nối) dù cho

có bị ngăn cản bởi NATs hay firewalls

• Sau đó thì dùng RTCPeerConnection và RTCDataChannel để voice call/ video call hoặc chia sẻ dữ liệu sau khi đã có kết nối peer-to-peer

PeerJS cung cấp API peer-to-peer hoàn chỉnh, có thể định cấu hình và dễ sử dụng

được xây dựng trên WebRTC, hỗ trợ cả chia sẻ dữ liệu và kết nối trò chuyện audio và video 1.7.2 Áp dụng

Cài đặt thư viện

npm i @peerjs

Sau đó Import vào Component

import { Peer } from "peerjs";

Tạo một kết nối peer mới

const peer = new Peer("pick-an-id");

Ví dụ về chia sẻ dữ liệu, bao gồm người gửi và người nhận:

- Người gửi sẽ tạo một sự kiện để kết nối tới ID của người nhận bằng lệnh

“peer.connect”, sau đó sẽ gửi data bằng lệnh “conn.on” và “conn.send”

- Người nhận sẽ lắng nghe tới sự kiện kết nối đó để nhận dữ liệu bằng lệnh

“conn.on” và gửi lại dữ liệu khác bằng lệnh “conn.send”

Hình 18 Ví dụ về chia sẻ dữ liệu của peerjs

Ví dụ về trò chuyện audio và video, bao gồm người gọi và người trả lời:

- Ban đầu cả người gọi sẽ được hỏi để cấp quyền truy cập vào micro và webcam

bằng lệnh “getUserMedia”, sau đó người gọi sẽ tạo một sự kiện gọi để kết nối tới ID của người nhận bằng lệnh “peer.call”, sau đó render video ra tag video của html bằng lệnh “call.on”

- Người trả lời sẽ lắng nghe tới sự kiện kết nối đó để nhận cuộc gọi bằng lệnh

“peer.on”, sau đó được hỏi đẻ cấp quyền truy cập micro và webcam, tiếp theo

là nhận cuộc gọi bằng lệnh “call.answer” và cuối cùng dùng lệnh “call.on” để render video ra tag video của html