mẪu ĐỒ Án -khoÁ luẬn tỐt...

Khoa CNTT và TT – Đại học Đà Nẵng Lập trình mạngNguyễn Quốc Cường – 17IT3 Ứng dụng website trò chuyện trực tuyến

ĐẠI HỌC ĐÀ NẴNGKHOA 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

Trang 1


MỞ ĐẦU

Những tiến bộ to lớn về công nghệ, đặc biệt là công nghệ thông tin trong nhữ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ển kinh 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 động giú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ếu riê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, nhanh chó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ốn tiề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 ngay khi 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 đó.

Trang 2


LỜI CẢM ƠN

Trang 3

Để 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ôn chuyê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àn ngườ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ông tin đã ủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp chú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ực tiễ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ông cả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

Trang 4


MỤC LỤC

Chương 1:...............................................................................................................7GIỚ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:.............................................................................................................10NGHIÊ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:.............................................................................................................26TỔ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

Trang 5


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:.............................................................................................................29KẾ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

Trang 6


Chương 1:

GIỚI THIỆU

1.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ển

mạ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 con ngườ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ười vớ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ội cũ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êu cầ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ực tuyến (video chat). Vấn đề thứ nhất cần giải quyết là đảm bảo ứng có đủ các chức nă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ần phả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ảo mậ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ện hay 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 ngay khi 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ủa

mả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ững người đi trước.

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

Trang 7


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át triể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ạch triể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ích thiế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ệc cầ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ập nhậ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.

1.2.2 Kết quả:Nghiên cứu và học hỏi từ những ứng dụng nổi bật như Zalo, Messenger,

Telegram, ….Nghiên cứu và học tập được các công nghệ mới, được áp dụng để phát

triển ứng dụng như Socket.IO, PuserSau quá trình thực hiện, kết quả thu được là một ứng dụng trò chuyện trực

tuyến với các chức năng: 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.

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

Nguyên cứu tổng quan: giới thiệu cơ sở nghiên cứu lý thuyết, những mô hình, công nghệ được áp dụng trong quá trình xây dựng dự án:

Trò chuyện trực tuyến là gì. Ưu nhược điểm. Một vài ví dụ điển hình. 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.

Trang 8


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ực hiệ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.

Trang 9


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ện phổ 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ập niê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ất nhiề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ụng khá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ới nhau. Ứng dụng khách Jabber có khả năng truy cập mọi giao thức/mạng IM: MSN Messenger, Yahoo!, AIM, ICQ, Gadu-Gadu, ngay cả IRC và SMS. Chỉ một chươ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ều hà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áy tí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.

Trang 10


Tốc độ truyền tải nhanh, có thể truyền tải được nhiều dạng dữ liệu khác nhau 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ời

chia 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ủa Facebook 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ủa Facebook 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.

Kể từ khi Messenger được tách ra hẳn khỏi Facebook như một ứng dụ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ách hà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ữu hiệ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ấp mạ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. Đặc biệ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áng 12/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 đó.

Trang 11


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 OSI với 4 tầng như sau:

Tầng Liên Kết (Datalink Layer) Tầng Mạng (Internet Layer) Tầng Giao Vận (Transport Layer) Tầng Ứng Dụng (Application Layer)

Hình 1 : Các tầng trong bộ giao thức TCP/IP

Tầng liên kết:

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:

Trang 12


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

Trang 13


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

Trang 14


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 US thá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 ReactHiệ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.

Trang 15

https://github.com/facebook/react


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 (Model-View-Controller). Giúp viết mã Javascript dễ dàng hơn với JSX.

