Bài tập lớn mạng máy tính lập trình socket ứng dụng chat

Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat Bài tập lớn mạng máy tính lập trình socket ứng dụng chat

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN ĐIỆN TỬ - VIỂN THƠNG -❧❧•❧❧ - BÁO CÁO BÀI TẬP LỚN MẠNG MÁY TÍNH Đề tài : Lập trình SOCKET ứng dụng chat HÀ NỘI 12/2017 MỤC LỤC Mạng Máy Tính Page Hà Nội, 12/2015 LỜI MỞ ĐẦU .4 PHẦN : CƠ SỞ XÂY DỰNG ỨNG DỤNG I.Các ngôn ngữ sử dụng đề tài .5 1.1.Khái niệm Node.js 1.2.Khái niệm Socket 1.3 Khái niệm socket.io 1.4 HTML CSS PHẦN 2: CÁC BƯỚC XÂY DỰNG ỨNG DỤNG I.Xây dựng giao diện II.Xây dựng code NodeJS Socket.io 10 Mạng Máy Tính Page BẢNG PHÂN CƠNG CƠNG VIỆC Thành Viên Nguyễn Trần Kiên Đinh Văn Vương Nguyễn Hoàng Anh Mạng Máy Tính Nhiệm Vụ Thiết kế code xử lý kiện server Xây dựng code xử lý kiện web Thiết kế giao diện App Page LỜI MỞ ĐẦU Trong thời đại công nghệ thông tin nay, nhu cầu đòi hỏi cao nên ứng dụng nhắn tin , chat ngày phổ biến phát triển mạnh mẽ tảng web lẫn tảng điện thoại Ví dụ Facebook Messenger, Zalo, WhatApps, Telegram Trong giới hạn đề tài giao Thiết kế phần mềm chát sử dụng lập trình Socket , nhóm chúng em sử dụng ngôn ngữ Node.js framework SOCKET.IO để thực Ứng dụng lập trình chạy giao diện web.Chúng xem xin cảm ơn Thầy Trần Quang Vinh giúp đỡ chúng em q trình hồn thiện đề tài Mạng Máy Tính Page PHẦN : CƠ SỞ XÂY DỰNG ỨNG DỤNG I.Các ngôn ngữ sử dụng đề tài 1.1.Khái niệm Node.js NodeJS mã nguồn xây dựng dựa tảng Javascript V8 Engine, sử dụng để xây dựng ứng dụng web trang video clip, forum đặc biệt trang mạng xã hội phạm vi hẹp NodeJS mã nguồn mở sử dụng rộng hàng ngàn lập trình viên tồn giới NodeJS chạy nhiều tảng hệ điều hành khác từ Window Linux, OS X nên lợi NodeJS cung cấp thư viện phong phú dạng Javascript Module khác giúp đơn giản hóa việc lập trình giảm thời gian mức thấp Các đặc điểm Node.js  Không đồng bộ: Tất API NodeJS khơng đồng (none-blocking), chủ yếu dựa NodeJS Server chờ đợi Server trả liệu Việc di chuyển máy chủ đến API sau gọi chế thông báo kiện Node.js giúp máy chủ để có phản ứng từ gọi API trước (Realtime)  Chạy nhanh: NodeJ xây dựng dựa vào tảng V8 Javascript Engine nên việc thực thi chương trình nhanh  Đơn luồng khả mở rộng cao: Node.js sử dụng mơ hình luồng với kiện lặp chế tổ chức kiện giúp máy chủ để đáp ứng cách không ngăn chặn làm cho máy chủ cao khả mở rộng trái ngược với máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu Node.js sử dụng chương trình đơn luồng chương trình tương tự cung cấp dịch vụ cho số lượng lớn nhiều so với yêu cầu máy chủ truyền thống Apache HTTP Server  Không đệm: NodeJS không đệm liệu ứng dụng chủ yếu đầu liệu Mạng Máy Tính Page  Có giấy phép: NodeJS cấp giấy phép MIT License 1.2.Khái niệm Socket -Viết ứng dụng chát với ngơn ngữ lập trình web phổ biến PHP hay Ruby công việc phức tạp khó khăn Nó thường đỏi hỏi phía client ( trình duyệt ) thực cơng việc gửi poll request tới server để lấy thông tin cập nhật , theo dõi thời gian diễn thay đổi Do ứng dụng chát đòi hỏi việc cập nhật nội dụng diễn theo thời gian thực (real time) áp dụng phương pháp thường không mang lại hiệu cao Từ đời cho đén thời điểm , socket coi giải pháp mang tính truyền thống để phát triển ứng dụng real time Socket cung cấp kênh giao tiếp hai chiều (bidirectional) client server Server sử dụng socket.io gửi thơng tin cập nhật phía client thay client phải gọi request lên server trước Khi viết ứng dụng chat điều có vai trò quan trọng server lúc update thơng tin gửi cho client khác Mỗi có thơng tin cập nhật server server gửi thơng báo cho client để update thay trước client phải gửi request tới server để kiểm tra xem có thơng tin cập nhật hay khơng Điều khơng đảm bảo tính real time cho ứng dụng mà giúp giảm tải cho server có số lượng request từ client gửi đến server Với ứng dụng có nhiều người sử ụng điều quan trọng Mạng Máy Tính Page 1.3 Khái niệm socket.io Socket.io thư viện Javascript dùng để phát triển ứng dụng thời gian thực Thư viện socket.io phát triển để dùng cho client server( chạy node.js) Đầu tiên thư viện socket.io cài đặt server (Node.js) sử dụng chương trình quản lý Node Package Sau cài đặt khởi động socket.io sau var socket = require('socket.io'); Với việc Socket.IO sử dụng server sau server cung cấp địa URL để client (trình duyệt) tải thư viện Socket.IO từ server nhúng vào trang sau: 1.4 HTML CSS -HTML (tiếng Anh, viết tắt cho HyperText Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấu thiết kế để tạo nên trang web với mẩu thơng tin trình bày World Wide Web Cùng với CSS JavaScript, HTML tạo ba tảng kỹ thuật cho World Wide Web HTML định nghĩa ứng dụng đơn giản SGML sử dụng tổ chức cần đến yêu cầu xuất phức tạp HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01 (1999) Sau đó, nhà phát triển thay XHTML Hiện nay, HTML phát triển tiếp với phiên HTML5 hứa hẹn mang lại diện mạo cho Web Mạng Máy Tính Page -CSS chữ viết tắt Cascading Style Sheets, đơn dạng file text với phần tên mở rộng css Trong Style Sheet chứa câu lệnh CSS Mỗi lệnh CSS định dạng phần định HTML ví dụ như: font chữ, đường viền, màu nền, chỉnh hình ảnh v.v Trước chưa có CSS, người thiết kế web phải trộn lẫn thành phần trình bày nội dung với Nhưng với xuất CSS, người ta tách rời hồn tồn phần trình bày nội dung Giúp cho phần code trang web gọn quan trọng dễ chỉnh sửa PHẦN 2: CÁC BƯỚC XÂY DỰNG ỨNG DỤNG I.Xây dựng giao diện Giao diện app xây dựng dựa ngôn ngữ HTML CSS File lưu dạng file ejs Đây template engine tích hợp sẵn Framework ExpressJS NodeJS Cấu trúc giao diện bao gồm phần -LoginForm -ChatForm +LoginForm: Giao diện bao gồm  Tên App : ONECHAT APP  Form : Bao gồm mục : ô input để người dùng đăng kí tên Chát, phím để tiến hành đăng kí tên Mạng Máy Tính Page +ChatForm : Giao diện gồm  Form chứa danh sách User online kênh chát  Form chứa tên phòng chat riêng khách hàng  Form để người dùng nhập tên phòng cần tạo tên người dùng mà user muốn mời vào phòng chát riêng  Một Button để thực chức thoát khỏi form chát  Form để hiển thị tin nhắn chát chung chát riêng  Một Form để người dùng nhập tin nhắn  Button để người dùng bấm chát riêng chung Mạng Máy Tính Page II.Xây dựng code NodeJS Socket.io 1.Xây dựng Server : -Một server xây dựng dựa cú pháp ExpressJS var express=require("express"); var app=express(); app.use(express.static("public")); app.set("view engine","ejs"); app.set("views","./views"); var server = require("http").Server(app); var io=require("socket.io")(server); server.listen(3000); Cấu trúc câu lệnh thực khai báo thư viện ExpressJS thư viện Socket.io thực kiện lắng nghe từ PORT 3000 -Khi người dùng thực nhập link : localhost:3000 Server thực trả nội dung HTML từ file trangchu.ejs xây dựng từ HTML CSS Các hàm socket thư viện socket.io -io.sockets.emit : Khi nhận gói tin từ client ,server chuyển gói tin đến cho tất socket mà sever quản lý -socket.emit: Khi nhận gói tin từ client ,server chuyển gói tin client gửi request lên server -socket.broadcast.emit : Khi nhận gói tin từ client , server chuyển gói tin client lại ngoại trừ client gửi request -io.to(“socket.id).emit: Gửi liệu đến socket với id “socket.id” -socket.on: Lắng nghe kiện có liệu gửi đến -socket.emit: Client tiến hành gửi liệu lên server Mạng Máy Tính Page 10 Xây dựng kiện đăng nhập -Client: Lắng nghe kiện bấm phím Register, dùng câu lệnh socket.emit gửi liệu tên đăng kí lên server $("#btnRegister").click(function(){ socket.emit("client-send-Username",$("#txtUser").val()); }); -Server: Lắng nghe kiện client gửi thông tin đăng nhập , tiến hành so sánh tên đăng nhâp với mảng chứa danh sách tên Chia trường hợp + Nếu tên đăng kí có mảng :  Server: Gửi client kiện “server-send-dki-that-bai” if(manageUser.indexOf(data)>=0){ socket.emit("server-send-dki-that-bai");  Client: Lắng nghe kiện đăng kí thất bại , thơng báo : socket.on("server-send-dki-that-bai",function(){ alert("Da co nguoi dang ki"); }); +Nếu tên chưa có mảng:  Server: Đẩy tên đăng kí vào mảng , gửi đến server đăng kí kiện “server-senddki-thanh-cong” gửi đến tất client kiện “server-send-ds-dki”  Client gửi đăng kí : Lắng nghe kiện “server-send-dki-thanh-cong” thực hiển thị Form Chat socket.on("server-send-dki-thanh-cong",function(data){ $("#currentUser").html(data); $("#listMessage").html(""); $("#loginForm").hide(2000); $("#chatForm").show(1000); Mạng Máy Tính Page 11 });  Tất client : Lắng nghe kiện “server-send-ds-dki” data mảng chứa thơng tin User , sau hiển thị danh sách User lên Form USER ONLINE socket.on("server-send-ds-dki",function(data){ $("#boxContent").html(""); data.forEach(function(i){ $("#boxContent").append(""+i+""); }); }); 4.Xây dựng kiện đăng xuất -Client: Lắng nghe kiện bấm nút Logout , gửi kiện ”logout” kèm theo ẩn FormChat gọi FormLogin: $("#btnLogout").click(function(){ socket.emit("logout"); $("#loginForm").show(2000); $("#chatForm").hide(1000); }); -Server : Lắng nghe kiện “logout” từ client , tiến hành xóa tên đăng kí client mảng chứa, gửi kiện “server-send-ds-dki” để client update lại danh sách User Online socket.on("logout",function(){ manageUser.splice( manageUser.indexOf(socket.Username),1 ); manageID.splice( manageUser.indexOf(socket.Username),1 ); Mạng Máy Tính Page 12 socket.broadcast.emit("server-send-ds-dki",manageUser); }); Xây dựng kiện chat -Client: Lắng nghe kiện bấm phím Gửi , gửi event “ user-send-mess” kèm với data liệu từ khung chát $("#btnSend").click(function(){ socket.emit("user-send-mess",$("#txtMessage").val()); }); -Server: Lắng nghe kiện “user-send-mess” , gửi kiện “server-send-mess” kèm với data tên người dùng nội dung chat đến tất client có kết nối đến server: socket.on("user-send-mess",function(data){ io.sockets.emit("server-send-mess",{un:socket.Username,nd:data}); }); -Tất Client: Lắng nghe kiện “server-send-mess” đưa data vào khung chát socket.on("server-send-mess",function(data){ $("#listMessage").append(""+""+data.un+""+":"+data.nd+""); }); Xây dựng kiện người Chat -Client 1: Lắng nghe kiện Chat , gửi event “co-nguoi-dang-go” $("#txtMessage").focusin(function(){ socket.emit("co-nguoi-dang-go"); }); Mạng Máy Tính Page 13 -Server: Lắng nghe event “co-nguoi-dang-go” , gửi đến client lại ngoại trừ client chát kiện “server-send-go-chu” kèm với chuỗi báo có người gõ socket.on("co-nguoi-dang-go",function(){ var s=socket.Username+" gõ chữ "; socket.broadcast.emit("server-send-go-chu",s); }); -Các Client Còn Lại : Lắng nghe kiện “server-send-go-chu” hiển thị dòng thơng báo client chát socket.on("server-send-go-chu",function(data){ $("#go").html(data); }); 7.Xây dựng kiện người dừng Chat -Client 1: Lắng nghe kiện người dùng ngừng chat, gửi event “nguoi-dung-go”: $("#txtMessage").focusout(function(){ socket.emit("nguoi-dung-go"); }); -Server: Lắng nghe kiện “nguoi-dung-go”, gửi đến client lại event “serverngung-go” data chuỗi trống socket.on("nguoi-dung-go",function(){ var s=""; socket.broadcast.emit("server-ngung-go",s); }); -Các Client Còn Lại : Lắng nghe kiện “server-ngung-go” , đưa data vào khung html socket.on("server-ngung-go",function(data){ $("#go").html(data); }); Mạng Máy Tính Page 14 8.Xây dựng kiện Chat Riêng Tư 8.1 Tạo Phòng -Client : Lắng nghe kiện Tạo Phòng ,gửi kiện “user-tao-phong” kèm data tên phòng : $("#btnTaoPhong").click(function(){ socket.emit("user-tao-phong",$("#txtPhong").val()); }); -Server: Lắng nghe kiện “user-tạo-phong” , tạo room với tên data nhận , gửi client kiện “server-gui-phong” socket.on("user-tao-phong",function(data){ console.log("danh sach phong"+data); socket.join(data); socket.Phong=data; socket.emit("server-gui-phong",data); }); -Client: Lắng nghe kiện “server-gui-phong” , hiển thị tên phòng : socket.on("server-gui-phong",function(data){ $("#dsPhong").html(""+data+""); }); 8.2 Chat -Client: Lắng nghe kiện bấm nút gửi tin , gửi event “user-gui-tin” kèm theo data nội dung tin cần gửi $("#btnSend1").click(function(){ socket.emit("user-gui-tin",$("#txtMessage").val()); }); Mạng Máy Tính Page 15 -Server: Lắng nghe kiện “user-gui-tin” , gửi kiện “server-chat” đến room tạo với data tên người gửi kèm với nội dung tin nhắn socket.on("user-gui-tin",function(data){ io.sockets.in(socket.Phong).emit("server-chat",{un:socket.Username,nd:data}); }); -Client Trong Room : Lắng nghe kiện “server-chat”, hiển thị nội dung chát room socket.on("server-chat",function(data){ $("#listMessage1").append(""+""+data.un+""+":"+data.nd+""); }); 8.3 Mời Chat -Thiết lập mảng manageID[] kèm với mảng manageUser[] vừa để quản lý ID quản lý tên người dùng - Client : Gửi kiện “user-send-moi ” kèm với tên người mời chat riêng $("#btnMoi").click(function() { socket.emit("user-send-moi",$("#txtTen").val()); }); -Server : Lắng nghe kiện “user-send-moi” ,tham chiếu giá trị tên người cần mời từ mảnh manageUser[] sang mảng manageID[] để biết ID socket quản lý kết nối client với server người mời Sau gửi event “server-gui-ten” đến ID người cần mời kèm theo data tên người mời tên phòng socket.on("user-send-moi",function(data){ var a=manageID[manageUser.indexOf(data)]; console.log(a); io.to(a).emit("server-gui-ten",{un:socket.Username,nd:socket.Phong}); }); Mạng Máy Tính Page 16 -Client Được Mời : Lắng nghe kiện “server-gui-ten ”, thơng báo có người mời socket.on("server-gui-ten",function(data){ alert(data.un+" Đã mời bạn tham gia vào phòng:"+data.nd); }); KẾT LUẬN Thơng qua đề tài lập trình SOCKET ứng dụng chat thời gian thực , chúng em nắm thêm số kiến thức thiết lập kết nối truyền tải liệu thời gian thực client với server sử dụng framework socket.io node.js Qua chúng em xin lần Mạng Máy Tính Page 17 cảm ơn giúp đỡ , tạo điều kiện Thầy Trần Quang Vinh giúp chúng em thực xong đề tài giao Chúng em xin cảm ơn ! Mạng Máy Tính Page 18 ... dụng lập trình Socket , nhóm chúng em sử dụng ngôn ngữ Node.js framework SOCKET. IO để thực Ứng dụng lập trình chạy giao diện web.Chúng xem xin cảm ơn Thầy Trần Quang Vinh giúp đỡ chúng em q trình. .. tài Mạng Máy Tính Page PHẦN : CƠ SỞ XÂY DỰNG ỨNG DỤNG I.Các ngôn ngữ sử dụng đề tài 1.1.Khái niệm Node.js NodeJS mã nguồn xây dựng dựa tảng Javascript V8 Engine, sử dụng để xây dựng ứng dụng. .. bảo tính real time cho ứng dụng mà giúp giảm tải cho server có số lượng request từ client gửi đến server Với ứng dụng có nhiều người sử ụng điều quan trọng Mạng Máy Tính Page 1.3 Khái niệm socket. io