KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNGBÁO CÁO ĐỒ ÁN CƠ SỞ 3ĐỀ TÀI: ỨNG DỤNG WEBSITE TRÒ CHUYỆN TRỰC TUYẾN

Hiện nay các website và ứng dụng trò chuyện trực tuyến nhiều vô số kể,bên cạnh những ứng dụng thành công thì cũng không ít những dụng đã chết ngaykhi bắt đầu hoạt động vì không thể cạnh

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

BÁO CÁO ĐỒ ÁN CƠ SỞ 3

ĐỀ TÀI: ỨNG DỤNG WEBSITE TRÒ CHUYỆN TRỰC TUYẾN

Đà Nẵng, tháng 12 năm 2019

MỞ ĐẦU

Những tiến bộ to lớn về công nghệ, đặc biệt là công nghệ thông tin trongnhững thập niên cuối của thế kỷ 20 đã tạo ra bước ngoặt mới cho sự phát triểnkinh tế xã hội toàn cầu Nhu cầu trao đổi thông tin, liên lạc giữa con người vì thếngày càng tăng cao Để đáp ứng nhu cầu đó, những website, ứng dụng di độnggiúp con người trao đổi, liên lạc trực tuyến xuất hiện ngày một nhiều

Nhắc đến ứng dụng trao đổi thông tin, liên lạc thì không thể không nhắcđến những gã khổng lồ như Messenger của Facebook, Zalo của Việt Nam, và vô

số những ứng dụng khác trên thị trường Mỗi ứng dụng đều có điểm mạnh và yếuriêng của mình Chung quy lại, chức năng chính của những ứng dụng này là đểgửi nhận tin nhắn văn bản, hình ảnh hoặc tệp đính kèm Một số ứng dụng sẽ cóchức năng hội thoại, thậm chí là trò chuyện bằng video

Điểm mạnh của ứng dụng trò chuyện trực tuyến đó là tính tiện lợi, nhanhchóng và tiết kiệm Chỉ cần có internet, mọi thông tin hay tệp dữ liệu của bạn cóthể gửi đến bất cứ đâu, bất cứ lúc nào với tốc độ cực kỳ nhanh Không cần tốntiền gửi thư, gửi bưu phẩm, hay phải chờ hàng tháng trời để nhận được thư vàphản hồi

Hiện nay các website và ứng dụng trò chuyện trực tuyến nhiều vô số kể,bên cạnh những ứng dụng thành công thì cũng không ít những dụng đã chết ngaykhi bắt đầu hoạt động vì không thể cạnh tranh nổi với những ứng dụng mạnh mẽtrước đó

LỜI CẢM ƠN

Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ vàhướng dẫn rất tận tình của các thầy cô thuộc Khoa Công Nghệ Thông Tin VàTruyền Thông – Đại Học Đà Nẵng Em xin cảm ơn các thầy cô thuộc bộ mônchuyên ngành đã cung cấp cho chúng em các thông tin, kiến thức vô cùng quýbáu và cần thiết trong suốt thời gian quá để em có thể thực hiện và hoàn thành

đồ án của mình Đặc biệt em xin chân thành cảm ơn thành thầy Lê Song Toànngười đã trực tiếp hướng dẫn chúng em trong thời gian thực hiện đồ án này

Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thôngtin đã ủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúpchúng tôi trong quá trình nghiên cứu và thực hiện đề tài

Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thựctiễn nên đề tài không tránh khỏi những sai xót Em rất mong nhận được sự thôngcảm của quý thầy cô và mong đón nhận những góp ý của thầy cô và các bạn

Em xin chân thành cảm ơn!