o Nó sử dụng JSX (JavaScript Syntax eXtension) (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.

Trang 16


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

Trang 17


o Một trong những vấn đề lớn của các Javascript Framework là nó không thân thiện với các cỗ máy tìm kiếm ( Search Engine). Mặc dù đã có nhiều cải thiện nhưng thực sự Search Engine vẫn gặp rất nhiều khó khăn khi "đọc" các ứng dụng web chứa nhiều Javascript.

Hình 8: Thân thiện với SEOo React có thể chạy tại phía Client, nhưng nó cũng có thể chạy tại

phía Server, vì vậy dữ liệu trả về cho trình duyệt là văn bản HTML, nó không gây ra khó khăn gì cho các Search Engine, vì vậy nó thân thiện với SEO.

Dễ dàng viết UI Testcases.

React nativeReact Native được Facebook công bố 2 năm sau React, cung cấp

kiến trúc React để phát triển các ứng dụng Native (iOS, Android UWP) và đang tiếp nối React thành một kẻ khổng lồ trong lĩnh vực lập trình ứng dụng mobile.

Những bộ não lớn đang "hậu thuẫn" đằng sau ReactReact được Facebook cho phép mở mã nguồn và đang được phát

triển bởi rất nhiều lập trình viên giỏi trên thế giới, vì vậy tương lai của React cũng "rất được đảm bảo".

2.4.3 NodeJs:

a. Khái niệm:

Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ.

Trang 18


Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.

Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực.

Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.

b. Những ứng dụng nên viết bằng Nodejs:

Rõ ràng, không phải cứ hot và mới là Nodejs làm gì cũng tốt, ví dụ như một ứng dụng cần tính ổn định cao, logic phức tạp thì các ngôn ngữ PHP hay Ruby… vẫn là sự lựa chọn tốt hơn. Còn dưới đây là những ứng dụng có thể và nên viết bằng Nodejs:

Websocket server: Các máy chủ web socket như là Online Chat, Game Server…

Fast File Upload Client: là các chương trình upload file tốc độ cao.

Ad Server: Các máy chủ quảng cáo.

Cloud Services: Các dịch vụ đám mây.

RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API.

Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực. Micro Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau. Nodejs có thể làm tốt điều này.

c. Ưu điểm và nhược điểm của NodeJs:

Ưu điểm: o Tối ưu hóa thời gian thực hiện tiến trìnho Có khả năng mở rộng trong các ứng dụng web với nhiều hoạt động

I/O liên tục.o Phù hợp để xây dựng các ứng dụng web stream hay các game chơi

trên nền web đảm bảo việc độ trễ thời gian xử lý hành động là nhỏ nhất.

o Dễ dàng để xây dựng các ứng dụng real-time.o Cách viết ứng dụng với Node đó là các ứng dụng được cấu tạo từ

các module nhỏ sau đó được kết hợp lại với nhau điều này đảm bảo cho việc sửa đổi bảo trì một cách nhanh chóng.

o Hiệu năng cao.

Trang 19


Nhược điểm:o Ứng dụng nặng tốn tài nguyên.o Thiếu tổ chức code.

d. Những công ty lớn đang sử dụng Nodejs.

Amazon, Ebay, Linkedin, Microsoft, Paypal, trello, Uber và còn nhiều cái tên nổi tiếng khác nữa. Theo như Paypal thì sử dụng Nodejs làm giảm thời gian đáp ứng lên tới 35%.

Còn về phía Linkedin chuyển từ Ruby sang sử dụng Nodejs để xử lý các truy cập từ mobile, và con số Server sử dụng giảm từ 30 còn 3, nghĩa là giảm gần 90%.

2.4.4 MongoDB:

a. NoSQL là gì?

NoSQL là 1 dạng CSDL mã nguồn mở và được viết tắt bởi: None-Relational SQL hay có nơi thường gọi là Not-Only SQL.

NoSQL được phát triển trên Javascript Framework với kiểu dữ liệu là JSON và dạng dữ liệu theo kiểu key và value.

NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ RDBMS (Relational Database Management System - Hệ quản trị cơ sở dữ liệu quan hệ) về tốc độ, tính năng, khả năng mở rộng,...

Với NoSQL bạn có thể mở rộng dữ liệu mà không lo tới những việc như tạo khóa ngoại, khóa chính, kiểm tra ràng buộc .v.v ...

NoSQL bỏ qua tính toàn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh và khả năng mở rộng.

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

b. MongoDB là gì?

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng.

MongoDB là một database 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ư CSDL quan hệ nên truy vấn sẽ rất nhanh.

Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS.

Trang 20


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.

Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB.

c. Ưu điểm của mongoDB:

Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên 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, nên bạn muốn gì thì cứ insert vào thoải mái.

Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS.

MongoDB rất dễ mở rộng (Horizontal Scalability). Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất.

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: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS). Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL.

d. Nhược điểm của mongoDB:

Một ưu điểm của MongoDB cũng chính là nhược điểm của nó. MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với mongoDB thì phải hết sức cẩn thận.

Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value do đó key sẽ bị lặp lại. Không hỗ trợ join nên dễ bị dữ thừa dữ liệu.

Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện...

2.4.5 Socket.IO:

a. Socket là gì?

