TIỂU LUẬN môn lập TRÌNH WEB NÂNG CAO web socket

i TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG KHOA CÔNG NGHỆ THÔNG TIN BÀI TẬP TIỂU LUẬN MƠN LẬP TRÌNH WEB NÂNG CAO Web Socket Người hướng dẫn: Người thực hiện: Th.S Mai Văn Mạnh TẠ TRUNG HIẾU – 518H0502 Lớp : 18H50205 PHẠM HỒNG TỒN – 518H0578 Lớp : 18H50204 Khố THÀNH PHỐ HỒ CHÍ MINH, NĂM 2021 TỔNG LIÊN ĐỒN LAO ĐỘNG VIỆT NAM : 22 ii TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG KHOA CÔNG NGHỆ THÔNG TIN BÀI TẬP TIỂU LUẬN MƠN LẬP TRÌNH WEB NÂNG CAO Web Socket Người hướng dẫn: Người thực hiện: Th.S Mai Văn Mạnh TẠ TRUNG HIẾU – 518H0502 Lớp : 18H50205 PHẠM HỒNG TOÀN – 518H0578 Lớp : 18H50204 Khố THÀNH PHỐ HỒ CHÍ MINH, NĂM 2021 LỜI CẢM ƠN : 22 iii Một năm đầy khó khăn đến việc học tập cơng tác tồn thể sinh viên thầy ảnh hưởng Covid-19, chúng em xin gửi lời cám ơn chân thành đến thầy Mai Văn Mạnh giảng dạy trực tuyến hỗ trợ nhiệt tình để chúng em hoàng thành tập tiểu luận iv ĐỒ ÁN ĐƯỢC HỒN THÀNH TẠI TRƯỜNG ĐẠI HỌC TƠN ĐỨC THẮNG Tôi xin cam đoan sản phẩm đồ án hướng dẫn TS Mai Văn Mạnh Những nội dung nghiên cứu, kết đề tài trung thực chưa cơng bố hình thức trước Những số liệu bảng biểu phục vụ cho việc phân tích, nhận xét, đánh giá tác giả thu thập từ nguồn khác có ghi rõ phần tài liệu tham khảo Ngoài ra, đồ án sử dụng số nhận xét, đánh số liệu tác giả khác, quan tổ chức khác có trích dẫn thích nguồn gốc Nếu phát có gian lận tơi xin hồn tồn chịu trách nhiệm nội dung đồ án Trường đại học Tôn Đức Thắng không liên quan đến vi phạm tác quyền, quyền gây q trình thực (nếu có) TP Hồ Chí Minh, ngày tháng năm Tác giả (ký tên ghi rõ họ tên) Tạ Trung Hiếu Phạm Hồng Toàn v PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN Phần xác nhận GV hướng dẫn _ _ _ _ _ _ _ Tp Hồ Chí Minh, ngày tháng (kí ghi họ tên) năm Phần đánh giá GV chấm _ _ _ _ _ _ _ Tp Hồ Chí Minh, ngày tháng (kí ghi họ tên) năm vi TÓM TẮT Trong bày tiểu luận chúng tơi tìm hiểu giao thức Web Socket xây dựng trang web cho phép người dùng chat trực tuyến 1 MỤC LỤC LỜI CẢM ƠN .iii PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN v TÓM TẮT vi MỤC LỤC CHƯƠNG – TỔNG QUAN VỀ SOCKET 1.1 Socket gì? 1.2 Socket sử dụng nào? .3 1.3 Phân loại Socket 1.3.1 Stream Socket 1.3.2 Datagram Socket 1.3.3 Web socket CHƯƠNG – CƠ SỞ LÝ THUYẾT VỀ WEBSOCKET 2.1 Tại phải cần Websocket? .5 2.1.1 Ajax Polling 2.1.1 Ajax Long Polling 2.2 Hiểu rõ Websocket 2.2.1 Giới thiệu .7 2.2.2 Cấu trúc WebSocket 2.2.3 WebSocket API .8 2.2.3 Các thuộc tính WebSocket 10 2.2.4 Các kiện WebSocket .10 2.2.5 Các phương thức WebSocket 10 CHƯƠNG – XÂY DỰNG ỨNG DỤNG CHAT TRỰC TUYẾN 11 3.1 Tổng quan ứng dụng .11 3.1.1 Các công nghệ sử dụng 11 3.1.2 Tổ chức thư mục xử lý: 11 3.1.3 Giao diện người dùng: 12 3.2 Thực nghiệm 13 3.2.1 Các bước thực hiện: .13 3.2.2 Kết đạt 14 3.2.3 Hạn chế hướng phát triển 14 CHƯƠNG – TỔNG QUAN VỀ SOCKET 1.1 Socket gì? Socket điểm cuối (end-point) liên kết giao tiếp hai chiều (two-way communication) hai chương trình chạy mạng Nghĩa socket sử dụng phép process nói chuyện với process khác Các lớp Socket sử dụng để tiến hành kết nối client server Nó ràng buộc với cổng port (thể số cụ thể) để tầng TCP (TCP Layer) định danh ứng dụng mà liệu gửi tới 1.2 Socket sử dụng nào? Socket giúp lập trình viên kết nối ứng dụng để truyền nhận liệu mơi trường có kết nối Internet cách sử dụng phương thức TCPIP UDP Khi cần trao đổi liệu cho ứng dụng cần phải biết thông tin IP port ứng dụng Có nhiều dạng socket khác phụ thuộc vào khác biệt cách truyền liệu (protocol) Dạng phổ biến TCP UDP 1.3 Phân loại Socket 1.3.1 Stream Socket Dựa giao thức TCP( Tranmission Control Protocol), stream socket thiết lập giao tiếp chiều theo mơ hình client server Được gọi socket hướng kết nối Giao thức đảm bảo liệu truyền đến nơi nhận cách đáng tin cậy, nhờ vào chế quản lý luồng lưu thông mạng chế chống tắc nghẽn 4 Đặc điểm tóm gọn:  Có đường kết nối (địa IP) tiến trình  Một hai tiến trình phải đợi tiến trình u cầu kết nối  Mơ hình client /sever sever lắng nghe chấp nhận từ client  Mỗi thơng điệp gửi phải có xác nhận trả  Các gói tin chuyển 1.3.2 Datagram Socket Dựa giao thức UDP( User Datagram Protocol) việc truyền liệu khơng u cầu có thiết lập kết nối process Tức cung cấp connection-less point cho việc gửi nhận packets Gọi socket không hướng kết nối 1.3.3 Web socket WebSocket cung cấp giao thức giao tiếp hai chiều mạnh mẽ No có độ trễ thấp dễ xử lý lỗi Websocket thường sử dụng cho trường hợp yêu cầu real time chat, hiển thị biểu đồ hay thơng tin chứng khốn Các gói tin (packets) Websocket nhẹ HTTP nhiều Nó giúp giảm độ trễ network nhiều lần 5 CHƯƠNG – CƠ SỞ LÝ THUYẾT VỀ WEBSOCKET 2.1 Tại phải cần Websocket? Giao thức WebSocket giao thức sử dụng rộng rãi cho việc phát triển ứng dụng real-time Giao thức WebSocket bao hàm mục Connectivity specification HTML5 Nó cho phép tạo kết nối full-duplex, hai chiều client server Nó cung cấp cách thức để tạo kết nối bền bỉ, độ trễ thấp để hỗ trợ giao tiếp client server Sử dụng WebSockets, bạn tạo ứng dụng real-time nghĩa ứng dụng chat, phối hợp soạn thảo văn bản, giao dịch chứng khoán hay game online nhiều người chơi lúc Hiện tại, có phương thức để client – server web apps giao tiếp với nhau, Polling Long polling 2.1.1 Ajax Polling Phương thức có nghĩa client gửi request liên tục lên server để lấy data thông qua AJAX sau khoảng thời gian định Điều bắt buộc server phải trả data liệu, cho dù có liệu hay khơng 6 Polling hoạt động tốt khoảng thời gian message có sẵn biết trước Trên thực tế, hầu hết ứng dụng real-time, tần suất xuất message thường khơng thể dự đốn trước Thêm vào polling khiến client mở đóng nhiều kết nối không cần thiết 2.1.1 Ajax Long Polling Long polling (hay Comet) phương thức giao tiếp phổ biến mà client mở kết nối đến server giai đoạn định, tương tự phương thức trên, thay server trả reponse cho client sau nhận request phương thức này, server trả response có liệu Nếu server khơng có thơng tin gì, giữ kết nối đến có thơng tin để trả cho client đến đạt giới hạn thời gian cho kết nối Về chất, Long polling trì hỗn hồn thành HTTP response server có để trả client, kỹ thuật thường đường gọi hanging-GET hay pending- POST Thực tế việc client phải thường xuyên reconnect đến server khiến long polling lựa chọn tối ưu cho ứng dụng real-time 2.2 Hiểu rõ Websocket 2.2.1 Giới thiệu WebSockets hỗ trợ phương thức giao tiếp chiều client server thơng qua TCP (port 80 443) Theo phân tích từ http://websocket.org/quantum.html, WebSockets giảm kích thước HTTP header lên đến 500 – 1000 lần, giảm độ trễ network lên đến lần Do đó, hỗ trợ tốt ứng dụng web apps real – time 2.2.2 Cấu trúc WebSocket Cấu trúc: hỗ trợ chuẩn giao thức mới: ws:// cho chuẩn thông thường wss:// cho chuẩn secure (tương tự http:// https://) Message data types: chuẩn giao tiếp String, hỗ trợ buffered arrays blobs Vẫn chưa hỗ trợ JSON (tuy nhiên serialize thành String, xem thêm seriablize đây) 2.2.3 WebSocket API WebSocket API cho phép ứng dụng bạn kiểm soát giao thức WebSocket phản hồi lại với kiện trigger server Vì API hướng kiện nên kết nối full-duplex khởi tạo, server có data để gửi client resource mà ứng dụng quan tâm thay đổi state, gửi thơng báo phía client Để kết nối đến remote host, ta tạo object WebSocket truyền vào URL endpoint đích // Connecting to the server with a protocol called myProtocol var ws = new WebSocket("ws://echo.websocket.org", "myProtocol"); Khi tạo kết nối WebSocket, bước handshake thông qua TCP mà client server đồng ý để sử dụng giao thức WebSocket  Handshake từ phía client có dạng: GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13  Handshake từ phía server có dạng: HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat Kết nối WebSocket khởi tạo việc nâng cấp từ giao thức HTTP sang giao thức WebSocket q trình handshake client server thơng qua kết nối TCP Header Upgrade bao gồm request nhằm thông báo cho server client muốn tạo lập kết nối WebSocket Một tạo lập message WebSocket truyền đến thông qua method WebSocket 10 2.2.3 Các thuộc tính WebSocket Thuộc Tính readyState bufferedAmount Mơ tả  Giá trị 0: kết nối chưa thiết lập (WebSocket.CONNECTING)  Giá trị 1: kết nối thiết lập giao tiếp (WebSocket.OPEN)  Giá trị 2: kết nối qua handshake đóng (WebSocket.CLOSING)  Giá trị 3: kết nối đóng (WebSocket.CLOSED) Biểu diễn số byte UTF-8 mà xếp hàng sử dụng phương thức send() 2.2.4 Các kiện WebSocket Sự kiện Event handler open onopen message error onmessage onerror close onclose Mô tả Khi WebSocket chuyển sang trạng thái mở, “onopen” gọi Khi WebSocket nhận liệu từ Server Có lỗi giao tiếp Kết nối đóng Những kiện truyền cho “onclose” có ba tham số “code”, “reason”, “wasClean” 2.2.5 Các phương thức WebSocket  send(data) – Gửi liệu tới server Message data string, ArrayBuffer, blob  close() – Đóng kết nối tồn CHƯƠNG – XÂY DỰNG ỨNG DỤNG CHAT TRỰC TUYẾN 3.1 Tổng quan ứng dụng Trong phần xây dựng ứng dụng nhắn tin trực tuyến web sử dụng công nghệ websocket 11 3.1.1 Các công nghệ sử dụng - Ngôn ngữ: Javascript + Jquery (3.5.1) - Framework: NodeJS - Thư viện: Express (4.17.1), ws(7.4.3) - Giao diện web (html): Bootstrap + Font Awesome (4.7.0) 3.1.2 Tổ chức thư mục xử lý: - node_modules : chứa modules nodejs - server.js : script kích hoạt chạy web socket (ws) - connect2server.js : script xử lý kết nối ws, nhận/gửi message hiển thị giao diện người dùng - index.js : hiển thị giao diện người dùng - package.json package-lock.json : cấu hình npm (tự động phát sinh) Các đoạn xử lý chính: - server.js wss.on('connection', function connection(ws) {     ws.on('message', function incoming(data) {         wss.clients.forEach(function each(client) {             if (client !== ws && client.readyState === WebSocket.OPEN) {                 client.send(data);             }         })     }) 12 }) - connect2server.js     function init() {         if (ws) {             ws.onerror = ws.onopen = ws.onclose = null;             ws.close();         }         ws = new WebSocket('ws://localhost:8080');         ws.onopen = () => {             console.log('Connection opened!');         }         ws.onmessage = ({ data }) => showMessage(JSON.parse(data));         ws.onclose = function () {             ws = null;         }     } 3.1.3 Giao diện người dùng: 13 3.2 Thực nghiệm 3.2.1 Các bước thực hiện: Tại thư mục source, mở terminal, chạy câu lệnh npm install để cài đặt gói module cấu hình package.js Tiếp tục cửa sổ terminal, chạy câu lệnh npm start chạy server Tiếp theo mở trực tiếp file index.html sử dụng Open with live Server Visual Studio Code (nếu có cài đặt) Tại cửa sổ trình duyệt ta mở thêm nhiều tab khác, cửa sổ khác trình duyệt khác có đường dẫn thực bước để thử nghiệm gửi tin nhắn qua lại 14 3.2.2 Kết đạt Giao diện thị tin nhắn nhận gửi theo bố cục phù hợp, responsive với thiết bị kích thước hình khác 3.2.3 Hạn chế hướng phát triển Ứng dụng chưa có chức phản hồi câu trả lời, hiển thị thời gian tin nhắn, xem lại lịch sử gửi, server chạy localhost Trong tương lai muốn cải thiện mặt hạn chế ứng dụng websocket vào dự án lớn xây dựng mạng xã hội tảng web ứng dụng di dộng 15 TÀI LIỆU THAM KHẢO Tiếng Việt https://topdev.vn/blog/socket-la-gi-websocket-la-gi/#socket-la-gi https://viblo.asia/p/gioi-thieu-ve-websocket-WAyK8MrpZxX https://viblo.asia/p/websocket-la-gi-hieu-ro-ve-websocket-1Je5E4BmlnL Tiếng Anh https://youtu.be/RL_E56NPSN0 ... .7 2.2.2 Cấu trúc WebSocket 2.2.3 WebSocket API .8 2.2.3 Các thuộc tính WebSocket 10 2.2.4 Các kiện WebSocket .10 2.2.5 Các phương thức WebSocket 10 CHƯƠNG... thông báo cho server client muốn tạo lập kết nối WebSocket Một tạo lập message WebSocket truyền đến thơng qua method WebSocket 10 2.2.3 Các thuộc tính WebSocket Thuộc Tính readyState bufferedAmount... chưa thiết lập (WebSocket.CONNECTING)  Giá trị 1: kết nối thiết lập giao tiếp (WebSocket.OPEN)  Giá trị 2: kết nối qua handshake đóng (WebSocket.CLOSING)  Giá trị 3: kết nối đóng (WebSocket.CLOSED)