ĐỀ TÀI XÂY DỰNG ỨNG DỤNG CHATBOX BẰNG NODEJS VÀ SOCKET IO

BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP THỰC PHẨM TP HCM KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO TIỂU LUẬN Môn học: Công Nghệ Java ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG CHATBOX BẰNG NODEJS VÀ SOCKET.IO Giảng viên hướng dẫn : Nguyễn Minh Hải Sinh viên thực : Lê Hoài Phong (2001181259) Phạm Song Toàn (2001181369) Trần Hợp Phương(2001181270) Lý Vĩnh Phúc(2001180197) TP-HCM, ngày 10 tháng 08 năm 2020 MỤC LỤC LỜI CAM ĐOAN LỜI CẢM ƠN BẢNG PHÂN CÔNG CÔNG VIỆC CÁC THÀNH VIÊN TRONG NHÓM 1.Giới thiệu Nodejs 2.Giới thiệu Socket 1)Khái niệm Socket 2)Chức .7 3)Phân loại Socket 3.1 Datagram Sockets: 3.2 Raw Sockets 3.3 Stream Sockets 3.4 Sequenced packet Sockets 4)Socket Java 3.Giới thiệu Web Chat .11 1.Giới thiệu 11 2.Nội dung 12 3.Ứng dụng 12 4.Ngơn ngữ lập trình 12 4.Phân Tích Code 13 1.Server.js 13 2.Xuly.js 14 3.trangchu.ejs 15 4.layout.css 16 Nhóm Cơng Nghệ Java LỜI CAM ĐOAN Chúng em xin cam đoan rằng: Những nội dung trình bày báo cáo tiểu luận môn Hệ quản trị sở liệu chép từ tiểu luận có trước Nếu không thật, chúng em xin chịu trách nhiệm trước thầy Nhóm Cơng Nghệ Java LỜI CẢM ƠN Lời đầu tiên, nhóm em xin gửi lời cảm ơn đến giảng viên môn – Thầy Nguyễn Minh Hải dạy dỗ, truyền đạt kiến thức quý báu cho em suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học Công Nghệ Java thầy , em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắn kiến thức quý báu, hành trang để em vững bước sau Bộ môn Công Nghệ Java mơn học thú vị, vơ bổ ích có tính thực tế cao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn sinh viên Tuy nhiên, vốn kiến thức nhiều hạn chế khả tiếp thu thực tế nhiều bỡ ngỡ Mặc dù em cố gắng chắn tiểu luận khó tránh khỏi thiếu sót nhiều chỗ cịn chưa xác, kính mong xem xét góp ý để tiểu luận em hoàn thiện Nhóm Cơng Nghệ Java Em xin chân thành cảm ơn!” BẢNG PHÂN CÔNG CÔNG VIỆC CÁC THÀNH VIÊN TRONG NHĨM Họ Tên Cơng Việc Ghi Chú Lê Hoài Phong Lên ý tưởng, viết code chỉnh sửa file word báo cáo Làm việc nhóm đầy đủ hàng tuần Phạm Song Toàn Lên ý tưởng, viết code chỉnh sửa file word báo cáo Làm việc nhóm đầy đủ hàng tuần Làm file word báo cáo, file powerponit để hướng dẫn bước thực chương trình Làm file word báo cáo, file powerponit để hướng dẫn bước thực chương trình Làm việc nhóm đầy đủ hàng tuần Trần Hợp Phương Lý Vĩnh Phúc Làm việc nhóm đầy đủ hàng tuần Nhóm Cơng Nghệ Java 1.Giới thiệu Nodejs - Nodejs tảng (Platform) phát triển độc lập xây dựng Javascript Runtime Chrome Chúng ta xây dựng ứng dụng mạng cách nhanh chóng dễ dàng mở rộng - Phần Core bên Nodejs viết hầu hết C++ nên cho tốc độ xử lý hiệu cao Nó tạo ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực Node.js áp dụng cho sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi công nghệ, tạo dự án Startup nhanh - Về chất, Nodejs ngơn ngữ JavaScript Tuy nhiên, Nodejs khác với JavaScript chỗ chương trình viết Nodejs chạy môi trường máy chủ Ngược lại, chương trình JavaScript thường chạy mơi trường trình duyệt Nhóm Cơng Nghệ Java NHỮNG ỨNG DỤNG NÊN VIẾT BẰNG NODEJS -Về tốc độ: + Nodejs có tốc độ nhanh + Đó yêu cầu quan trọng bạn startup cố gắng tạo sản phẩm lớn Và muốn đảm bảo mở rộng nhanh chóng Đáp ứng lượng lớn người dùng trang web bạn phát triển lên + Nodejs xử lý hàng ngàn kết nối đồng thời -Nhược điểm Nodejs: Nhóm Cơng Nghệ Java + Tốn tài nguyên: Giống hầu hết công nghệ mới, việc triển khai Nodejs host điều dễ dàng Nodejs giai đoạn phát triển ban đầu, điều có nghĩa số đặc trưng thay đổi trình phát triển Ứng dụng nặng tốn tài nguyên + Nếu bạn cần xử lý ứng dụng tốn tài nguyên CPU encoding video, convert file, decoding encryption… ứng dụng tương tự khơng nên dùng NodeJS (Lý do: Nodejs viết C++ & Javascript, nên phải thơng qua thêm trình biên dịch Nodejs lâu chút ) Trường hợp bạn viết Addon C+ + để tích hợp với NodeJS để tăng hiệu suất tối đa! 2.Giới thiệu Socket 1)Khái niệm Socket Socket cổng kết nối mà thông qua mạng lưới kết nối Internet giúp chương trình máy tính kết nối với chương trình máy tính khác Vì cịn gọi điểm cuối kênh liên lạc hai chiều Các Socket tạo tập hợp qua việc thiết lập yêu cầu lập trình xác định lệnh gọi hàm kĩ thuật giao diện lập trình ứng dụng(API) Một Socket đơn giản hố cách thực chức Nhóm Cơng Nghệ Java chương trình Lập trình Socket giúp người dùng nhận gửi liệu từ máy tính sang máy tính khác thơng qua đường truyền Internet 2)Chức -Thông thường, Socket hoạt động tuân theo luồng kiện Đối với mơ hình Client-Server hướng kết nối Socket qui trình Server chờ đợi yêu cầu Client để thực chức Cịn Server nhận u cầu Client thiết lệp địa mà khách hàng sử dụng để tìm kết nối với Server Khi kết nối thiết lập thành công Server đợi khách hàng yêu cầu dịch vụ Việc trao đổi liệu Client Server diễn Client kết nối với Server thơng qua Socket Sau đó, Server trả lời yêu cầu Client gửi lại câu trả lời -Hầu hết thời gian, URL kết nối Server Client sử dụng để truy cập Internet Các chương trình yêu cầu liên kết giao tiếp đơn giản phía Server Client chương trình Vai trị liên kết với Socket giúp Client Server chương trình kết thúc Trong trường hợp Client bắt đầu thiết lập giao tiếp với Server, Server Client đáng tin cậy kết nối thông qua kênh TCP Với loại giao tiếp Client Server đọc ghi Socket gắn với kênh liên lạc cụ thể Nhóm Cơng Nghệ Java 3)Phân loại Socket 3.1 Datagram Sockets: -Giao thức hoạt động UDP-user datagram protocol Đây loại Socket cung cấp chức kết nối để gửi nhận gói liệu Mỗi gói gửi từ ổ cắm datagram định tuyến gửi riêng Đồng thời sử dụng để gửi nhận tin nhắn quảng bá -Ưu điểm: + Cho phép người dùng truyền tải liệu mà khơng cần kết nối hai q trình + Tốc độ kết nối nhanh, thích hợp với liệu có kích thước nhỏ cấn phải truyền tải khoảng thời gian nhanh chóng + Các ứng dụng thích hợp để thực truyền tải qua Datagram Socket thu hút tham gia nhiêu người dùng ứng dụng game hay ứng dụng chat… -Hạn chế: + Không đảm bảo bảo mật thông tin + Thông tin truyền tải bị xáo trộn bị thơng tin khơng có thông báo 3.2 Raw Sockets Cung cấp cho người dùng quyền truy cập vào giao thức truyền thông bản, hỗ trợ trừu tượng hoá Socket Raw Socket khơng dành cho người dùng phổ thơng mà Nhóm Công Nghệ Java chúng cung cấp chủ yếu cho người quan tâm đến việc phát triển giao thức truyền thơng để có quyền truy cập vào số phương tiện khó hiểu giao thức có 3.3 Stream Sockets -Dựa vào TCP để truyền liệu Nếu việc phân phối liệu không thể, người gửi nhận thông báo cho thấy kết nối bị lỗi Đây môt ưu điểm Stream Socket hữu ích so với Datagram Socket Bên cạnh liệu khơng có ranh giới Stream Socket cung cấp luồng liệu theo định hướng kết nối, mà khơng có ranh giới với chế xác định rõ để tạo hay để phá huỷ kết nối đồng thời để phát lỗi -Việc truyền liệu đáng tin cậy hơn, xếp theo thứ tự rõ ràng khơng có khả bị so với Datagram Socket -Stream Socket chia làm loại: + Active Socket:là loại kết nối Socket với Socket hoạt động từ xa thông qua kết nối liệu mở Các kết nối bị đóng Socket hoạt động điểm bị phá huỷ + Passive Socket:là loại Socket tự chủ động kết nối mà thay vào chờ kết nối đến tự sinh Socket hoạt động Đây loại Socket mà Server sử dụng để chấp nhận yêu cầu Macro kết nối 3.4 Sequenced packet Sockets Nhóm Cơng Nghệ Java Giao diện cung cấp phần trừu tượng hoá Socket hệ thống mạng quan trọng hầu hết ứng dụng hệ thống mạng nghiêm trọng Sequenced packet Socket cho phép người dùng thao tác tiêu đề giao thức(SPP) giao thức gói liệu Internet(IDP) gói nhóm gói cách viết tiêu đề nguyên mẫu liệu gửi cách gửi liệu định tiêu đề mặc định sử dụng với tất liệu gửi cho phép người dùng nhận tiêu đề gói đến 4)Socket Java -Được sử dụng để liên lạc ứng dụng chạy JRE khác Nó hướng kết nối khơng kết nối nhìn chung Socket cách thiết lập kết nối Server Client Một socket Java điểm cuối liên kết giao tiếp hai chiều hai chương trình chạy mạng Một socket liên kết với số cổng để lớp TCP xác định ứng dụng mà liệu gửi đến -Điểm cuối kết hợp địa IP số cổng Trong tảng Java cung cấp lớp, Socket thực mặt kết nối hai chiều chương trình Java người dùng với chương trình khác mạng Lớp nằm triển khai phụ thuộc vào tảng, ẩn chi tiết hệ thống cụ thể khỏi chương trình Java người dùng Bằng cách sử dụng lớp thay dựa vào mã gốc, chương trình Java người dùng giao tiếp qua mạng theo cách độc lập với tảng 10 Nhóm Cơng Nghệ Java -Trong trường hợp lập trình phía Client, Client đợi Server khởi động Khi Server hoạt động, gửi yêu cầu đến Server Sau Client chờ phản hồi từ Server Đây trình giao tiếp Client Server Để bắt đầu yêu cầu Client, Server thực bước: + Thiết lập kết nối để hai máy có thơng tin vị trí mạng địa IP cổng TCP + Truyền thông:Để giao tiếp qua kết nối Socket, luồng sử dụng cho đầu vào đầu liệu Sau thiết lập kết nối gửi yêu cầu, người dùng đóng kết nối + Đóng kết nối:kết nối socket đóng rõ ràng sau yêu cầu gửi đến Server -Trong trường hợp lập trình phía Server Server khởi tạo đối tượng chờ yêu cầu Client Khi khách hàng gửi yêu cầu, Server liên lạc lại với phản hồi Để mã hố ứng dụng phía Server, người dùng cần socket là: + Một Server Socket để chờ đợi yêu cầu khách hàng + Một socket cũ đơn giản để giao tiếp với khách hàng 11 Nhóm Cơng Nghệ Java 3.Giới thiệu Web Chat 1.Giới thiệu Hiện nay, giới chứng kiến phát triển vượt bậc Internet cà ứng dụng Internet Cùng với phát triển cộng với nhu cầu trao đổi thong tin lien lạc cách nhanh chóng tiện lợi thúc đẩy phát triển phần mềm để trao đổi thong tin cách tức Điển hình cho phần mềm ứng dụng “chat” Các ứng dụng cho phép người dùng gửi nhận thong điệp nhanh chóng cách trực tiếp với Vì ứng dụng “Window Messeger”, “Yahoo Messeger”… đời Nhưng vấn đề đặt với phần mềm “chat” yêu cầu gần bắt buộc việc phải cài đặt ứng dụng dể sử dụng chúng Từ nảy sinh ý tưởng đưa ứng dụng chat lên Web Một câu hỏi đặt lại web tiện lợi có đưa ứng dụng “chat” lên web Câu trả lời đơn giản: Với “Web” bạn thao tác đâu có Internet mà không yêu cầu phải cài đặt ứng dụng Điều mang lại thuận tiện cho người dùng đồng thời tiết kiệm tài nguyên máy tính cách đáng kể Thử tưởng tượng bạn phải làm việc với máy tính kết nối Internet lại khơng cài sẵn chương trình ứng dụng chat mà bạn cần cho việc trao đổi thong tin với người khác Thì việc phải tải ứng dụng cài đặt ứng dụng lên máy tính rõ ràng rắc rối phiền phức nhiều so với việc dùng trang web có chức Cùng với đó, với phát triển bùng nổ công nghệ web hỗ trợ nhày mạnh ngơn ngữ lập trình Việc tạo trang web có khả hoạt động với chức ứng dụng cài máy tính hồn tồn Vì vậy, việc đưa ứng dụng máy tính lên thành trang web trở thành nhu cầu thiết thực cần thiết Với lý trên, đồ án tập trung giải vấn để xây dựng ứng dụng chat với đề tài “Xây dựng ứng dụng web chat Nodejs & Socket.io” Với mục tiêu đề tài xây dựng trang web có khả tương tự phần mềm chat cài đặt máy tính có trước 12 Nhóm Cơng Nghệ Java 2.Nội dung Một website có chức phục vụ người dùng trao đổi thông tin trực tiếp với Đầu tiên người dùng truy cập trang web, đăng nhập vào chat Sauk hi người dùng đăng nhập vào lên trang web chat tương tự ứng dụng chat, hiển thị danh sách người dùng đăng nhập vào Người dùng cịn tạo vào room để trao đổi thông tin riêng tập thể Khi tham gia hệ thống người dùng thực số thao tác: - Người dùng đăng nhập đăng xuất - Người dùng tạo room để nhắn với 3.Ứng dụng Ứng dụng xây dựng web chat rõ ràng , trang web cho phép người dùng trao đổi thơng tin cách nhanh chóng Và khơng phần mềm ứng dụng chat yêu cầu phải cài đặt phần mềm lên máy tính vừa tốn thời gian vừa tốn tài nguyên máy tính, web chat mà đồ án hướng tới để xây dựng vừa đơn giản vừa tiện lợi lại sử dụng lúc nơi Đấy tiện lợi lớn mà web chat mang lại cho người dùng Đó xu hướng chung hệ thống Với ứng dụng web chat hồn tồn đưa vào chức gắn kèm với traang web, diễn đàn Internet Một trang web thông tin trở nên thu hút người dùng có thêm chức hệ thống web chat mà ta nói đến 13 Nhóm Cơng Nghệ Java 4.Ngơn ngữ lập trình Để xây dựng lên hệ thống phần mềm ứng dụng hay trang web cần phải sữ dụng đến ngơn ngữ lập trình Và mục tiêu riêng đồ án ngơn ngữ lập trình nói riêng ngơn ngữ lập trình web như:html, Php, javacript,asp.net… Và đây, chọn ngôn ngữ để dùng cho ứng dụng web chat: html,javascript, css với để xây dựng nên hệ thống với nodejs & socket.io 4.Phân Tích Code 1.Server.js 10 11 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(process.env.PORT || 3000); var mangUser=[]; 12 io.on("connection", function(socket){//Kết nối 13 console.log("Co nguoi ket noi "+socket.id); 14 socket.on("disconnect", function(){//Ngắt kết nối 15 console.log(socket.id + " da ngat ket noi!!!"); 16 }); 17 18 socket.on("tao-room", function(data){//tạo room vào room 19 socket.join(data); 20 socket.Room = data; 21 22 var mangRoom = []; 23 for(r in socket.adapter.rooms){//socket.adapter.rooms show danh sách room có 24 mangRoom.push(r); 25 } 26 io.sockets.emit("server-send-rooms", mangRoom); 27 socket.emit("server-send-rooms-socket", data); 28 }); 29 //đăng nhập user 30 socket.on("client-send-Username",function(data){ 31 if(mangUser.indexOf(data)>=0){ 32 socket.emit("server-send-dki-thatbai"); 33 }else { 34 mangUser.push(data); 14 Nhóm Cơng Nghệ Java 35 socket.Username = data; 36 socket.emit("server-send-dki-thanhcong", data); 37 io.sockets.emit("server-send-danhsach-Users", mangUser); 38 } 39 }); 40 //Đăng xuất User 41 socket.on("logout", function(){ 42 mangUser.splice( 43 mangUser.indexOf(socket.Username), 44 ); 45 socket.broadcast.emit("server-send-danhsach-Users",mangUser); 46 }); 47 //User nhắn 48 socket.on("user-send-message", function(data){ 49 io.sockets.in(socket.Room).emit("server-send-message", {un:socket.Username, nd:data} ); 50 }); 51 //Hiện User gõ chữ 52 socket.on("toi-dang-go-chu", function(){ 53 var s = socket.Username + " nhắn tin"; 54 io.sockets.emit("ai-do-dang-go-chu", s); 55 }); 56 //User ngừng gõ chũ 57 socket.on("toi-stop-go-chu", function(){ 58 io.sockets.emit("ai-do-STOP-go-chu"); 59 }); 60 }); 61 app.get("/", function (req, res) { 62 res.render("trangchu"); 63 }); 64 2.Xuly.js var socket = io("https://chatnodejssocketio.herokuapp.com"); //Danh sách room socket.on("server-send-rooms", function(data){ $("#contentRoom").html(""); data.map(function(r){ $("#contentRoom").append("" + r + ""); }); }); //Room socket.on("server-send-rooms-socket", function(data){ $("#roomHienTai").html(data); }); $(document).ready(function(){ $("#btnTaoRoom").click(function(){ socket.emit("tao-room", $("#txtRoom").val()); }); }); socket.on("server-send-dki-thatbai",function(){ alert("Sai Username (co nguoi dang ki roi!!!!)"); }); socket.on("server-send-danhsach-Users",function(data){ $("#contentUser").html(""); data.forEach(function(i){ $("#contentUser").append(("" + i + "")); }); }); socket.on("server-send-dki-thanhcong",function(data){ $("#currentUser").html(data); $("#loginForm").hide(2000); $("#chatForm").show(1000); }); socket.on("server-send-message", function(data){ $("#listMessages").append("" + data.un + "" + "" + data.nd + "" +""); }); 15 Nhóm Cơng Nghệ Java socket.on("ai-do-dang-go-chu", function(data){ $("#thongbao").html("" + data); }); socket.on("ai-do-STOP-go-chu", function(data){ $("#thongbao").html(""); }); $("document").ready(function(){ $("#loginForm").show(); $("#chatForm").hide(); $("#btnRegister").click(function(){ socket.emit("client-send-Username", $("#txtUserName").val()); }); $("#btnLogout").click(function(){ socket.emit("logout"); $("#chatForm").hide(2000); $("#loginForm").show(1000); }); $("#btnSendMessage").click(function(){ socket.emit("user-send-message", $("#txtMessage").val()); }); $("#txtMessage").focusin(function(){ socket.emit("toi-dang-go-chu"); }); $("#txtMessage").focusout(function(){ socket.emit("toi-stop-go-chu"); }); }); 3.trangchu.ejs Chat Node.js vs Socket.io What Your Name? Đăng nhập var input = document.getElementById("txtUserName"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("btnRegister").click(); } });

Chat Node.js + Socket.io Vào room

Room 16 Nhóm Cơng Nghệ Java User Online Xin chào, bạn Room: Send 4.layout.css body{background-color: #867b7b;} #wrapper{width: 1000px;margin: auto; border: solid 1px gray;} #txtUserName{background-color: rgb(175, 170, 162); border:solid 1px lawngreen; height: 25px;} #btnRegister{height: 25ps;} #left, #right:{min-height: 300px;} #left{width: 20%;float: left;} #right{width: 80%;float: right;background-color: #7ee0e0;} #txtRoom{border:solid 1px lawngreen;background-color: rgb(175, 170, 162);} #titleRoom{border:solid 1px black; padding: 5px;text-align: center;font-weight: bold; background-color: rgb(126, 10 7, 107);} #contentRoom{border:solid 1px black;padding: 5px;border-top: none;height: 179px;text-align: center;overflow: aut o;background-color: rgb(126, 107, 107);} #titleUser{border:solid 1px black; padding: 5px;text-align: center;font-weight: bold; background-color: rgb(126, 10 7, 107);} #contentUser{border:solid 1px black;padding: 5px;border-top: none;height: 178px;text-align: center;overflow: aut o;background-color: rgb(126, 107, 107);} #sayHi{text-align: right;} #roomHienTai{background-color: gray; width: 150px; color:white;} #listMessages{height: 300px;background-color: #e6a67c; margin-bottom: 10px; border: solid 1px lawngreen; over flow: auto;} #thongbao{float: left;} #chat{float:right;} #txtMessage{background-color: transparent;border: 2px solid lawngreen;width: 700px;height: 25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;} #btnSendMessage{width: 80px;height: 25px;} #td1{background-color: lawngreen; border-radius: 10px;font-display: block;font-size:120%;border: solid 1px black; color: ivory;} 17 Nhóm Cơng Nghệ Java -Kết Thúc, Cảm ơn thầy xem báo cáo nhóm em!!! - 18 ... triển lên + Nodejs xử lý hàng ngàn kết nối đồng thời -Nhược điểm Nodejs: Nhóm Cơng Nghệ Java + Tốn tài nguyên: Giống hầu hết công nghệ mới, việc triển khai Nodejs host điều dễ dàng Nodejs giai... tương tự khơng nên dùng NodeJS (Lý do: Nodejs viết C++ & Javascript, nên phải thơng qua thêm trình biên dịch Nodejs lâu chút ) Trường hợp bạn viết Addon C+ + để tích hợp với NodeJS để tăng hiệu suất... charset="utf-8"> Chat Node.js vs Socket.io< /title>