RSS là một định dạng tập tin thuộc họ XML được sử dụng cho việc chia sẻ nội dung website. RSS định dạng lại nội dung của trang web theo dạng một danh sách tóm lượt các đầu nội dung của trang web đó kèm theo link đến phần nội dung đầy đủ cùng những dữ liệu meta khác. Đề tài phần quản trị mạng của báo cáo này là: Xây dụng ứng dụng đọc RSS tổng hợp nội dung các kênh trên nền tảng chia sẻ video Youtube sử dụng mô hình Client Server. Công nghệ sử dụng là Javascript, React, Socket.io
MỤC LỤC PHẦN 2: QUẢN TRỊ MẠNG I Cơ sở lý thuyết: .4 a Mơ hình Client-Server: b Mô hình truyền tin Socket: c Socket.IO: d Sơ lược RSS: II Mô tả đề tài: .9 III Thuật tốn chương trình: a Youtube Search API: b Youtube RSS Feed Extension 11 c Thuật toán chuyển đổi XML thành JSON 12 IV Mã nguồn chương trình demo: 16 a Mã nguồn Client: .16 b Mã nguồn Server 19 c Hình ảnh demo: 22 PHỤ LỤC VÀ TÀI LIỆU THAM KHẢO 26 Phần mạng: 26 ii DANH MỤC HÌNH ẢNH Hình 19 Client gửi yêu cầu Server phản hồi Hình 20 Socket ổ cắm điện Hình 21 Giao tiếp hai chiều Client Server Hình 22 Tổng quan việc kết nối với Socket.IO Hình 23 Logo RSS Hình 24 Giao diện Feedly, ứng dụng đọc tin RSS Hình 25 Thuật tốn đệ quy chuyển đổi XML thành Javascript Object .14 Hình 26 Giao diện tổng quan trang web 22 Hình 27 Chức thêm kênh 22 Hình 28 Tìm kiếm thêm kênh Ted-Ed 23 Hình 29 Giao diện thông tin kênh thêm vào 23 Hình 30 Tiến hành xóa kênh .24 Hình 31 Giao diện sau xóa 24 Hình 32 Nội dung console Server thao tác bước client 25 iii PHẦN 2: QUẢN TRỊ MẠNG I Cơ sở lý thuyết: a Mơ hình Client-Server: Mơ hình Client-Server số mơ hình tổ chức mạng máy tính, bên cạnh mơ hình khác mơ hình mạng ngang hàng (Peer-to-Peer) hay mơ hình mạng lai (Hybrid) Thuật ngữ Client/Server xuất hiên lần đầu vào năm 80 kỉ trước Mơ hình Client-Server mơ hình mạng phổ biến Nó dạng phổ biến mơ hình ứng dụng phân tán Đa số ứng dụng mạng xây dựng dựa mơ hình này, tiếu biểu kể tên ứng dụng Email, ứng dụng web, ứng dụng truyền file theo giao thức FTP Mơ hình Client-Server cung cấp cách tiếp cận tổng quát để chia sẻ tài nguyên hệ thống phân tán Máy cung cấp tài nguyên Server máy yêu cầu tài nguyên Client Một máy Server lẫn Client mà tiến trình server tiến trình client chạy máy tính Server cung yêu cầu dịch vụ từ Server khác Hình Client gửi yêu cầu Server phản hồi Trong mơ hình Client-Server, Client chủ động liên hệ đến Server đưa yêu cầu thiết lập kết nối (request) Server nhận request, chấp nhận yêu cầu kết nối tạo cầu nối để truyền tải thông tin, đáp ứng nhu cầu Client Với cách thiết lập vậy, ta thấy mơ hình truyền tin mơ hình truyền thơng hai chiều, mà tiến trình server tiến trình client phải đồng hóa với Tiến trình server phải nhận thức thông điệp yêu cầu gửi đến, đồng thời tiến trình client phải tạm ngừng phát yêu cầu, chờ nhận phản hồi từ server gửi b Mơ hình truyền tin Socket: Socket giao diện lập trình ứng dụng mạng dùng để truyền nhận liệu internet Giữa thiết bị kết nối với có kênh truyền thơng hai chiều hai điểm cuối kênh truyền thông hai máy socket Có thể hiểu socket ổ cắm điện có chức đầu cuối giao tiếp kết nối Hình Socket ổ cắm điện Trong mô hình Client-Server socket giúp kết nối Client Server thông qua giao thức TCP/IP UDP Socket hoạt động nắm thơng tin địa IP thiết bị số hiệu cổng làm việc ứng dụng cần nhận gói tin chạy thiết bị Một Socket thực bảy thao tác bản: Kết nối với máy xa Gửi liệu Nhận liệu Ngắt kết nối Gán cổng Nghe liệu đến Chấp nhận liên kết từ máy xa cổng gán Socket sử dụng hầu hết ngơn ngữ lập trình tương thích với cấu hình máy tính khác c Socket.IO: Để tạo mơ hình Client-Server tảng web sử dụng ngơn ngữ lập trình JS, ta sử dụng thư viện có tên Socket.IO Socket.IO thư viện phát triển dựa tảng công nghệ khác Websocket Websocket giao thức truyền tải đời để thay cho giao thức HTTP truyền thống Websocket cung cấp liên kết hai chiều mạnh mẽ, có độ trễ thấp so với HTTP dễ sửa lỗi Websocket thường ứng dụng cho trường hợp cần độ trễ thấp ứng dụng chat, ứng dụng mua bán, giao dịch tiền tệ Dù có độ trễ thấp request từ Websocket không tốn nhiều tài nguyên, traffic HTTP Socket.IO thừa kế ưu điểm Websocket với độ trễ cao, giao tiếp hai chiều giao tiếp dựa kiện Nghĩa trình Client Server kết nối với Client xuất kiện cho Server lắng nghe xử lý Server xuất kiện để Client lắng nghe xử lý! Hình Giao tiếp hai chiều Client Server Socket.IO hỗ trợ nhiều ngôn ngữ lập trình khác Java, C++, Python hay Java Script Trong đề tài lần ta sử dụng ngôn ngữ Java Script Đầu tiên ta cần cài đặt thư viện Socket.io máy Server lẫn Client Bên phía Server: npm install socket.io Bên phí Client, ta dùng: const socket = io(); Hoặc cài đặt từ NPM: npm install socket.io-client Để bắt đầu kết nối, phía Server ta tạo luồng vào với cổng 3000 làm ví dụ sau: import { Server } from "socket.io"; const io = new Server(3000); Sử dụng phương thức on() để xác nhận Server kết nối, đối số “connection” callback nhận liệu socket từ phía client Mọi hoạt động giao tiếp với client lập trình callback này, io.on("connection", (socket) => { // code here }); Về phía Client, ta tạo socket để giao tiếp với Server Chuỗi nhập vào địa IP Server cần kết nối, ví dụ ta sử dụng mạng localhost, cổng 3000 cho Server import { io } from "socket.io-client"; const socket = io("ws://localhost:3000"); Trong cách thức giao tiếp này, Client Server giao tiếp với thông qua việc lắng nghe kiện Giống phương thức addEventListioner() JavaScrpipt, Socket.IO cung cấp hai phương thức socket.emit() socket.on() Phương thức emit() lắng nghe kiện trả cho bên liệu Bên cịn lại sử dụng phương thức on() để bắt kiện, nhận giá trị cung cấp thực yêu cầu Tổng quan lại, ta có sơ đồ giao tiếp Socket.IO cách tổng quan sau: Hình Tổng quan việc kết nối với Socket.IO d Sơ lược RSS: RSS định dạng tập tin thuộc họ XML sử dụng cho việc chia sẻ nội dung website Có nhiều đáp án cho việc RSS viết tắt từ nào, tùy vào phiên RSS: - Rich Site Summary (phiên RSS 0.91) RDF Site Summary (phiên RSS 1.0) Really Simple Sydication (phiên RSS 2.0) RSS cho phép người dùng theo dõi nội dung từ trang web có khả cung cấp dịch vụ RSS (hay RSS feeds) Các trang web thường có nội dung thay đổi thêm vào thường xun RSS tóm tắt đặc tính thông tin trang web thành định dạng kiểu XML Nội dung RSS thay đổi theo thay đổi nội dung trang web Vì người sử dụng cần lần thêm RSS feed theo dõi trang web mà không cần cập nhật lại RSS định dạng lại nội dung trang web theo dạng danh sách tóm lượt đầu nội dung trang web kèm theo link đến phần nội dung đầy đủ liệu meta khác Ví dụ với RSS blogger, ta lấy thơng tin Blogger tên, số lượng viết kèm theo danh sách viết gần với phần tóm tắt nội dung liệu ngày đăng, hình minh họa v.v Chính điều mà nhà lập trình xây dựng ứng dụng đọc RSS để tổ chức quản lý kênh theo dõi Một số ứng dụng đọc RSS tiếng như: Feedly, Feedbin, The Old Reader Hình Logo RSS Những lợi ích việc sử dụng RSS: - Đối với người chia sẻ nội dung, RSS giúp chia sẻ thơng tin rộng rãi, nhanh chóng mà khơng tốn chi phí để quảng bá Đối với người tiếp nhận nội dung, RSS giúp theo dõi cập nhật nội dung cách nhanh chóng Các ứng dụng đọc RSS giúp phân phối tổ chức nguồn thông tin, giúp việc học hỏi trở nên nhanh chóng, dễ dàng có chọn lọc Hình Giao diện Feedly, ứng dụng đọc tin RSS II Mô tả đề tài: Đề tài phần quản trị mạng báo cáo là: Xây dụng ứng dụng đọc RSS tổng hợp nội dung kênh tảng chia sẻ video Youtube sử dụng mô hình Client Server Cơng nghệ sử dụng cho đề tài này: - Về phía Client, xây dựng web dựa sử dụng thư viện ReactJS, ngơn ngữ lập trình JavaScript - Về phía Server, sử dụng nodeJS với framework Express - Kết nối Client Server, sử dụng thư viện Socket.IO cho Javascript - Về sở liệu, sử dụng MongoDB Với đề tài ta xây dựng ứng dụng có chức sau: - Thêm kênh để theo dõi - Hiển thị nội dung kênh theo dõi - Bỏ theo dõi kênh Để thêm kênh ta cần API cung cấp tính tìm kiếm kênh Youtube API RSS Feed để lấy thơng tin kênh Youtube Sau lấy mã RSS kênh Yotube tương ứng, ta phải xây dựng thuật toán chuyển đổi liệu XML thành JSON để sử dụng với Javascript III Thuật tốn chương trình: a Youtube Search API: Để tìm kiếm nội dung Youtbe, ta sử dụng thư viện cho javascript youtube-search-api Thư viện cung cấp Promise có tên GetListByKeyWord(), cụ thể sau: const youtubesearchapi = require("youtube-search-api"); youtubesearchapi.GetListByKeyword( "", [playlist boolean], [limit number], [options JSONArray] ) Đối số Promise bao gồm: - Keyword: từ khóa mà bạn muốn tìm kiếm, dạng String Playlist boolean: mục để đánh dấu bạn tìm đối tượng hay tìm danh sách phát gồm nhiều đối tượng Limit number: số kết tối đa trả - Options: mảng tùy chỉnh mà bạn yêu cầu kết đạt Thường dùng để quy định xem tìm Ví dụ đối số bạn nhập [{type: "video"}] nghĩa bạn tìm kiếm video Kết trả lại Promise đối tượng có dạng sau: { items:[], nextPage:{ nextPageToken:"xxxxxxxx", nextPageContext:{} } } Trong mảng items trả lại phần tử mà cần tìm, đối tượng nexPage đối số Promise khác giúp trải kết tìm kiếm nhiều trang Trong ứng dụng báo cáo này, tìm kiếm kênh dựa nội dung người dùng nhập vào, lấy thông tin: id kênh, thumbnail kênh, tên kênh để hiển thị cho người dùng Mã nguồn sau: function fetchingData(e) = { const limit = 7; youtubesearchapi.GetListByKeyword( e.target.value, false, limit, [{ type: "channel" }] ) then((res) => { const channels = res.items.map((item) => { const channel = { channelId: item.id, thumbnail: item.thumbnail.thumbnails[1].url, title: item.title, }; return channel; });} b Youtube RSS Feed Extension Bản thân Youtube không cung cấp RSS link cho kênh nội dung 10 data = response.text(); return data; }); Như ta có biến data chuỗi (string) mã XML lấy từ API Ở bước hai, ta biến thành định dạng đọc từ thẻ thuộc tính thẻ Để làm điều đó, ta sử dụng phương thức DOMParser() parseFromString() Hai phương thức phân tích cú pháp chuỗi data biến trở thành mơ hình dạng giống DOM (Document Object Model) với nút thẻ (element), thuộc tính (attributes) hay nội dung (text) Vì data chứa nội dung file XML nên giá trị trả từ hai phương thức phải thuộc dạng XML Ta có đoạn mã sau: const parser = new DOMParser(); const xlm = parser.parseFromString(data, "application/xml"); Với đối số thứ hai chuỗi application/xml ta có giá trị trả phương thức parseFromString() mô hình dạng mơ định dạng XML Biến xlm trỏ trỏ nến nút gốc mô hình Ta tiến hành viết hàm đệ quy để trả đối tượng Javascript theo dạng JSON Thuật tốn biểu diễn thơng qua sơ đồ sau: 13 Hình Thuật tốn đệ quy chuyển đổi XML thành Javascript Object 14 15 Mã nguồn hàm chuyển đổi XML thành JSObject: function xmlToJson(xml) { // Khởi tạo biến object để lưu giá trị trả var obj = {}; //Kiểm tra gốc if (xml.nodeType === 1) { //gốc element hay thẻ xml // Kiểm tra nút thuộc tính gốc //Thêm giá trị nút thuộc tính vào thuộc tính "@attributes" đối tượng if (xml.attributes.length > 0) { obj["@attributes"] = {}; for (var j = 0; j < xml.attributes.length; j++) { var attribute = xml.attributes.item(j); obj["@attributes"][attribute.nodeName] = attribute.nodeValue; } } } else if (xml.nodeType === 3) { //gốc text obj = xml.nodeValue; //Trả lại giá trị gốc } // Nếu gốc có nút if (xml.hasChildNodes()) { //Xử lý nút for (var i = 0; i < xml.childNodes.length; i++) { var item = xml.childNodes.item(i); var nodeName = item.nodeName; //Lưu tên nút //Kiểm tra tên nút tồn thuộc tính object chưa if (typeof obj[nodeName] == "undefined") { //Nếu chưa, đệ quy hàm với nút gốc obj[nodeName] = xmlToJson(item); } else { //Nếu rồi, khả mảng //Kiểm tra thuộc tính mảng hay không if (typeof obj[nodeName].push == "undefined") { //Nếu mảng, biến thành mảng var old = obj[nodeName]; obj[nodeName] = []; obj[nodeName].push(old); } /* Nếu mảng 16 => Chạy đệ quy hàm với nút gốc => Lưu kết vào mảng */ obj[nodeName].push(xmlToJson(item)); } } } return obj; //trả vềgiá trị obj cho hàm } IV Mã nguồn chương trình demo: a Mã nguồn Client: Client sử dụng thư viện ReactJS, mã nguồn tập tin gốc App.js: import "./App.css"; import Navigate from "./components/Navigate/Navigate"; import Content from "./components/Content/Content"; import Add from "./components/Add&Delete/Add."; import { useEffect, useState } from "react"; import io from "socket.io-client"; //Tạo socket kết nối đến ip server const socket = io.connect("http://192.168.183.133:3001/"); //component App function App() { //Tạo mảng kênh theo dõi Tạo giá trị mặc định const [allchannels, setAllChannel] = useState([ { channelId: "#default", title: "#default", }, ]); //Hàm lấy danh sách kênh theo dõi từ server const getFromServer = (bool) => { socket.emit("loadPage", { message: "loaded" }); socket.on("store", (data) => { setAllChannel((prev) => { console.log(data); return data; }); 17 if (bool) window.location.reload(true); }); }; //Mỗi component reload lấy lại thông tin từ server useEffect(() => { getFromServer(false); }, []); useEffect(() => { //Tạo kiện click cho nút thêm kênh const menu_addChannel = document.getElementById("addMenu#addChannel"); menu_addChannel.addEventListener("click", () => { setIsAdding(true); }); return () => { menu_addChannel.removeEventListener("click", () => { setIsAdding(true); }); }; }, []); //Biến lưu ID kênh muốn xem nội dung //Mặc định biến kênh danh sách const [contentID, setContentID] = useState(allchannels[0].channelId); //Biến xác định chức thêm kênh //Mặc định không const [isAdding, setIsAdding] = useState(false); //Hàm set lại id kênh cần xem nội dung const reloadID = (id) => { setContentID(id); }; //Hàm xóa kênh const deleteChannel = (id) => { console.log("deleting: " + id); //Emit kiện xóa kênh đến server //Gửi kèm id kênh cần xóa socket.emit("delete_channel", id); //Nhận lại kiện xóa từ server //Reload lại trang để lấy lại danh sách kênh 18 socket.on("delete_done", (mess) => { console.log(mess); setContentID(allchannels[0].channelId); getFromServer(true); }); }; //Hàm thêm kênh const addChannel = (id, title) => { const newChannel = { channelId: id, title: title, }; //Emit kiện thêm kênh đến server //Gửi kèm thông tin kênh socket.emit("add_channel", newChannel); //Nhận lại kiện thêm kênh từ server //Reload lại trang để lấy lại danh sách kênh socket.on("add_done", (data) => { console.log(data); getFromServer(true); }); }; //callback lấy id kênh cần xem thông tin const getContentID = () => { return contentID; }; //callback set trạng thái thêm kênh hay không const setIsAddingCallback = (bool) => { setIsAdding(bool); }; //Mã HTML trả return ( 19 RSTube {allchannels[0].channelId !== "#default" && ( {!isAdding ? ( ):( )} )} ); } export default App; b Mã nguồn Server const express = require("express"); const app = express(); const http = require("http"); const { Server } = require("socket.io"); const cors = require("cors"); const mongoose = require("mongoose"); const mongoDB = "mongodb+srv://TriTamLe:Nhuanthien@cluster0.y1jlcoj.mongodb.net/? retryWrites=true&w=majority"; 20 ... thơng hai chiều, mà tiến trình server tiến trình client phải đồng hóa với Tiến trình server phải nhận thức thông điệp yêu cầu gửi đến, đồng thời tiến trình client phải tạm ngừng phát yêu cầu, chờ... bảy thao tác bản: Kết nối với máy xa Gửi liệu Nhận liệu Ngắt kết nối Gán cổng Nghe liệu đến Chấp nhận liên kết từ máy xa cổng gán Socket sử dụng hầu hết ngôn ngữ lập trình tương thích với cấu hình... đồ giao tiếp Socket.IO cách tổng quan sau: Hình Tổng quan việc kết nối với Socket.IO d Sơ lược RSS: RSS định dạng tập tin thuộc họ XML sử dụng cho việc chia sẻ nội dung website Có nhiều đáp án