BÁO CÁO BÀI TẬP LỚN HỆ THỐNG CHAT

- Thiết kế được hệ thống Chat đơn giản: đăng nhập – đăng xuất khỏi hệ thống chat, trao đổi thông tin chat giữa các User trong hệ thống - Tích hợp các chức tính năng trong Hệ thống Chat:

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VI ỆN ĐIỆN -    -

Giáo viên hướng dẫn: Nguyễn Quốc Cường

Nhóm 11: Nguyễn Hải Đăng 20181379

Trần Công Vinh 20181846

Trần Quốc Thắng 20181758

Hà N ội, năm 2022

L ời nói đầu

Trong thời đại 4.0, khi khoa học công nghệ ngày càng phát triển thì việc con người có thể kết nối giao tiếp, trò chuyện với nhau cho dù có ở bất kỳ đâu trên thế giới nếu đáp ứng đủ công nghệ , ví dụ như: hình thức CHAT trực tuyến theo thời gian thực, gmail,… Trong đó, hình thức chat trực tuyến là một hình thức được phát triển hơn cả Hiện nay, mạng Lan/Internet đã có những tiến bộ vượt bậc và ngày càng phổ biến hơn trong đồi sống sinh hoat Điều này làm cho nhu cầu liên lạc và trao đổi thông tin thông qua mạng Lan/Internet ngày càng lớn hơn Chính

vì vậy, chương trình Chat trên mạng Lan/Internet được xây dựng để đáp ứng phần nào những nhu cầu cấp thiết đó

Do tình hình dịch bệnh của COVID-19 đang căng thẳng như hiện tại nên nhóm chúng em không thể trao đổi trực tiếp với nhau mà phải thông qua TEAMS nên dù đã cố gằng hoàn thành bài báo cáo của nhóm nhưng vẫn còn những thiếu sót nhất định trong quá trình làm Do đó mong thầy góp ý cho nhóm chúng em để chúng em có thể hiểu rõ và có cái nhìn hoàn thiện nhất về dự án

Nhóm em xin cảm ơn thầy

MỤC LỤC

1 Yêu c ầu, mục tiêu, kết quả cần đạt 4

1.1 Yêu c ầu: 4

1.2 M ục tiêu, kết quả cần đạt: 4

2 Kế hoạch thực hiện 5

3 Phân tích – thiết kế 6

3.1 Phân tích yêu c ầu và chức năng 6

3.2 Thi ết kế kiến trúc 7

3.3 Thi ết kế module 8

3.4 Tri ển khai 8

3.4.1 L ập trình cho máy chủ 9

3.4.2 L ập trình cho máy khách 9

3.4.3 Thi ết lập kết nối giữa máy chủ và máy khách 12

3.4.4 Thi ết kế ứng dụng Chat 13

4 Đánh giá kiểm tra 21

4.1 Đánh giá thiết kế kiến trúc 21

4.2 Đánh giá thiết kế module 22

4.3 Đánh giá thiết kế giao diện 23

5 Kết luận 23

6 Tài liệu tham khảo 24

1 Yêu cầu, mục tiêu, kết quả cần đạt

1.1 Yêu cầu:

Xây dựng chương trình Chat hoạt động trong mạng Lan/Internet với các

chức năng cơ bản như: gửi tin nhắn, lưu thông tin bạn bè

1.2 Mục tiêu, kết quả cần đạt:

- Thiết kế kiến trúc của hệ thống

- Xây dựng mô hình hoạt động của Hệ thống chat

- Tìm hiểu, lựa chọn các giao thức mạng trong Hệ thống Chat

- Thiết kế được hệ thống Chat đơn giản: đăng nhập – đăng xuất khỏi hệ thống chat, trao đổi thông tin (chat) giữa các User trong hệ thống

- Tích hợp các chức tính năng trong Hệ thống Chat: chat riêng, chat nhóm,

gửi file, ảnh, lưu trữ dữ liệu người dùng,…

Thắng Tìm hiểu các mã nguồn, dự án có sẵn 90

Tuần 9 Vinh Phân tích lại mô hình mạng, lựa chọn các

Đăng Thiết kế mô hình chat Client, Server 80

Thắng Tìm hiểu ngôn ngữ HTML 75