Socket là 1 công nghệ. Socket là cách bạn tổ chức mô hình client-server để một trong 2 bên luôn trong tình trạng sẵn sàng trả lời bên kia và ngược lại. Để đảm bảo việc này, kết nối giữa Client và Server phải ở trạng thái “keep-

Trang 21


alive” và phải luôn xảy ra quá trình đồng bộ giữa Client-Server. Socket sẽ mang lại khả năng trả lời tức thì từ một trong 2 bên khi bên kia đưa ra một sự kiện, thay vì phải thực thi lại một loạt các thủ tục kết nối phức tạp như trước, và ứng dụng của bạn sẽ trở thành ứng dụng thời gian thực ví dụ: Yahoo Messenger, Skype v.v… đều là các ứng dụng được xây dựng theo mô hình Socket.

Trong lập trình web trước đây, việc xây dựng client-server theo mô hình socket phải thông qua các phần mềm thứ . Vì mô hình socket không phù hợp với các ngôn ngữ lập trình Server như: PHP, ASP.NET, JSP v.v… Các ngôn ngữ này luôn làm việc theo cách: Die ngay connection khi Server trả lời Client xong. Tuy nhiên, mình nhấn mạnh: Chúng ta có thể làm được web-socket với bất kỳ ngôn ngữ lập trình nào. Chỉ có điều, với các ngôn ngữ cũ, việc làm này cần bạn phải am hiểu các giao thức http, tcp; hiểu thế nào là 1 request header, v.v…

Socket là một điểm cuối (end-point) của liên kết truyền thông hai chiều (two-way communication) giữa hai chương trình chạy trên mạng. Các lớp Socket được sử dụng để biểu diễn kết nối giữa client và server, được ràng buộc với một cổng port (thể hiện là một con số cụ thể) để các tầng TCP (TCP Layer) có thể định danh ứng dụng mà dữ liệu sẽ được gửi tới.

Lập trình socket là lập trình cho phép người dùng kết nối các máy tính truyền tải và nhận dữ liệu từ máy tính thông qua mạng.

Hiểu đơn giản, socket là thiết bị truyền thông hai chiều gửi và nhận dữ liệu từ máy khác.

b. Websocket:

WebSoket là công nghệ hỗ trợ giao tiếp hai chiều giữa client và server bằng cách sử dụng một TCP socket để tạo một kết nối hiệu quả và ít tốn kém. Mặc dù được thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa chúng vào bất kì loại ứng dụng nào.

Trong trình duyệt mà được hỗ trợ WebSockets protocol, một kết nối giữa server và browser được tạo ra quanh HTTP và được gọi là một “HTTP hanshake”. Một kết nối được tạo ra trình duyệt và server mở ra một cổng giao tiếp liên tục thông qua một TCP socket. Nó sẽ hỗ trợ cho cả việc gửi và truy vấn message trên một cổng kết nối. Điều này giúp server load ít hơn, giảm số message bị trễ.

Tuy nhiên WebSocket mắc phải vấn đề đó là HTTP proxies, firewall và hosting provider. Khi Websocket sử dụng một phương thức giao tiếp ngoài HTTP, một phần nhiều trong số đó chưa được hỗ trợ và block bất cứ kết nối socket nào. Vấn đề này chỉ được giải quyết khi sử dụng thư viện trừu

Trang 22

https://blog.tinohost.com/server-va-cac-loai-may-chu-pho-bien/

https://en.wikipedia.org/wiki/Socket

http://asp.net/


tượng mà có thể dễ dàng thay đổi giữa các giao thức dựa trên resoures có sẵn.

c. Socket.IO:

Socket.io được xây dựng để giải quyết vấn đề trên của Websocket và nó luôn sẵn sàng được sử dụng cho NodeJS developer.

Để xây dựng một ứng dụng realtime cần sử dụng socketio. Socketio sẽ giúp các bên ở những địa điểm khác nhau kết nối với nhau, truyền dữ liệu ngay lập tức thông qua server trung gian. Socketio có thể được sử dụng trong nhiều ứng dụng như chat, game online, cập nhật kết quả của một trận đấu đang xảy ra,...

Socketio không phải là một ngôn ngữ, mà chỉ là 1 module, công cụ giúp thực hiện những ứng dụng realtime. Vì thế, không thể sử dụng socketio để thay thế hoàn toàn cho một ngôn ngữ, mà phải sử dụng kết hợp với một ngôn ngữ khác. Ngôn ngữ đó có thể là php, asp.net, nodejs,...

d. Cơ chế hoạt động của socket.IO:

Cơ chế hoạt động của một ứng dụng realtime đó là thông qua server để lắng nghe (listen) data và truyền data về các máy client. Vì vậy cần cài khai báo sử dụng socketio ở cả phía server và client.

Để lắng nghe data, ta sử dụng câu lệnh socket.on(), để phát dữ liệu thì sử dụng lệnh socket.emit() .

Khi chúng ta include Socket.io module vào trong ứng dụng của mình nó sẽ cung cấp cho chúng ta hai object đó là: socket server quản lý functionality phía server và socket client điều khiển funtionality phía client.

Khi client muốn kết nối tới Socket.io server, nó sẽ gửi cho server một “handshake HTTP request”. Server sẽ phân tích request đó với những thông tin cần thiết trong suốt quá trình kết nối. Nó sẽ tìm cấu hình của middleware mà đã được đăng ký với server và thực thi chúng trước khi đưa ra sự kiện kết nối. Khi kết nối thành công thì connection event listener được thực thi, tạo ra một instance mới của socket có thể coi như định danh của client mà mỗi một client kết nối tới sẽ có 1 định danh.

Một module khác của Node.js là LightStreamer-adapter cũng có tạo các kết nối từ client tới server nhưng không trực tiếp mà thông qua LightStreamer Server, đó là các máy chủ theo thời gian thực và nằm ngoài tiến trình của Node.js Server

Trang 23

http://asp.net/


Hình 9. Mô hình hoạt động của Socket.IO

Trang 24


Trang 25


Chương 3:

TỔNG QUAN DỰ ÁN

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

3.1.1 Front-end: HTML (JSX), CSS. Bootstrap framework. React Js Socket.IO client

3.1.2 Back-end: NodeJS. Express JS framework. Socket.IO

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

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

3.2.1 Sơ đồ mô hình

Hình 10: Mô hình chat real time

3.2.2 Các chức năng chính: Đăng ký Đăng nhập Trò chuyện giữa hai cá nhân

Trang 26


Tạo cuộc trò chuyện nhóm Trò chuyện nhóm nhiều người Cập nhật trạng thái của người dùng Chỉnh sửa thông tin người dùng Thay đổi mật khẩu Cuộc trò chuyện có thể gửi hình ảnh file với dung lượng giới hạn Tin nhắn gửi đi có thể gửi kèm với các biểu tượng cảm xúc ngộ nghĩnh Kết bạn và có thông báo khi có gửi lời mời kết bạn

3.2.3 Điểm mạnh: Xây dựng API server sử dụng nodejs cho tốc độ truy cập và xử lý nhanh

giúp mở rộng sâu hơn cho các nền tảng khác. Sử dụng hệ quản trị cơ sở dữ liệu MongoDB cho tốc độ truy suất nhanh, dữ

liệu lưu trữ đa dạng (hình ảnh, tệp…) Xử lý real-time (thời gian thực) tất cả thao tác như gửi tin nhắn, lời mời kết

bạn,….

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

Các chức năng chỉ dừng lại ở mức cơ bản, và tồn tại một số hạn chế nhất định:

Chưa có đăng nhập sử dụng tài khoản Google hoặc Facebook Chưa có chức năng khôi phục mật khẩu Chưa có chức năng thoát khỏi cuộc trò chuyện, xoá cuộc trò chuyện Chưa có trò chuyện gọi thoại, video call như các trang web hiện nay Chưa gửi được hình ảnh và tệp Chưa hỗ trợ cho mobile Chưa tối ưu hoá một số trải nghiệm người dùng

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

Khi người dùng đăng ký, sẽ có mail xác nhận tài khoản gửi đến để cho người dùng xác nhận tài khoản.

Sau khi đăng nhập, người dùng sẽ truy cập vào giao diện sử dụng chính. Thành phần giao diện trang sẽ chia ra gồm: chat, friend (bạn bè), thông báo, và cài đặt tài khoản.

Người dùng có thể tìm kiếm tất cả user trong hệ thống để kết bạn và sẽ gửi thông báo realtime đến người nhận.

Khi nhấp chuột vào mỗi người dùng khác, sẽ hiển thị ra màn hình trò chuyện với người đó, và trò chuyện nhóm cũng tương tự.

Người dùng có thể truy cập vào trang cá nhân để chỉnh sửa thông tin, hoặc trang thay đổi mật khẩu để sửa đổi mật khẩu tài khoản. Địa chỉ email là không thể chỉnh sửa.

