MẪU ĐỒ ÁN -KHOÁ LUẬN TỐT NGHIỆP



ĐẠI HỌC ĐÀ NẴNG

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT-HÀN

-----(((((-----

ĐỒ ÁN CƠ SỞ 4

[pic]

ĐỀ TÀI

XÂY DỰNG ỨNG DỤNG LÀM VIỆC TRỰC TUYẾN

Sinh Viên Thực Hiện: Nguyễn Văn Sang

Mã sinh viên – Lớp: 18IT099 - 18IT2

Giảng Viên Hướng Dẫn: ThS. Trần Uyển Trang

Đà Nẵng, tháng năm 2020

ĐẠI HỌC ĐÀ NẴNG

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT-HÀN

ĐỒ ÁN CƠ SỞ 4

ĐỀ TÀI

XÂY DỰNG ỨNG DỤNG LÀM VIỆC TRỰC TUYẾN

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

MỞ ĐẦU

Trong xã hội hiện nay việc giao tiếp với nhau ngày càng tiên tiến và hiện đại, chúng ta có thể gặp được những người bạn , đối tác chỉ với một chiếc máy tính hay điện thoại di động điều này sẽ làm giảm bớt thời gian và công việc của bạn. Với những nhu cầu làm việc từ xa được tăng cao một cách nhanh chóng đi cùng với đó là các nền tảng mạng xã hội và các nền tảng mạng làm việc được ra đời ví dụ như : Facebook, Zalo… .Chạy đua với nhu cầu làm việc của con người thì việc đòi hỏi một nền tảng hoạt động ổn định rất là cần thiết.

Bắt nguồn từ ý tưởng này cùng với ý tưởng này cùng với sự gợi ý của cô Trần Uyển Trang, e đã thực hiện đồ án :

“ XÂY DỰNG ỨNG DỤNG LÀM VIỆC TRỰC TUYẾN”.

Cấu trúc đồ án bao gồm:

Chương 1: Giới thiệu tổng quan

Chương 2: Phân tích và thiết kế hệ thống

Chương 3: Xây dựng ứng dụng

Chương 4: Chương trình

Chương 5: Kết luận

LỜI CẢM ƠN

Lời đầu tiên, em xin trân trọng gửi lời cảm ơn sâu sắc nhất tới giảng viên hướng dẫn đồ án cơ sở 4 cô Trần Uyển Trang đã nhiệt tình đóng góp ý kiến và hướng dẫn chúng em hoàn thành tốt đồ án này.

Em xin chân thành cảm ơn các thầy cô giáo đang giảng dạy tại Trường Đại học công nghệ thông tin và truyền thông Việt Hàn – Đại học Đà Nẵng đã nhiệt tình ủng hộ, cung cấp tài liệu và đưa ra những ý kiến góp ý quý báu.

Cuối cùng, em xin chân thành cảm ơn tới bạn bè đã động viên, khuyến khích và tạo điều kiện cho chúng tôi hoàn thành tốt đề tài của mình.

Chúng em xin chân thành cảm ơn!

Sinh viên thực hiện

Nguyễn Văn Sang – 18IT099

Đà Nẵng, tháng năm 2020

MỤC LỤC

Trang

Chương 1 Giới thiệu tổng quan 1

1.1 Tổng quan về mô hình client-server và giao thức FTP: 1

1.1.1 Mô hình client - server: 1

1.1.2 User File Transfer Protocol (FTP): 2

1.2 Sơ lược về Nodejs: 2

1.2.1 Khái niệm 2

1.2.2 Ưu điểm của Nodejs 3

1.2.3 Hạn chế của Nodejs: 3

1.2.4 Các thư viện được tích hợp trong đồ án: 4

1.3 Tìm hiểu về webpack. 4

1.3.1 Webpack là gì? 4

1.3.2 Ưu điểm của webpack 5

1.4 Sơ lược về Expressjs 5

1.4.1 Giới thiệu về Expressjs 5

1.4.2 Cấu trúc của Expressjs: 6

1.5 Công cụ lập trình Visual Studio Code: 6

1.5.1 Một số tính năng nỗi bật của Visual Studio Code 6

1.5.2 Tại sao nên sử dụng Visual Studio Code? 8

Chương 2 Phân tích & thiết kế hệ thống 9

2.1 Giới thiệu bài toán: 9

2.1.1 Đề tài: 9

2.1.2 Yêu cầu: 9

2.1.3 Mục tiêu: 9

2.1.4 Phương pháp: 9

2.2 Thiết kế hệ thống 10

2.2.1 Actor và chức năng 10

2.2.2 Sơ đồ use case 10

Chương 3 Xây dựng ứng dụng 12

3.1 Tạo mô hình Client server bằng thư viện Socket.io: 12

3.2 Sử dụng Base64 16

3.3 Sử dụng thư viện simple-peer để tạo nên kết nối P2P 18

Chương 4 Chương trình 19

4.1 Kết quả đạt được: 19

4.2 Giao điện chương trình: 19

4.2.1 Khởi tạo tên và room chat 19

4.2.2 Room chat 20

Chương 5 Kết luận 22

5.1 Kết quả đạt được: 22

5.2 Hạn chế 22

5.3 Hướng phát triển 22

TÀI LIỆU THAM KHẢO 23

DANH MỤC HÌNH ẢNH

Trang

Hình 1-1 Mô hình client - Server 1

Hình 1-2 mô hình webpack 4

Hình 1-3 Cấu trúc thư mục express 6

Hình 2-1 Client Use case 10

Hình 2-2 Use case cho Adminstrator 11

Hình 3-1 Bảng mã ASCII 16

Hình 4-1 Giao diện khởi tạo tên và room chat 19

Hình 4-2 Giao diện room chat. 20

Hình 4-3 Hộp thông báo video call 21

Hình 4-4 Giao diện Video call trong room chat 21

DANH MỤC CÁC BẢNG

Trang

No table of figures entries found.

Giới thiệu tổng quan

1 Tổng quan về mô hình client-server và giao thức.

1 Mô hình client - server:

Các máy trạm được nối với các máy chủ, nhận quyền truy nhập mạng và tài nguyên mạng từ các máy chủ. Đối với Windows NT các máy được tổ chức thành các miền (domain). An ninh trên các domain được quản lý bởi một số máy chủ đặc biệt gọi là domain controller. Trên domain có một master domain controller được gọi là PDC (Primary Domain Controller) và một BDC (Backup Domain Controller) để đề phòng trường hợp PDC gặp sự cố.

Mô hình phần mềm Client/Server là mô hình giải pháp phần mềm cho việc khắc phục tình trạng quá tải trên mạng và vượt qua những ngăn cách về sự khác nhau trong cấu trúc vật lý cũng như hệ điều hành của các hệ thống máy tính khác nhau trên mạng.

Mỗi phần mềm xây dựng theo mô hình Client/Server sẽ được chia làm hai phần: phần hoạt động trên máy phục vụ gọi là phần phía Server và phần hoạt động trên trạm làm việc gọi là phần phía Client. Với mô hình này các trạm làm việc cũng được gọi là các Client (hay máy Client) còn các máy phục vụ gọi là các Server. Nhiệm vụ của mỗi phần được quy định như sau:

➢ Phần phía Server quản lý các giao tiếp môi trường bên ngoài tại Server và với các Client, tiếp nhận các yêu cầu dưới dạng các xâu ký tự (query string), phân tích các query string, xử lý dữ liệu và gửi kết quả trả lời về phía các Client.

➢ Phần phía Client tổ chức giao tiếp với người dùng, với môi trường bên ngoài tại trạm làm việc và với phía Server, tiếp nhận yêu cầu của người dùng, thành lập các query string gửi về phía Server, tiếp nhận kết quả và tổ chức trình diễn chúng.

[pic]

Hình 1-1 Mô hình client - Server

2 User File Transfer Protocol (FTP):

1 FTP là gì?

FTP viết tắt từ File Transfer Protocol, là một giao thức truyền tải tập tin từ máy tính này đến máy tính khác thông qua một mạng TCP hoặc qua mạng Internet. Nhờ vào giao thức này nên người sử dụng có thể tải dữ liệu như hình ảnh, văn bản, các tập tin nhạc, video... từ máy tính của mình lên máy chủ đang đặt ở một nơi khác hoặc tải các tập tin đã có trên máy chủ về máy tính cá nhân của mình một cách dễ dàng. FTP cũng là giao thức dùng để truyền tải dữ liệu web lên máy chủ web cho dù máy chủ đặt rất xa.

2 Ứng dụng của FTP:

Giao thức FTP được sử dụng nhiều nhất vào mục đích truyền tải dữ liệu, rút gọn thời gian cũng như đáp ứng nhu cầu của việc tải và truyền đi của các dữ liệu dung lượng lớn một cách nhanh chóng. Bạn có thể gửi đi và nhận những tệp tin có dung lượng lên đến vài trăm MB mà không phải lo lắng nó không được chuyển đi. Điều quan trọng là bạn có thể cùng lúc thực hiện việc upload/download nhiều tập tin để tiết kiệm thời gian mà không hề gặp phải vấn đề gì.

2 Sơ lược về Nodejs:

Phiên bản sử dụng trong đồ án: Nodejs v12.18.4

1 Khái niệm

Node.js là một nền tảng chạy trên môi trường V8 JavaScript runtime -một trình thông dịch JavaScript cực nhanh chạy trên trình duyệt Chrome. Bình thường thì bạn cũng có thể tải bộ V8 và nhúng nó vào bất cứ thứ gì, Node.js làm điều đó đối với các web server. JavaScript suy cho cùng cũng chỉ là một ngôn ngữ - vậy thì không có lý do gì để nói nó không thể sử dụng trên môi trường server tốt như là trong trình duyệt của người dùng được.

Trong một môi trường server điển hình LAMP (Linux-Apache-MySQL-PHP), bạn có một web server là Apache hoặc NGINX nằm dưới, cùng với PHP chạy trên nó. Mỗi một kết nối tới server sẽ sinh ra một thread mới, và điều này khiến ứng dụng nhanh chóng trở nên chậm chạp hoặc quá tải - cách duy nhất để hỗ trợ nhiều người dùng hơn là bằng cách bổ sung thêm nhiều máy chủ. Đơn giản là nó không có khả năng mở rộng tốt. Nhưng với Node.js thì điều này không phải là vấn đề. Không có một máy chủ Apache lắng nghe các kết nối tới và trả về mã trạng thái HTTP - bạn sẽ phải tự quản lý kiến trúc lõi của máy chủ đó. May mắn thay, có một số module giúp thực hiện điều này được dễ dàng hơn, nhưng công việc này vẫn gây cho bạn một chút khó khăn khi mới bắt đầu. Tuy nhiên, kết quả thu được là một ứng dụng web có tốc độ thực thi cao.

2 Ưu điểm của Nodejs

- Đặc điểm nổi bật của Node.js là nó nhận và xử lý nhiều kết nối chỉ với một single-thread. Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy vấn giống PHP.

Ngoài ra, tận dụng ưu điểm non-blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ như PHP.

- JSON APIs: Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON.

- Ứng dụng trên 1 trang ( Single page Application ): Nếu bạn định viết 1 ứng dụng thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm. Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh. Các ứng dụng bạn định viết không muốn nó tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt động nhanh để thể hiện sự chuyên nghiệp thì NodeJS sẽ là sự lựa chọn của bạn.

- Shelling tools unix: NodeJS sẽ tận dụng tối đa Unix để hoạt động. Tức là NodeJS có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất.

- Streamming Data ( Luồng dữ liệu ): Các web thông thường gửi HTTP request và nhận phản hồi lại ( Luồng dữ liệu ). Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác.

- Ứng dụng Web thời gian thực: Với sự ra đời của các ứng dụng di động & HTML 5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực ( real-time applications ) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter …

3 Hạn chế của Nodejs:

- Ứng dụng nặng tốn tài nguyên: Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS ( Lý do: NodeJS được viết bằng C++ & Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút ). Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng hiệu suất tối đa.

- NodeJS và ngôn ngữ khác: NodeJS, PHP, Ruby, Python .NET …thì việc cuối cùng là phát triển các App Web. NodeJS mới sơ khai như các ngôn ngữ lập trình khác. Vậy nên bạn đừng hi vọng NodeJS sẽ không hơn PHP, Ruby, Python… ở thời điểm này. Nhưng với NodeJS bạn có thể có 1 ứng dụng như mong đợi, điều đó là chắc chắn.

4 Các thư viện được tích hợp trong đồ án:

– Express : là một framework được xây dựng trên nền tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.

– Socket.io : là một module trong Node.js được phát triển vào năm 2010. Nó được phát triển để sử dụng các kết nối mở để tạo điều kiện giao tiếp thời gian thực, trả về giá trị thực ở tại thời điểm đó. Socket.io cho phép giao tiếp hai chiều giữa máy khách và máy chủ. Giao tiếp hai chiều được bật khi máy khách có Socket.io trong trình duyệt và máy chủ cũng đã tích hợp gói Socket.io.

– Moment : là một thư viện mạnh dùng để thao tác xử lý datetime trong javascript.

– Nodemon : dung để start server mỗi lần code được thay đổi.

– Simple-peer : là một thư viện cho phép chúng ta có thể thực hiện kết nối ngang hàng peer-to-peer để gửi hình ảnh video cho phép 2 peer có thể giao tiếp với nhau qua hình ảnh. Simper-peer có phần mở rộng hơn đó là cho phép thực hiện kết nối với nhiều hơn 2 peer giúp chúng ta có thể gọi video trong một nhóm.

3 Tìm hiểu về webpack.

1 Webpack là gì?

Webpack là công cụ giúp bạn compile các module Javascript. Nó hay được gọi là “module bundler”.

[pic]

Hình 1-2 mô hình webpack

2 Ưu điểm của webpack

Một số ưu điểm khi dùng webpack

- Giúp cho cho project dễ dàng phát triển, quản lý, customize

- Tăng tốc độ cho project

- Phân chia các module và chỉ load khi cần

- Đóng gói tất cả file nguồn thành một file duy nhất, nhờ vào loader mà có thể biên dịch các loại file khác nhau

- Biến các tài nguyên tĩnh ( image, css) trở thành 1 module

- Chuyển đổi các mã nguồn : JSX, less, sass, scss thành js, ... ES6 -> ES5 thông qua babel transpiler ...

4 Sơ lược về Expressjs

1 Giới thiệu về Expressjs

- Được dịch từ tiếng Anh-Express.js, hay đơn giản là Express, là một khung ứng dụng web cho Node.js, được phát hành dưới dạng phần mềm miễn phí và nguồn mở theo Giấy phép MIT. Nó được thiết kế để xây dựng các ứng dụng web và API. Nó đã được gọi là khung máy chủ tiêu chuẩn thực tế cho Node.js.

- Express js là một Framework nhỏ, nhưng linh hoạt được xây dựng trên nền tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile

- Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên các bạn không phải lo lắng khi làm việc với Framework này.

- Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn. Chứ không làm giảm tốc độ của NodeJS.

2 Cấu trúc của Expressjs:

[pic]

Hình 1-3 Cấu trúc thư mục express

- Root: là Folder gốc, là nới chứa projects.

- app.js chứa các thông tin về cấu hình, khai báo, các định nghĩa,... để ứng dụng của chúng ta.

- package.json chứa các package cho ứng dụng chạy.

- Folder routes: chứa các route có trong ứng dụng.

- Folder view: chứa view/template cho ứng dụng.

- Folder public chứa các file css, js, images,...cho ứng dụng.

5 Công cụ lập trình Visual Studio Code:

Phiên bản sử dụng trong đồ án: version 1.51.0

Visual Studio Code (VS Code hay VSC) Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS, Visual Studio Code được phát triển bởi Microsoft. Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor.

Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn. Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác.

1 Một số tính năng nỗi bật của Visual Studio Code

- Hỗ trợ nhiều ngôn ngữ lập trình: Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thông báo nếu chương chương trình có lỗi.

- Hỗ trợ đa nền tảng: Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows hoặc Linux hoặc Mac Systems. Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên.

- Cung cấp kho tiện ích mở rộng: Trong trường hợp lập trình viên muốn sử dụng một ngôn ngữ lập trình không nằm trong số các ngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng. Điều này vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần mở rộng này hoạt động như một chương trình độc lập.

- Kho lưu trữ an toàn: Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn. Với Visual Studio Code, người dùng có thể hoàn toàn yên tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.

- Hỗ trợ web: Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngoài ra, nó cũng có một trình soạn thảo và thiết kế website.

- Lưu trữ dữ liệu dạng phân cấp: Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau. Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một số tệp đặc biệt quan trọng.

- Hỗ trợ viết Code: Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng. Visual Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.

- Hỗ trợ thiết bị đầu cuối: Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác.

- Màn hình đa nhiệm: Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục – mặc dù chúng không hề liên quan với nhau.

- Intellisense: Hầu hết các trình viết mã đều có tính năng nhắc mã Intellisense, nhưng ít chương trình nào chuyên nghiệp bằng Visual Studio Code. Nó có thể phát hiện nếu bất kỳ đoạn mã nào không đầy đủ. Thậm chí, khi lập trình viên quên không khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các cú pháp còn thiếu.

- Hỗ trợ Git: Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub. Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.

- Bình luận: Việc để lại nhận xét giúp người dùng dễ dàng nhớ công việc cần hoàn thành.

2 Tại sao nên sử dụng Visual Studio Code?

Lý do bạn nên sử dụng Visual Studio Code là vì nó có rất nhiều ưu điểm vượt trội so với bất kỳ IDE nào khác:

- Hỗ trợ đa nền tảng: Windows, Linux, Mac.

- Hỗ trợ đa ngôn ngữ: C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, JSON.

- Ít dung lượng.

- Tính năng mạnh mẽ.

- Intellisense chuyên nghiệp.

- Giao diện thân thiện.

Và trên hết, Visual Studio Code là phần mềm miễn phí, được đông đảo lập trình viên trên thế giới sử dụng.

Phân tích & thiết kế hệ thống

1 Giới thiệu bài toán:

1 Đề tài:

Xây dựng ứng dụng làm việc trực tuyến.

2 Yêu cầu:

❖ Cấu trúc cây thư mục cho nodejs.

❖ Cài đặt các thư viện hỗ trợ cần thiết.

❖ Xây dựng mô hình Client-Server.

❖ Chức năng share file giữa server – client.

❖ Chức năng video call bằng mô hình peer-to-peer.

3 Mục tiêu:

➢ Xây dựng ứng dụng hoàn chỉnh..

➢ Giao diện đẹp, dễ nhìn, thân thiện người dùng

➢ Ứng dụng chạy ổn định trên môi trường Solaris, Linux, Windows 95/98/NT/2000/XP.

➢ Share file, hình ảnh gửi tin nhắn giữa client – client.

➢ Video call trong room chat.

4 Phương pháp:

– Sử dụng thư viện Socket.io trong nodejs để tạo nên các socket liên kết server–client.

– Sử dụng webpack để đóng gói các file js, css,… thành một file hoàn chỉnh.

– Sử dụng thư viện Simple-peer để tạo các kết nối peer-to-peer, thực hiện giao tiếp bằng video giữa các client trong room chat.

– Sử dụng base64 để convert file từ dạng binary sang string để có thể gửi đi được trong network một cách dễ dàng. Các binary lúc này sẽ được thể hiện bằng các ký tự mã ASCII.

2 Thiết kế hệ thống

1 Actor và chức năng

▪ Adminstrator

• Hiển thị trang thái user :đăng nhập, thoát, gửi file,….

• Ngắt kết nối user.

▪ User

• Tạo tên và room chat.

• Gửi tin nhắn.

• Gửi file ảnh.

• Video call.

• Xem danh sách user online.

• Rời room chat.

2 Sơ đồ use case

➢ Use case cho client.

[pic]

Hình 2-1 Client Use case

➢ Use case cho adminstrator.

[pic]

Hình 2-2 Use case cho Adminstrator

Xây dựng ứng dụng

1 Tạo mô hình Client server bằng thư viện Socket.io:

Socket.io là một module trong Node.js được phát triển vào năm 2010. Nó được phát triển để sử dụng các kết nối mở để tạo điều kiện giao tiếp thời gian thực, trả về giá trị thực ở tại thời điểm đó. Socket.io cho phép giao tiếp hai chiều giữa máy khách và máy chủ. Giao tiếp hai chiều được bật khi máy khách có Socket.io trong trình duyệt và máy chủ cũng đã tích hợp gói Socket.io

– Tiến hành cài đặt các gói thư viện hỗ trợ cho ứng dụng :

[pic]

– Khởi tạo server với cổng port 3000 , require file app.js và socketio đã được tạo và exports .

[pic]

– Tạo file app.js để setup thư viện express hỗ trợ cho việc sử lí giao diện bên phía frontend, require file routes/web.js để khởi tạo route hỗ trợ cho việc chuyển đổi trang.

[pic]

– Code khai báo sử dụng socketio ở server.

[pic]

– Code khai báo sử dụng socketio ở phía client.

[pic]

– Socket.io có hai cơ chế thông dụng là cơ chế lắng nghe và truyền dữ liệu.

• Để lắng nghe dữ liệu, ta sử dụng câu lệnh socket.on() , socket sẽ lắng nghe các kết nối “ joinRoom” được client gửi tới cùng với dữ liệu kèm theo là các biến username và room là tên của client và room của client gửi lên.

[pic]

• Để phát dữ liệu đi thì ta dùng câu lệnh socket.emit(), câu lệnh socket.emit sẽ có 2 tham số : tham số thứ nhất là tên đường truyền và tham số thứ hai là dữ liệu gửi đi.

[pic]

• Một số lệnh emit được dùng trong socket:

[pic]

3 Sử dụng Base64

Base64 là một chương trình mã hóa chuỗi ký tự bằng cách dùng thay thế các ký tự trong bảng mã ASCII 8 bit thông dụng thành bảng mã 6 bit. Ký tự 64 trong Base64 là đại diện cho 64 ký tự (A-Za-z0-9+/) trong bảng mã ASCII.

[pic]

Hình 3-1 Bảng mã ASCII

– Sử dụng Encode base64 để mã hóa một một chuỗi string hoặc một file thành một chuỗi các kí tự trong bảng mã ASCII. Chúng ta sẽ dùng lệnh socket.emit() để gửi dữ liệu lên server bằng đường dẫn là “sendPhoto” và dữ liệu đã được mã hóa bằng base64.

[pic]

– Bên phía server sẽ dùng lệnh socket.on() để lắng nghe chuỗi kí tự đã được mã hóa sau đó dùng hàm match() để tìm kiếm và trả về các kiểu dữ liệu của file ảnh. Tên của file ảnh sẽ được ramdom ngẫu nhiên bằng hàm randomString() và được lưu vào thư mục uploads của chương trình.

[pic]

- Phía client thực hiện lắng nghe đường truyền “receivePhoto” cùng với file ảnh đã được server lưu vào kho lưu trữ.

[pic]

• Bên trong phương thưc socket.on sẽ thực hiện hàm addImage(), với biến được truyền vào là đường dẫn tới ảnh được lưu trong kho dữ liệu. Ảnh được server gửi tới sẽ được thêm vào khung chat của room.

[pic]

4 Sử dụng thư viện simple-peer để tạo nên kết nối P2P

Simple-peer là một thư viện hỗ trợ cho nodejs thực hiện các kết nối ngang hàng (peer to peer), ngoài ra phần mở rộng hơn simple peer củng có hỗ trợ kẹo kết nối nhiều hơn 2 peer hỗ trợ cho việc video call trong một nhóm chat có nhiều người cùng sử dụng một lúc.

- Về cài đặt thư viện simple-peer khá đơn giản chỉ cần chạy lệnh để cài đặt.

[pic]

- Khai báo tạo các kết nối và sử dụng webcame của máy tính bên phía client. Tạo các kết nối socket đến server và gửi dữ liệu webcame của peer đến các peer khác bằng kết nối “initSend”, lắng nghe các sự kiện bật tắt came và mic của người dùng.

[pic]

Hàm xử lí bật tắt mic khi người dùng click vào mic.

[pic]

Chương trình

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

✓ Hiển thị và khởi chạy chương trình.

✓ Hoàn thành giao diện chương trình.

✓ Hoàn thành cơ bản các chức năng dự kiến.

✓ Xây dựng thành công mô hình client-server .

✓ Giao diện dễ nhìn , dễ sử dụng.

2 Giao điện chương trình:

1 Khởi tạo tên và room chat

Giao diện này sẽ được chạy đầu tiên khi người dùng truy cập vào, người dùng sẽ thực hiện nhập tên và chọn phòng chat mong muốn.

[pic]

Hình 4-1 Giao diện khởi tạo tên và room chat

2 Room chat

Khi người dùng đã tạo tên đăng nhập và chọn room sẽ được chuyển đến room chat. Trong room chat người sử dụng có thể thực hiện các chức năng được hỗ trợ.

- Gửi tin nhắn : Người gửi chỉ cần nhập thông tin cần gửi vào input và nhấn gửi, tin nhắn sẽ được gửi cho những người đang ở trong room chat.

- Gửi ảnh: Người gửi chọn file cần gửi và nhấn send.

- Thoát room: Người sử dụng nhấn vào nút thoát sẽ được trở về lại trang khởi tạo tên và chọn room.

[pic]

Hình 4-2 Giao diện room chat.

- Video call: Người sử dụng sẽ click vào nút call bên trên màn hình sẽ hiện ra một hộp thông báo “bạn có muốn thực hiện cuộc gọi hay không?” nếu không gọi hãy ấn vào biểu tượng close còn muốn gọi thì ấn vào biểu tượng call.

[pic]

Hình 4-3 Hộp thông báo video call

Khi người sử dụng nhấn vào biểu tượng call sẽ được chuyển đến một trang khác để thực hiện call nhóm theo hình bên dưới.

[pic]

Hình 4-4 Giao diện Video call trong room chat

Kết luận

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

✓ Hiển thị và khởi chạy chương trình.

✓ Hoàn thành giao diện chương trình.

✓ Hoàn thành cơ bản các chức năng dự kiến.

✓ Xây dựng thành công mô hình client-server .

✓ Giao diện dễ nhìn , dễ sử dụng.

2 Hạn chế

- Còn một số chức năng chưa hoàn thành.

- Tốc độ khởi chạy chương trình còn chậm, chưa tối ưu.

- Giao diện có một vài phần còn chưa được đẹp.

- Chưa có chức năng share screen như dự kiến ban đầu.

- Còn nhiều lỗi chưa có phương pháp giải quyết.

3 Hướng phát triển

❖ Khắc phục các hạn chế, lập trình và kiểm thử các chức năng còn thiếu.

❖ Tối ưu mã nguồn tốc độ chạy của chương trình.

❖ Thiết kế giao diện dễ nhìn, đẹp mắt hơn.

❖ Tìm ra phương pháp giải quyết lỗi.

❖ Thay vì chạy trên local thì chương trình sẽ được chạy trên miền.

❖ Thêm các biểu tượng, hiệu ứng khi nhắn tin.

❖ Thêm chức năng nhận dạng khuôn mặt bằng opencv.

❖ …..

TÀI LIỆU THAM KHẢO

1.

2.

3.

4.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download