Tuần 12 Chung Tìm hiểu code của mã nguồn, triển khai viết

code, cài đặt phần mềm, thư viện

80

Tuần 13 Vinh +

Thắng

Tìm hiểu, thiết kế đăng nhập User 60

Đăng Thiết kế phần đăng nhập User + thiết kế

giao diện

90

Đăng + Thắng

Tìm hiểu, thiết kế phần chat, fix lỗi 80

Tuần 15 Vinh +

Thắng

Đánh giá lại hệ thống, làm bài tập trên lớp 70

Đăng + Thắng

Đánh giá hệ thống, fix lỗi, bổ xung tính

năng

70

3 Phân tích – thiết kế

3.1 Phân tích yêu cầu và chức năng

Đề tài: Thiết kế hệ thống chat trên mạng Internet

Phân tích: Người dùng sẽ tương tác trực tiếp trên các trang web (máy khách Client) để có thể chat với nhau nhờ có máy chủ (Server) ở giữa là trung gian

Yêu cầu, chức năng: Với yêu cầu của đề tài Ta sẽ chia ra 3 thể loại chat trong ứng dụng, bao gồm: Chat chung, Chat riêng, Chat nhóm Ngoài ra, cần thiết

kế thêm giao diện đăng nhập đơn giản để xác định mỗi người dùng, cùng với đăng

xuất ra khỏi hệ thống

• Chat chung: là tất cả mọi người đều có thể nhắn tin và gửi đến toàn bộ người đang trực tuyến Phù hợp với việc thông báo đến tất cả mọi người các thông báo, và cũng từ đây có thể thông báo địa chỉ phòng cho những người cùng nhóm

• Chat nhóm: là nhắn tin đến một nhóm người cụ thể Một nhóm có thể có từ một người trở lên, việc tạo phòng sẽ luôn luôn thành công cho tất cả người dùng Nếu phòng đã tồn tại, bạn sẽ tham gia vào phòng đó, nếu phòng không

tồn tại, bạn sẽ tạo phòng

• Chat riêng: phần đặc thù nhất của ứng dụng chat là việc nói chuyện với một người cụ thể Với việc mỗi lần đăng nhập thì thư viện socket.io sẽ tạo một

ID cùng với tên đăng nhập để xác định người dùng Để nhắn tin riêng, bạn

chỉ cần click vào tên người nhận, rồi chỉ việc nhắn tin và gửi

Kiến trúc của hệ thống gồm có 3 phần:

• Máy chủ Server:

Máy chủ được tạo ra và quản lý bởi máy tính (lập trình trên phần mềm Atom) Máy chủ sẽ tạo liên kết với các trang web Các tương tác của người dùng đều được báo cáo về máy chủ thông qua trình duyệt cmd trên máy tính Máy chủ

tạo ra 1 localhost Các trang web muốn kết nối với nhau thông qua máy chủ phải truy cập vào localhost này

• Máy khách Client:

Chính là các trang web Người sử dụng sẽ tương tác trên web để có thể thực hiện Chat Mọi hoạt động trên web đều được máy chủ quản lý Các web cùng phải truy cập vào cùng 1 localhost do máy chủ tạo ra để có thể cùng liên kết với máy

chủ

• Giao tiếp giữa máy chủ và máy khách:

Máy chủ và máy khách giao tiếp với nhau thông qua cơ chế Socket TCP Nhóm em sử dụng thư viện Socket.io cùng với một số hàm đặc trưng trong thư viện này để thiết lập tương tác 2 chiều giữa máy chủ và máy khách Với mỗi hành động như đăng nhập, nhắn tin, đăng xuất…( thực hiện trên web) thì đều được máy

chủ lắng nghe và thực hiện các lệnh để đáp những thông điệp đó

3.3 Thiết kế module

Xây dựng các module trong dự án:

1 Thiết lập, lập trình tạo máy chủ ảo

2 Lập trình cho máy khách:

• Thiết kế giao diện HTML cho máy khách

• Thiết kế giao diện người dùng

• Thiết lập kết nối đến máy chủ

3 Thiết lập kết nối giữa máy chủ và máy khách

4 Thiết kế ứng dụng chat:

• Thiết kế phần đăng nhập, đăng xuất cho người dùng