Người dùng có thể tạo cuộc trò chuyện nhóm để thêm cùng nhiều người vào. Người dùng tiến hành tìm kiến chọn người muốn thêm, đặt tên cho

Trang 27


cuộc trò chuyện và tạo. Tự động những người được thêm sẽ thấy xuất hiện cuộc trò chuyện nhóm đó trên danh sách trò chuyện.

Trong quá trình chat người dùng có thể gửi tin nhắn văn bản thông thường, tin nhắn kèm biểu tượng cảm xúc ngộ nghĩnh, tin nhắn ảnh, tin nhắn file.

Chương 4:

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

3.1 Kết quả:Trang 28


3.1.3 Giao diện:a. Form đăng nhập:

Hình 11. Form đăng nhập

Ở đây, người dùng sẽ đăng nhập bằng tài khoản đã tạo trước đó. Sau khi đăng nhập, người dùng sẽ truy cập vào trang giao diện chính. Nếu chưa có tài khoảng, người dùng có thể truy cập vào trang đăng ký tại đường dẫn.

b. Form đăng ký:

Trang 29


Hình 12. Form đăng ký

Sau khi đăng ký thành công, người dùng sẽ tự động chuyển qua trang đăng nhập và chuyển vào trang giao diện chính.

c. Giao diện trang chủ:

Hình 13. Trang chủ

Trang 30


Bên trái bao gồm thanh slidebar chứa các tab như chat, friends, notifications và cài đặt. Khi mặc định đăng nhập vào sẽ là list các cuộc trò chuyện. Và khi chọn một cuộc trò chuyện bất kỳ, phía bên phải sẽ xuất hiện của sổ trò chuyện tương ứng với cuộc trò chuyện đó.

Hình 14. Giao diện chat

Hình 14. Giao diện bạn bè và tìm kiếm người dùng để kết bạn

d. Trang chỉnh sửa thông tin người dùng:

Trang 31


Hình 15. Giao diện chỉnh sửa thông tin người dùng

Tại đây người dùng có thể thay đổi thông tin cá nhân của mình, hiện tại có thể thay đổi tên, ảnh đại diện, thông tin cá nhân như địa chỉ số điện thoại. Email là thông tin bắt buộc không thay thế được.

Hình 16. Giao diện đổi mật khẩu

e. Trò chuyện cá nhận:

Trang 32


Hình 17. Chức năng trò chuyện cá nhân

Hệ thống sẽ cập nhật trạng thái khi người dùng đang nhập tin nhắn cho đối phương. Người dùng có thể gửi tin nhắn văn bản, biểu tượng cảm xúc, ảnh hoặc file. Và đối với mỗi tin nhắn sẽ hiện thông tin ngày đã gửi kể từ thời điểm hiện tại.

f. Tạo cuộc trò chuyện nhóm:

Hình 18. Chức năng tạo cuộc trò chuyện nhóm

Khi nhấp chọn tạo cuộc trò chuyện bằng cách click vào biểu tượng user trong mục chat sẽ xuất hiện một modal box và người dùng điền thông tin nhóm chat vào và chọn thành viên có trong danh sách bạn bè, đổi với người dùng có nhiều bạn bè có thể tiến hành tìm kiếm người dùng khác bằng cách nhập tên hoặc địa chỉ email vào ô tìm kiếm. Kết quả sẽ trả về phía dưới, người dùng chỉ việc click vào để chọn.

Trang 33


Sau khi tạo thành công, cả người dùng đó và những người dùng được thêm vào cuộc trò chuyện sẽ tự động xuất hiện cuộc trò chuyện đó ở danh sách trò chuyện, tất cả đều diễn ra theo thời gian thực.

g. Trò chuyện nhóm:

Hình 19. Chức năng trò chuyện nhóm

Tại đây, các người dùng đã được thêm sẽ có thể trò chuyện với nhau tương tự như trò chuyện cá nhân.

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

Hoàn thiện các tính năng chưa phát triển Phát triển ứng dụng trên nền tảng khác

Trang 34


DANH MỤC THAM KHẢO

[NodeJS documentation] - https://nodejs.org/en/docs/ [Express JS tempale engine] - https://expressjs.com/ [Socket.io documentation] - https://socket.io/docs/

Trang 35

https://socket.io/docs/

https://expressjs.com/

https://nodejs.org/en/docs/

mẪu ĐỒ Án -khoÁ luẬn tỐt...

Documents