NHẬN XÉT (Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Đà Nẵng, ngày … tháng … năm 20…

Giảng viên hướng dẫn

Lê Song Toàn

MỤC LỤC

Chương 1: 7

GIỚI THIỆU 7

1.1 Tổng quan: 7

1.1.1 Bối cảnh thực hiện đề tài: 7

1.1.2 Vấn đề cần giải quyết: 7

1.1.3 Đề xuất nội dung thực hiện: 7

1.2 Phương pháp, kết quả: 7

1.2.1 Phương pháp: 8

1.2.2 Kết quả: 8

1.3 Cấu trúc đồ án: 8

Chương 2: 10

NGHIÊN CỨU TỔNG QUAN 10

2.1 Giới thiệu tổng quan về trò chuyện trực tuyến: 10

2.2 Một số ưu và nhược điểm của trò chuyện trực tuyến: 10

2.2.1 Ưu điểm: 10

2.2.2 Nhược điểm: 11

2.3 Một số ứng dụng trò chuyện trực tuyến tiêu biểu: 11

2.3.1 Facebook Messenger: 11

2.3.2 Zalo: 11

2.4 Tổng quan về các công nghệ và mô hình sử dụng trong dự án: 12

2.4.1 Giao thức TCP/IP: 12

2.4.2 React: 15

2.4.3 NodeJs: 18

2.4.4 MongoDB: 20

2.4.5 Socket.IO: 21

Chương 3: 26

TỔNG QUAN DỰ ÁN 26

3.1 Các ngôn ngữ và công nghệ sử dụng cho dự án: 26

3.1.1 Front-end: 26

3.1.2 Back-end: 26

3.1.3 Hệ quản trị cơ sở dữ liệu: 26

3.2 Các chức năng của website: 26

3.2.1 Sơ đồ mô hình 26

3.2.2 Các chức năng chính: 26

3.2.3 Điểm mạnh: 27

3.2.4 Hạn chế tồn tại: 27

3.3 Mô tả chức năng: 27

Chương 4: 29

KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN 29

3.1 Kết quả: 29

3.1.3 Giao diện: 29

3.2 Hướng phát triển: 34

DANH MỤC THAM KHẢO 35

Chương 1:

GIỚI THIỆU1.1 Tổng quan:

1.1.1 Bối cảnh thực hiện đề tài:

Trong quá trình phát triển xã hội, công nghệ thông tin đã và đang phát triểnmạnh mẽ, ngày càng thâm nhập sâu, trở thành một công cụ hỗ trợ đắc lực cho conngười trong mọi lĩnh vực

Và cùng với sự phát triển đó nhu cầu liên lạc, trao đổi thông tin giữa ngườivới người ngày càng tăng cao và cần thiết Dựa trên xu thế phát triển của xã hộicũng như nhu cầu thiết thực của con người, ứng dụng website trò chuyện ra đời

1.1.2 Vấn đề cần giải quyết:

Để đáp ứng nhu cầu liên lạc trực tuyến, chạy theo xu hướng phát triển của

xã hội Một website, ứng dụng trò chuyện trực tuyến cần đáp ứng được những yêucầu thiết yếu như trò chuyện văn bản, trao đổi hình ảnh, tệp dữ liệu, hay thậm chí

là thực hiện các cuộc hội thoại bằng giọng nói hay trò chuyện bằng hình ảnh trựctuyến (video chat) Vấn đề thứ nhất cần giải quyết là đảm bảo ứng có đủ các chứcnăng cần thiết

Một website, ứng dụng trò chuyện muốn được người dùng đón nhận cầnphải hoạt động ổn định và dễ sử dụng Một điều cực kỳ quan trọng nữa đó là bảomật và an toàn thông tin cũng như dữ liệu của người dùng Vấn đề thứ hai là tính

ổn định, bảo mật của website và tránh những việc lộ thông tin cuộc trò chuyệnhay thông tin của người dùng

Hiện nay các website và ứng dụng trò chuyện trực tuyến nhiều vô số kể,bên cạnh những ứng dụng thành công thì cũng không ít những dụng đã chết ngaykhi bắt đầu hoạt động vì không thể cạnh tranh nổi với những ứng dụng mạnh mẽtrước đó Vấn đề thứ ba là khả năng marketing và cạnh tranh của ứng dụng

1.1.3 Đề xuất nội dung thực hiện:

Thực hiện khảo sát và nghiên cứu về thị trường, nhu cầu cung ứng củamảng này Nghiên cứu, tham khảo các ứng dụng đã có, những điểm mạnh và yếu

Vì sao ứng dụng đó thành công hoặc thất bại Rút ra được những bài học từ nhữngngười đi trước

1.2 Phương pháp, kết quả:

1.2.1 Phương pháp:

Nghiên cứu thị trường, tham khảo những ứng dụng đã có sẵn Tiếp thuđiểm mạnh và loại bỏ điểm yếu

Thực hiện nghiên cứu những công nghệ, công cụ cần sử dụng để thực hiện

dự án Lựa chọn những công nghệ tối ưu và hiện đại nhất để bắt kịp xu thế pháttriển không ngừng của công nghệ hiện nay

Sau khi đã nắm bắt được công nghệ và hướng đi, bắt tay vào lập kế hoạchtriển khai dự án, đứa ra những công việc cụ thể cần thực hiện Tiến hành phân tíchthiết kế, chỉ những rủi ro, tính khả thi cũng như bất khả thi của những công việccần thực hiện

Sau khi phân tích, tiến hành thiết kế cơ sở dữ liệu, thiết kế giao diện vàtừng bước hoàn thiện, ghép nối dự án thành sản phẩm hoàn chỉnh

Sau khi có sản phẩm hoàn chỉnh, tiến hành thử nghiệm và chỉnh sửa, cậpnhật những sai sót

Cuối cùng là tổng kết và đưa ra hướng phát triển trong tương lai

 Trò chuyện văn bản giữa hai cá nhận

 Trò chuyện văn bản giữa một nhóm gồm nhiều thành viên

 Giải pháp thực hiện cho ứng dụng

 Giới thiệu về ứng dụng: Những công nghệ, mô hình sử dụng

Triển khai xây dựng:

 Xây dựng cở sở dữ liệu

 Xây dựng giao diện

 Kết hợp thành sản phẩm hoàn thiện.

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

 Nhìn nhận, đánh giá những điểm được và chưa được trong quá trình thựchiện dự án Rút kinh nghiệm lần sau

 Hoạch định ra hướng phát triển trong tương lai

Chương 2:

NGHIÊN CỨU TỔNG QUAN

2.1 Giới thiệu tổng quan về trò chuyện trực tuyến:

Trò chuyện trực tuyến (hay nhắn tin nhanh, tin nhắn tức khắc, chát –

từ chat trong tiếng Anh, IM viết tắt của Instant Messaging), là dịch vụ cho phép

hai người trở lên nói chuyện trực tuyến với nhau qua một mạng máy tính

Mới hơn IRC, nhắn tin nhanh là trò chuyện mạng, phương pháp nói chuyệnphổ biến hiện nay Nhắn tin nhanh dễ dùng hơn IRC, và có nhiều tính năng hay,như khả năng trò chuyện nhóm, dùng biểu tượng xúc cảm, truyền tập tin, tìm dịch

vụ và cấu hình dễ dàng bản liệt kê bạn bè

Nhắn tin nhanh đã thúc đẩy sự phát triển của Internet trong đầu thậpniên 2000

Có nhiều cách để thực hiện nhắn tin nhanh, thông qua các dịch vụnhư IRC, hay các dịch vụ của Yahoo!, Microsoft, do nhắn tin nhanh hỗ trợ rấtnhiều giao thức khác nhau Một số người dùng bị giới hạn vì sử dụng ứng dụngkhách chỉ truy cập một giao thức/mạng IM, như MSN hay Yahoo!

Một giao thức phổ biến đó là giao thức XMPP (Jabber) Đây là giao thức

mở, an toàn, và máy chủ nào hỗ trợ giao thức này đều có thể kết nối được vớinhau Ứng dụng khách Jabber có khả năng truy cập mọi giao thức/mạng IM: MSNMessenger, Yahoo!, AIM, ICQ, Gadu-Gadu, ngay cả IRC và SMS Chỉ mộtchương trình Jabber có thể nói chuyện với bạn bè trên mọi mạng

Có một số ứng dụng khách Jabber là phần mềm tự do đa nền tảng và đãdịch sang tiếng Việt Psi, Gaim và JWChat Cũng có Gossip dành cho hệ điềuhành Linux/UNIX

Ứng dụng nhắn tin nhanh có khả năng VoIP, nói chuyện trực tiếp qua máytính, như điện thoại

2.2 Một số ưu và nhược điểm của trò chuyện trực tuyến:

2.2.1 Ưu điểm:

 Khá dễ dàng tiếp cận và sử dụng

 Tính tiện dụng cao, có tể sử dụng mọi lúc mọi nơi thông qua internet

 Tốc độ truyền tải nhanh, có thể truyền tải được nhiều dạng dữ liệu khácnhau như văn bản, âm thanh, hình ảnh…

 Độ phổ biến rộng rãi

 Tích hợp cho nhiều nền tảng cả smartphone (Android, iOS) và máy tính(Window, MacOS, Linux, Ubuntu)

2.2.2 Nhược điểm:

 Phụ thuộc vào internet

 Chưa đảm bảo được tính bảo mật và an toàn thông tin khi sử dụng

2.3 Một số ứng dụng trò chuyện trực tuyến tiêu biểu:

2.3.1 Facebook Messenger:

Facebook Messenger là dịch vụ và ứng dụng phần mềm tin nhắn tức thờichia sẻ giao tiếp bằng ký tự và giọng nói Được tích hợp trên ứng dụng chat củaFacebook và được xây dựng trên giao thức MQTT

Messenger cho phép người dùng Facebook trò chuyện với bạn bè trên cả diđộng và trang web chính Được tích hợp trên ứng dụng Chat (trò chuyện) củaFacebook và được xây dựng trên giao thức MQTT, Messenger cho phép ngườidùng Facebook trò chuyện với bạn bè trên cả di động và trang web chính

Kể từ khi Messenger được tách ra hẳn khỏi Facebook như một ứngdụng độc lập, Facebook đã không ngừng cải tiến và mở rộng khả năng của nó.Messenger hiện nay có thể giúp ta thực hiện gọi video miễn phí như FaceTime,chia sẻ vị trí hiện tại với bạn bè, gửi tiền và rất nhiều tính năng khác nữa

Các công ty gần đây cũng đã bắt đầu sử dụng Messenger để hỗ trợ kháchhàng, khiến ứng dụng này trở thành một công cụ thông tin hằng ngày vô cùng hữuhiệu cho rất nhiều người trên thế giới

2.3.2 Zalo:

Zalo là một dịch vụ OTT (viết tắt của over the top - là thuật ngữ chỉ những

dữ liệu được cung cấp trên nền tảng Internet nhưng không một nhà cung cấpmạng hay bất kỳ tổ chức nào có thể can thiệp tới) Zalo từng lọt top ứng dụngđược nhiều người tải về nhất Cũng như Facebook, Zalo cho phép người dùng cóthể nhắn tin, gọi điện trò chuyện cùng bạn bè một cách miễn phí ở bất cứ đâu Đặcbiệt ứng dụng này do người Việt tạo ra và được phát triển bởi Vinagame

Zalo là từ kết hợp của Zing và Alo (câu thường được nói khi nghe máy ởViệt Nam)

Ứng dụng Zalo xuất hiện trên thị trường vào 08/08/2012 và đến tháng12/2012 thì ứng dụng nhắn tin thuần Việt này bắt hoạt động ổn định và dần phổbiến tại thị trường Việt Nam, hạ gục nhiều đối thủ đáng gờm trước đó

2.4 Tổng quan về các công nghệ và mô hình sử dụng trong dự án:

2.4.1 Giao thức TCP/IP:

a Tổng quan:

TCP/IP là bộ giao thức cho phép kết nối các hệ thống mạng không đồng nhất với nhau Ngày nay TCP/IP được sử dụng rộng rãi trong mạng cục bộ cũng như mạng toàn cầu TCP/IP được xem như giản lược của mô hình tham chiếu OSIvới 4 tầng như sau:

 Tầng Liên Kết (Datalink Layer)

Tầng liên kết (còn được gọi là tầng liên kết dữ liệu hay tầng giao tiếp

mạng) là tầng thấp nhất trong mô hình TCP/IP, bao gồm các thiết bị giao tiếp mạng và các chương trình cung cấp các thông tin cần thiết để có thể hoạt động, truy nhập đường truyền vật lý qua các thiết bị giao tiếp mạng đó

 Tầng Internet:

Tầng Internet ( hay còn gọi là tầng Mạng) xử lý quá trình truyền gói tin trên mạng, các giao thức của tầng này bao gồm : IP ( Internet Protocol) , ICMP ( Internet Control Message Protocol) , IGMP ( Internet Group Message Protocol ).

 Tầng giao vận:

Tầng giao vận phụ trách luồng dữ liệu giữa 2 trạm thực hiện các ứng dụng của tầng trên, tầng này có 2 giao thức chính là TCP ( Transmisson Control

Protocol) và UDP ( User Datagram Protocol )

- TCP cung cấp luồng dữ liệu tin cậy giữa 2 trạm, nó sử dụng các cơ chế như chia nhỏ các gói tin ở tầng trên thành các gói tin có kích thước thích hợp cho tầng mạng bên dưới, báo nhận gói tin, đặt hạn chế thời gian timeout để đảm bảo bên nhận biết được các gói tin đã gửi đi Do tầng này đảm bảo tính tin cậy nên tầng trên sẽ không cần quan tâm đến nữa

- UDP cung cấp một dịch vụ rất đơn giản hơn cho tầng ứng dụng Nó chỉ gửi dữ liệu từ trạm này tới trạm kia mà không đảm bảo các gói tin đến được tới đích Các cơ chế đảm bảo độ tin cậy được thực hiện bởi tầng trên tầng ứng dụng

 Tầng ứng dụng:

Là tầng trên của mô hình TCP/IP bao gồm các tiến trình và các ứng dụng cung cấp cho người sử dụng để truy cập mạng Có rất nhiều ứng dụng được cung cấp trong tầng này, mà phổ biến là Telnet: sử dụng trong việc truy cập mạng từ

xa, FTP ( File Transport Protocol ) dịch vụ truyền tệp tin., EMAIL : dịch vụ

truyền thư tín điện tử WWW ( Word Wide Web )

b Phương thức hoạt động của bộ giao thức TCP/IP:

Hình 2: Quá trình đóng mở gói dữ liệu trong TCP/IP

Cũng tương tự như trong mô hình OSI, khi truyền dữ liệu , quá trình tiến hành từ tầng trên xuống tầng dưới, qua mỗi tầng dữ liệu được thêm vào thông tin điều khiển gọi là Header Khi nhận dữ liệu thì quá trình xảy ra ngược lại, dữ liệu được truyền từ tầng dưới lên và qua mỗi tầng thì phần header tương ứng sẽ được lấy đi và khi đến tầng trên cùng thì dữ liệu không còn phần header nữa.

Hình 3: Cấu trúc dữ liệu trong TCP/IP

Hình trên cho ta thấy lược đồ dữ liệu qua các tầng Trong hình ta thấy tại các tầng khác nhau dữ liệu được mang những thuật ngữ khác nhau:

 Trong tầng ứng dụng: dữ liệu là các luồng được gọi là stream

 Trong tầng giao vận: đơn vị dữ liệu mà TCP gửi xuống gọi là TCP

segment

 Trong tầng mạng, dữ liệu mà IP gửi xuống tầng dưới gọi là IP Datagram

 Trong tầng liên kết, dữ liệu được truyền đi gọi là frame

c So sánh TCP/IP với OSI:

Mỗi tầng trong TCP/IP có thể là một hay nhiều tầng của OSI Bảng sau chỉ rõ mối tương quan giữa các tầng trong mô hình TCP/IP với OSI

Bảng 1: OSI và TCP/IP

Sự khác nhau giữa TCP/IP với OSI:

 Tầng ứng dụng trong mô hình TCP/IP bao gồm luôn cả 3 tầng trên của mô hình OSI

 Tầng giao vận trong mô hình TCP/IP không phải luôn đảm bảo độ tin cậy của việc truyền tin như ở trong tầng giao vận của OSI mà cho phép thêm một lựa chọn khác là UDP

2.4.2 React:

a React là gì?

React (Hay ReactJS, React.js) là một thư viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook Người bị ảnh hưởng bởi XHP (Một nền tảng thành phần HTML cho PHP) React lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau đó được triển khai cho

Instagram.com năm 2012 Nó được mở mã nguồn (open-sourced) tại JSConf UStháng 5 năm 2013 Mã nguồn của React được mở trên GitHub:

https://github.com/facebook/react

Hình 4: Logo React

Hiện nay, thư viện này nhận được rất nhiều sự quan tâm đến từ cộng đồng

Nó đang được bảo trì (maintain) bởi Facebook và Instagram, cũng với sự đóng góp của cộng đồng các lập trình viên giỏi trên Thế giới

b Vấn đề và giải pháp:

Về cơ bản, việc xây dựng một ứng dụng MVC phía client với giàng buộc

dữ liệu 2 chiều (2 way data-binding) là khá đơn giản Tuy nhiên nếu dự án ngày càng mở rộng, nhiều tính năng hơn, làm cho việc bảo trì dự án gặp khó khăn, đồng thời hiệu năng cũng bị giảm

Vấn đề này có thể giải quyết bằng các thư viện khác như Backbone.js hay Angular.js, tuy nhiên có nhiều hạn chế

React ra đời sau AngularJS, nó sinh ra để dành cho các ứng dụng lớn dễ dàng quản lý và mở rộng Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng

c Tại sao là React ?

 Giải quyết được vấn đề của tầng View:

o Nó giải quyết vấn đề của tầng View trong mô hình MVC View-Controller) Giúp viết mã Javascript dễ dàng hơn với JSX