• Thiết kế ứng dụng chat riêng, chat nhóm

3.4 Triển khai

Trước khi lập trình, ta sẽ tạo thư mục để thiết kế phần mềm:

✓ Tạo môt thư mục chat-appilcation chứa toàn bộ source của project

✓ Tạo file package.json để mô tả cũng như khai báo các cấu hình của project

✓ Trong thư mục, tạo file index.html để hiển thị giao diện chat cho người dùng

✓ Tạo file Server.js để cài đặt server cho ứng dụng

✓ Tiếp theo tạo file Chat.js để sử dụng ở phía client

✓ Cuối cùng là file layout.css để thiết kế giao diện cho đề tài

Đến đây ta đã hoàn thành cài đặt chương trình cho Chat, ta sẽ lập trình vào từng file cụ thể như sau:

3.4.1 Lập trình cho máy chủ

Để thiết lập máy chủ, nhóm sử dụng thư viện express, module HTTP để tạo máy chủ ảo Sau khi thành công người dùng có thể tương tác với máy chủ qua trang web theo đường link: http:/localhost:3000 (Địa chỉ Localhost được đặt bất

Thi ết lập giao diện HTML: Đây là giao diện người dùng trên web Bây giờ,

tạo tập tin trangchu.ejs của bạn trong thư mục công cộng Trong đó, chúng ta sẽ

cần tạo một tài liệu HTML với các mục sau:

• Chúng ta bắt đầu html với các thẻ DOCTYPE, html, head, và body Trong thẻ head, chúng ta thêm tiêu đề cho web, liên kết đến thư việc socket.io và

liên kết đến stylesheet.css của chúng ta (layout.css)

• Bên trong thẻ body, chúng ta cấu trúc layout của chúng ta bên trong thẻ div

#wrapper Chúng ta sẽ có ba khối chính: LoginForm, chatform, và input để nhập tin nhắn của chúng ta; mỗi cái đi kèm với div và id tương ứng của nó

➢ Thẻ div #LoginForm là cửa sổ đăng nhập bao gồm: “What is your name ?”, dòng nhập tên và nút bấm Login

➢ Thẻ div #ChatForm sẽ chứa chatlog của chúng ta Bao gồm giao diện chat: Danh sách trực tuyến, 3 kênh chat: chat chung, chat nhóm, chat riêng Cùng với các nút bấm và dòng text gõ tin nhắn

➢ Phần tử cuối cùng trong div #wrapper sẽ là form của chúng ta

• Chúng ta sẽ nạp tất cả các code sau khi hệ thống đã sẵn sàng

Thiết kế giao diện người dùng:

Ta sử dụng ngôn ngữ CSS – Cascading Style Sheet language Nó dùng để tạo

mẫu và định kiểu cho trang web Tất cả mọi thứ đều có thể thiết kế được

Trước tiên là trang đăng nhập

Rồi đến giao diện chat:

Thi ết lập kết nối đến máy chủ:

Ở client, ta cần xác định địa chỉ của server để truy cập Sau khi định được địa chỉ, máy khách có thể truy cập máy chủ qua địa chỉ đấy

3.4.3 Thiết lập kết nối giữa máy chủ và máy khách

Mở tập tin chatjs Tại thời điểm này, chúng ta cần kết nối với máy chủ bằng io.connect Khi kết nối, chúng ta phát ra một thông báo để xác nhận kết nối của chúng ta với sự kiện truy cập Sau đó, chúng ta có thể mở lại tập tin server.js của

mình và ghi lại một thông báo rằng máy khách được kết nối Ngoài ra, chúng ta có

thể lắng nghe sự kiện join đã viết trước đó để ghi lại dữ liệu từ máy khách Đây là cách nó sẽ hoạt động:

Bây giờ, ta chạy lại tệp server.js trong cmd của máy và làm mới localhost:3000 trong trình duyệt, ta sẽ thấy các thông báo có người kết nối kèm với ID trình duyệt đó

Địa chỉ của mỗi người dùng

Với việc đăng nhập đơn giản với tên đăng nhập, server sẽ không lưu giữ bất

kỳ thông tin nào của người dùng bao gồm tên và địa chỉ socketID

SocketID là địa chỉ mà mỗi lần sử dụng trình duyệt, thư việc socketio sẽ tạo

ra một địa chỉ ID để xác nhận người dùng Do đó, với mỗi lần sử dụng một trình

duyệt mới hoặc tái khởi động lại trình duyệt cũ, thư viện socketID sẽ tự tạo ra một địa chỉ mới cho người dùng

Cùng với tên đăng nhập, socketID chính là hai dữ liệu để người dùng có thể xác định được đích đến nếu muốn gửi tin nhắn riêng cho người khác

Quá trình đăng nhập:

➢ Mô tả:

Downloaded by Quang Tr?n (tranquang141994@gmail.com)

Khi một User yêu cầu đăng nhập hệ thống, Client sẽ gởi Username cho Server Sau đó, Server sẽ kiểm tra Username này đã đăng nhập chưa Nếu đăng

nhập thành công, Server sẽ lấy danh sách các Friend đang Online của User và gởi cho User và cập nhật lại trạng thái đăng nhập của User Đồng thời cũng gởi thông báo đến các Users khác có Friend là User này mới đăng nhập

Chúng ta sẽ cài đặt một form đơn giản yêu cầu người dùng nhập tên của họ khi truy cập vào hệ thống

Hàm loginForm() mà chúng ta tạo ra được tạo thành từ một form đăng nhập đơn giản yêu cầu người dùng nhập tên của họ Ta sẽ yêu cầu người dùng phải nhập tên có ký tự mới thành công Nếu sai hệ thống yêu cầu nhập lại

Sau khi đăng nhập thành công, Form đăng nhập sẽ mất và hiển thị giao diện chat của phần mềm Những tác vụ này được lập trình trong file chat.js Khi vào giao diện Chat, sẽ có thông báo cho người dùng: Welcome [username]

Đăng xuất khỏi hệ thống

Downloaded by Quang Tr?n (tranquang141994@gmail.com)

Yêu cầu: Khi người dùng đăng xuất khỏi hệ thống, server sẽ báo cho các người dùng khác Nếu người dùng mất kết nối giữa chừng thì hệ thống vẫn hiểu

cập nhật lại trạng thái đăng nhập của User

Để cho phép người dùng đăng xuất khỏi hệ thống, ta sử dụng jQuery ngắn

gọn:

Downloaded by Quang Tr?n (tranquang141994@gmail.com)

Sau khi nhấn nút Logout, server sẽ xóa người dùng khỏi hệ thống, và chuyển hướng người dùng đến trang đăng nhập từ đầu

3.4.4.2 Thiết kế ứng dụng Chat

Ở bước này, ta đã có kết nối giữa server và client, ta có thể dùng nó để phát

và gửi tin nhắn cùng với những yêu cầu cụ thể của bài tập Ta sẽ lập trình trong

tập tin server.js và chat.js – thiết lập kết nối giữa máy chủ và máy khách Thư viện chính được sử dụng là Socket.io

K ết nối giữa máy chủ và máy khách

Sau khi đăng nhập thành công vào hệ thống Cả server và client đều sẽ phát

và lắng nghe sự kiện từ bên kia Với socketio – cung cấp kết nối, giao tiếp từ hai phía ngay lập tức Ta sẽ sử dụng thư viện socketio để thiết kế ứng dụng chat thời gian thực

Hiểu một cách đơn giản, từ client A muốn gửi tin nhắn đến client B ở địa chỉ IP khác Client A sẽ phát sự kiện gửi tin nhắn cùng với dữ liệu lên server – Server lắng nghe sự kiện từ client A sau đó phát sự kiện gửi tin nhắn cùng với dữ

liệu từ server xuống client B – Client B lắng nghe sự kiện từ server sau đó nhận được dữ liệu từ server Không chỉ vậy, client B đồng thời gửi sự kiện đã nhận được

dữ liệu từ client A lên server – Server lắng nghe sự kiện từ client B và gửi sự kiện

xuống client A, từ đó client A lắng nghe sự kiện từ Server và biết được Client B

đã nhận được tin nhắn của mình Tất cả sự kiện diễn ra ở trên diễn ra ngay lập tức,

đó chính là chức năng của socketio vào những ứng dụng yêu cầu thời gian thực

Chat ở kênh chung

Với tất cả người đăng nhập, giao diện hiện thỉ luôn có kênh chung để gửi tin nhắn đến toàn bộ server Lập trình cho máy chủ và máy khách như sau

o Máy chủ:

Downloaded by Quang Tr?n (tranquang141994@gmail.com)

Hàm io.sockets.emit để gửi tin nhắn đến tất cả client khác trong server Sau khi lắng nghe sự kiện từ người gửi, máy chủ sẽ phát sự kiện tới tất cả máy khách

o Máy khách:

Có 2 giao đoạn xử lý:

Một là người gửi gửi tin nhắn lên kênh chat chung Người gửi phát sự kiện lên máy chủ:

Với máy khách, sẽ lắng nghe sự kiện từ server gửi xuống

Sau khi nghe được sự kiện, mục Chat chung của toàn bộ máy khách sẽ hiện tin nhắn từ người gửi

Chat ở nhóm

Thư viện socketio có thêm tính năng vượt trội so với các thư viện khác đó

là giúp cho lập trình được các phòng chat (Room) Với mỗi socketID có sẵn, mỗi

Downloaded by Quang Tr?n (tranquang141994@gmail.com)

người dùng luôn ở trong phòng của chính mình, và người khác có thêm tham gia theo socketID có sẵn đấy

Tuy nhiên, socketID là không cố định nên việc xác định phòng rất khó Nên

để có thể tham gia vào một nhóm chat riêng, ta sẽ lập trình cho việc người dùng

tạo phòng và tham gia phòng theo tên phòng

Để đơn giản hóa cho việc lập trình, mỗi người dùng trong một thời điểm chỉ được tham gia một phòng duy nhất Nếu muốn tham gia phòng khác, bắt buộc người dùng không ở trong phòng nào Nếu đang trong phòng, người dùng phải rời phòng trước khi vào phòng mới

o Máy khách:

Người dùng muốn tạo hoặc tham gia phòng, sẽ phải điền thông tin tên phòng Nếu phòng đã có sẵn, người dùng sẽ tham gia vào phòng Nếu không, người dùng tạo ra một phòng mới Nếu một phòng đã tạo nhưng không chứa người dùng, máy chủ sẽ tự động xóa phòng đó

Downloaded by Quang Tr?n (tranquang141994@gmail.com)

Sau khi thoát phòng, mọi tin nhắn trong phòng sẽ bị xóa trong cửa sổ nhắn

Từ người gửi, gửi sự kiện nhắn tin lên server Server lắng nghe sự kiện và trả về cho những người dùng trong phòng

o Máy chủ:

Lắng nghe sự kiện từ máy khách, máy chủ gửi sự kiện tham gia phòng cho máy khách đó

Tên phòng không được dài hơn 10 ký tự

Sau khi tham gia phòng, sẽ đến gửi tin nhắn đến những người trong phòng

Downloaded by Quang Tr?n (tranquang141994@gmail.com)

Cú pháp io.sockets.in(socket.Phong).emit để gửi đến những người trong phòng đó

Cuối cùng là lập trình cho việc rời phòng và xóa tin nhắn cũ

Từ máy khách:

Đến máy chủ:

Chat riêng cho người khác

Thư viện socketio có hỗ trợ đầy đủ tính năng chat: bao gồm tất cả người dùng đều nhận được tin nhắn, tất cả người dùng trừ người gửi nhận được tin nhắn,

một nhóm người dùng nhận được tin nhắn, nhắn tin riêng với một người cụ thể

Để nhắn tin riêng, socketio sử dụng lệnh io.to(socketID_người nhận).emit

để gửi tới người nhận Do đó, để dễ dàng thao tác cho việc nhắn tin riêng, ta lập trình thêm danh sách những người đang trực tuyết bao gồm tên và socketid của người đó Từ đó, nếu một người muốn gửi thông tin đến người khác, họ chỉ việc bấm chọn vào tên người gửi để truy xuất địa chỉ socketID cho máy chủ đọc

Với hoạt động của Socket.io, việc gửi tin từ người A sang B cũng chuyển lên cho máy chủ để đọc sự kiện và gửi đến đích, sau đó sẽ trả phản hồi về cho bên gửi

Downloaded by Quang Tr?n (tranquang141994@gmail.com)