MỞ ĐẦUTrong 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ạ
Trang 1ĐẠI HỌC ĐÀ NẴNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG
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
Môn học: Lập trình mạng Nguyễn Văn Sang
Trang 2ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG
Trang 3MỞ ĐẦ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ớinhữ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ỏimộ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ầnUyể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
Môn học: Lập trình mạng Nguyễn Văn Sang
Trang 4LỜ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ọccô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ôn học: Lập trình mạng Nguyễn Văn Sang
Trang 5
MỤC LỤC
Trang
Chương 1 Giới thiệu tổng quan 1
1.1Tổ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.2Sơ 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.3Tìm hiểu về webpack 4
1.3.1 Webpack là gì? 4
1.3.2 Ưu điểm của webpack 5
1.4Sơ 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.5Cô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.1Giớ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.2Thiế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.1Tạo mô hình Client server bằng thư viện Socket.io: 12
Môn học: Lập trình mạng Nguyễn Văn Sang
Trang 63.2Sử dụng Base64 16
3.3Sử 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.1Kết quả đạt được: 19
4.2Giao đ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.1Kết quả đạt được: 22
5.2Hạn chế 22
5.3Hướng phát triển 22
TÀI LIỆU THAM KHẢO 23
Môn học: Lập trình mạng Nguyễn Văn Sang
Trang 7DANH 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
Môn học: Lập trình mạng Nguyễn Văn Sang
Trang 8DANH MỤC CÁC BẢNG
Trang
No table of figures entries found
Môn học: Lập trình mạng Nguyễn Văn Sang
Trang 9
Chương 1 Giới thiệu tổng quan
1.1 Tổng quan về mô hình client-server và giao thức.
1.1.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ụctì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úcvậ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ầnhoạ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ệcgọ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 (haymá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 địnhnhư 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ácClient, 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ácquery 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ạmlà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 querystring gửi về phía Server, tiếp nhận kết quả và tổ chức trình diễn chúng
Hình 1-1 Mô hình client - Server
Lập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 1 | P a g e
Trang 101.1.2 User File Transfer Protocol (FTP):
1.1.2.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ứcnà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áychủ 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ềntải dữ liệu web lên máy chủ web cho dù máy chủ đặt rất xa
1.1.2.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 giancũ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áchnhanh 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úcthự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ảivấn đề gì
1.2 Sơ lược về Nodejs:
Phiên bản sử dụng trong đồ án: Nodejs v12.18.4
1.2.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ìnhthườ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ônngữ - vậy thì không có lý do gì để nói nó không thể sử dụng trên môi trườngserver 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 PHP), bạn có một web server là Apache hoặc NGINX nằm dưới, cùng với PHPchạ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àykhiến ứng dụng nhanh chóng trở nên chậm chạp hoặc quá tải - cách duy nhất để
(Linux-Apache-MySQL-hỗ trợ nhiều người dùng hơn là bằng cách bổ sung thêm nhiều máy chủ Đơngiản là nó không có khả năng mở rộng tốt Nhưng với Node.js thì điều nàykhô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ủLập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 2 | P a g e
Trang 11đó 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 Tuynhiên, kết quả thu được là một ứng dụng web có tốc độ thực thi cao.
1.2.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 khikhô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ụngtố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àmbằ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 địnhviế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ủabạ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ấthoạ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 để đảmbả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 …
1.2.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ụngtươ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ìnhkhá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
Lập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 3 | P a g e
Trang 121.2.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ó cungcấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ cácmethod 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ó đượcphá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áykhách và máy chủ Giao tiếp hai chiều được bật khi máy khách có Socket.io trongtrì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 nhauqua hình ảnh Simper-peer có phần mở rộng hơn đó là cho phép thực hiện kết nốivới nhiều hơn 2 peer giúp chúng ta có thể gọi video trong một nhóm
1.3 Tìm hiểu về webpack.
1.3.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”
Hình 1-2 mô hình webpack
1.3.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
Lập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 4 | P a g e
Trang 13- 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êndị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ôngqua babel transpiler
1.4 Sơ lược về Expressjs
1.4.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
1.4.2 Cấu trúc của Expressjs:
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
Lập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 5 | P a g e
Trang 14- Folder view: chứa view/template cho ứng dụng.
- Folder public chứa các file css, js, images, cho ứng dụng
1.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ởiMicrosoft 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ọnkhác
1.5.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ảmhiệ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ươngtrì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ấpcá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ọnthay 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ụcgố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ênLập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 6 | P a g e
Trang 15quên không khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các cú phápcò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
1.5.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
Lập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 7 | P a g e
Trang 16Chương 2 Phân tích & thiết kế hệ thống
2.1 Giới thiệu bài toán:
2.1.1 Đề tài:
Xây dựng ứng dụng làm việc trực tuyến
2.1.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
2.1.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
2.1.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
Lập Trình Mạng – Tìm hiểu cơ chế share file bằng webrtc 8 | P a g e