(Model-o Nó sử dụng JSX (JavaScript Syntax eXtensi(Model-on) (Phần bổ xung cú pháp Javascript) Là một sự hòa trộn giữa Javascript và XML, vì vậy nó cũng dễ dàng hơn khi viết mã, và thân thiện hơn với các lập trình viên

Hình 5: Cú pháp thân thiện

 "Thành phần hóa" giao diện

o React cho phép lập trình viên tạo ra các Component (Thành phần) tương ứng với các phần của giao diện Các component này có thể tái

sử dụng, hoặc kết hợp với các Component khác để tạo ra một giao diện hoàn chỉnh

Hình 6: Component hóa

o Ý tưởng về Component chính là chìa khóa giải quyết vấn đề khó khăn khi dự án ngày càng lớn Giao diện được tạo ra từ các Component ghép lại với nhau, một Component có thể được sử dụng tại nhiều nơi trong dự án Vì vậy thật dễ dàng khi chỉ cần quản lý vàsửa chữa các Component của chính mình

o Component thực sự là tương lai của lập trình ứng dụng web, và nó cũng là tính năng quan trọng nhất mà React đem lại

 Tăng hiệu năng với Virtual-DOM

Khi dữ liệu của Component thay đổi React cần phải vẽ lại (re-render) giao diện

Thay vì tạo ra thay đổi trực tiếp vào mô hình DOM của trình duyệt, nó tạo

ra thay đổi trên một mô hình DOM ảo ( Virtual DOM) Sau đó nó tính toán sự khác biệt giữa 2 mô hình DOM, và chỉ cập nhập các khác biệt cho DOM của trình duyệt Cách tiếp cận này mang lại hiệu năng cho ứng dụng

Hình 7: Virtual DOM và DOM

 Thân thiện với SEO