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

M C L C ỤC LỤC ỤC LỤC

LỜI MỞ ĐẦU 4

PHẦN 1 : CƠ SỞ XÂY DỰNG ỨNG DỤNG 5

I.Các ngôn ngữ sử dụng trong đề tài 5

1.1.Khái niệm Node.js 5

1.2.Khái niệm Socket 6

1.3 Khái niệm socket.io 7

1.4 HTML và CSS 7

PHẦN 2: CÁC BƯỚC XÂY DỰNG ỨNG DỤNG 8

I.Xây dựng giao diện 8

II.Xây dựng code NodeJS và Socket.io 10

BẢNG PHÂN CÔNG CÔNG VIỆC

LỜI MỞ ĐẦU

Trong thời đại công nghệ thông tin hiện nay, do nhu cầu đòi hỏi cao nên các ứng dụng nhắn tin , chat ngày càng phổ biến và được phát triển mạnh mẽ trên cả nền tảng web lẫn nền tảng điện thoại Ví dụ như Facebook Messenger, Zalo, WhatApps, Telegram Trong giới hạn đề tài được giao là 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 và bộ framework SOCKET.IO để thực hiện Ứng dụng được lập trình chạy trên nền giao diện web.Chúng xem xin cảm ơn Thầy Trần Quang Vinh đã giúp đỡ chúng em trong quá trình hoàn thiện đề tài

PHẦN 1 : CƠ SỞ XÂY DỰNG ỨNG DỤNG

I.Các ngôn ngữ sử dụng trong đề tài

1.1.Khái niệm Node.js

NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó được

sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp NodeJS là một mã nguồn mở được sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất

Các đặc điểm của Node.js

 Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ (none-blocking),

nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về Việc

di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime)

 Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript Engine

nên việc thực thi chương trình rất nhanh

 Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồng

duy nhất với sự kiện lặp cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu Node.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP Server

 Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ

yếu là đầu ra dữ liệu

 Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License

1.2.Khái niệm Socket

-Viết một ứng dụng chát với các ngôn ngữ lập trình web phổ biến như PHP hay Ruby là một công việc phức tạp và khó khăn Nó thường đỏi hỏi phía client ( trình duyệt ) thực hiện công việc gửi các poll request tới server để lấy về thông tin cập nhật , theo dõi thời gian diễn ra sự thay đổi Do đó đối với một ứng dụng chát đòi hỏi việc cập nhật nội dụng diễn ra theo thời gian thực (real time) thì áp dụng phương pháp này thường không mang lại hiệu quả cao

Từ khi ra đời cho đén thời điểm hiện tại , socket được coi là giải pháp mang tính truyền thống để phát triển các ứng dụng real time Socket cung cấp kênh giao tiếp hai chiều (bi-directional) giữa client và server Server sử dụng socket.io có thể gửi thông tin cập nhật

về phía client thay vì client phải gọi request lên server như trước đây Khi viết một ứng dụng chat điều này có vai trò quan trọng vì server lúc này có thể update thông tin gửi về cho các client khác nhau Mỗi khi có thông tin cập nhật trên server thì server sẽ gửi thông báo về cho các client để update thay vì 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 này không những đảm bảo tính real time cho ứng dụng mà còn giúp giảm tải cho server do có ít hơn số lượng request từ client gửi đến server Với những ứng dụng có nhiều người sử ụng thì điều này rất quan trọng

1.3 Khái niệm socket.io

Socket.io là thư viện Javascript dùng để phát triển các ứng dụng thời gian thực Thư viện socket.io được phát triển để dùng cho cả client và server( chạy node.js)

Đầu tiên thư viện socket.io có thể được cài đặt trên server (Node.js) sử dụng chương trình quản lý Node Package Sau khi cài đặt có thể khởi động socket.io như sau

var socket = require('socket.io');

Với việc Socket.IO được sử dụng trên server thì sau đó server sẽ cung cấp một địa chỉ URL để client (trình duyệt) có thể tải thư viện Socket.IO này về từ server và nhúng vào trang như sau:

<script src="/socket.io/socket.io.js"></script>

1.4 HTML và CSS

-HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh

dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web Cùng với CSS và JavaScript, HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web HTML được định nghĩa như

là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web

-CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với

phần tên mở rộng là css Trong Style Sheet này chứa những câu lệnh CSS Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v

Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung Giúp cho phần code của trang web cũng gọn hơn

và quan trọng hơn cả là dễ chỉnh sửa hơn

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 được xây dựng dựa trên ngôn ngữ HTML và CSS File được lưu dưới dạng file đuôi ejs Đây là một template engine được tích hợp sẵn trong Framework ExpressJS của NodeJS

Cấu trúc giao diện bao gồm 2 phần

-LoginForm

-ChatForm

+LoginForm: Giao diện bao gồm

 Form : Bao gồm 2 mục : 1 ô input để người dùng đăng kí tên Chát, và 1 phím để tiến hành đăng kí tên

+ChatForm : Giao diện gồm

 Form chứa danh sách các User đang online trên kênh chát

 Form chứa tên phòng chat riêng của khách hàng

 Form để người dùng nhập tên phòng cần tạo và 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 hiện chức năng thoát khỏi form chát

 2 Form để hiển thị các tin nhắn chát chung và chát riêng

 Một Form để người dùng nhập tin nhắn

 2 Button để người dùng bấm chát riêng và chung

II.Xây dựng code NodeJS và Socket.io

1.Xây dựng Server :

-Một server được xây dựng dựa trên 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 hiện khai báo thư viện ExpressJS cùng thư viện Socket.io cũng như thực hiện sự kiện lắng nghe từ PORT 3000

-Khi người dùng thực hiện nhập link : localhost:3000 Server sẽ thực hiện trả về nội dung HTML từ file trangchu.ejs được xây dựng từ HTML và CSS

2 Các hàm socket trong thư viện socket.io

-io.sockets.emit : Khi nhận được gói tin từ client ,server sẽ chuyển gói tin đến cho tất cả các socket mà sever đang quản lý

-socket.emit: Khi nhận được gói tin từ client ,server chuyển gói tin về đúng client đã gửi request lên server

-socket.broadcast.emit : Khi nhận được gói tin từ client , server chuyển gói tin về các client còn lại ngoại trừ client đã gửi request

-io.to(“socket.id).emit: Gửi dữ liệu đến một socket với id là “socket.id”

-socket.on: Lắng nghe sự kiện có dữ liệu gửi đến

-socket.emit: Client tiến hành gửi dữ liệu lên server

3 Xây dựng sự kiện đăng nhập

-Client: Lắng nghe sự kiện bấm phím Register, dùng câu lệnh socket.emit gửi dữ liệu là tên đăng kí lên server

$("#btnRegister").click(function(){

socket.emit("client-send-Username",$("#txtUser").val());

});

-Server: Lắng nghe sự 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 ra các trường hợp

+ Nếu tên đăng kí đã có trong mảng :

 Server: Gửi về client sự kiện “server-send-dki-that-bai”

if(manageUser.indexOf(data)>=0){

socket.emit("server-send-dki-that-bai");

 Client: Lắng nghe sự kiện đăng kí thất bại , hiện 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ó trong mảng:

 Server: Đẩy tên đăng kí vào mảng , gửi đến server đăng kí sự kiện “server-send-dki-thanh-cong” và gửi đến tất cả các client sự kiện “server-send-ds-dki”

 Client đã gửi đăng kí : Lắng nghe sự kiện “server-send-dki-thanh-cong” và thực hiện 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);

});

 Tất cả client : Lắng nghe sự kiện “server-send-ds-dki” và data là 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("<h4 class='user'>"+i+"</h4>");

});

});

4.Xây dựng sự kiện đăng xuất

-Client: Lắng nghe sự kiện bấm nút Logout , gửi sự kiện ”logout” kèm theo ẩn FormChat

và gọi FormLogin:

$("#btnLogout").click(function(){

socket.emit("logout");

$("#loginForm").show(2000);

$("#chatForm").hide(1000);

});

-Server : Lắng nghe sự kiện “logout” từ client , tiến hành xóa tên đăng kí của client trong mảng chứa, gửi sự 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

);

socket.broadcast.emit("server-send-ds-dki",manageUser);

});

5 Xây dựng sự kiện chat

-Client: Lắng nghe sự kiện bấm phím Gửi , gửi đi event “ user-send-mess” đi kèm với data là dữ liệu từ khung chát

$("#btnSend").click(function(){

socket.emit("user-send-mess",$("#txtMessage").val());

});

-Server: Lắng nghe sự kiện “user-send-mess” , gửi đi sự kiện “server-send-mess” đi kèm với data là tên người dùng và nội dung chat đến tất cả 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 cả Client: Lắng nghe sự kiện “server-send-mess” và đưa data vào khung chát

socket.on("server-send-mess",function(data){

$("#listMessage").append("<div class='ms'>"+"<span

id='no1'>"+data.un+"</span>"+":"+data.nd+"</div>");

});

6 Xây dựng sự kiện hiện người đang Chat

-Client 1: Lắng nghe sự kiện đang Chat , gửi đi event “co-nguoi-dang-go”

$("#txtMessage").focusin(function(){

socket.emit("co-nguoi-dang-go");

});

-Server: Lắng nghe event “co-nguoi-dang-go” , gửi đi đến các client còn lại ngoại trừ client đang chát sự kiện “server-send-go-chu” đi kèm với chuỗi báo có người đang gõ

var s=socket.Username+" đang gõ chữ ";

socket.broadcast.emit("server-send-go-chu",s);

});

-Các Client Còn Lại : Lắng nghe sự kiện “server-send-go-chu” và hiển thị dòng thông báo client đang chát

socket.on("server-send-go-chu",function(data){

$("#go").html(data);

});

7.Xây dựng sự kiện người dừng Chat

-Client 1: Lắng nghe sự kiện người dùng ngừng chat, gửi đi event “nguoi-dung-go”:

$("#txtMessage").focusout(function(){

socket.emit("nguoi-dung-go");

});

-Server: Lắng nghe sự kiện “nguoi-dung-go”, gửi đi đến các client còn lại event “server-ngung-go” cùng data là 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 sự kiện “server-ngung-go” , đưa data vào khung html socket.on("server-ngung-go",function(data){

$("#go").html(data);

});

8.Xây dựng sự kiện Chat Riêng Tư

8.1 Tạo Phòng

-Client : Lắng nghe sự kiện Tạo Phòng ,gửi đi sự kiện “user-tao-phong” đi kèm data là tên phòng :

$("#btnTaoPhong").click(function(){

socket.emit("user-tao-phong",$("#txtPhong").val());

});

-Server: Lắng nghe sự kiện “user-tạo-phong” , tạo một room với tên là data nhận được , gửi về chính client đó sự 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 sự kiện “server-gui-phong” , hiển thị tên phòng :

socket.on("server-gui-phong",function(data){

$("#dsPhong").html("<h4 class='dsPhong'>"+data+"</h4>");

});

8.2 Chat

-Client: Lắng nghe sự kiện bấm nút gửi tin , gửi đi event “user-gui-tin” kèm theo data là

nội dung tin cần gửi

$("#btnSend1").click(function(){

socket.emit("user-gui-tin",$("#txtMessage").val());

});

-Server: Lắng nghe sự kiện “user-gui-tin” , gửi đi sự kiện “server-chat” đi đến room đã tạo đi cùng với data là tên người gửi đ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 sự kiện “server-chat”, hiển thị nội dung chát trong room socket.on("server-chat",function(data){

$("#listMessage1").append("<div class='ms'>"+"<span

id='no1'>"+data.un+"</span>"+":"+data.nd+"</div>");

});

8.3 Mời Chat

-Thiết lập một mảng manageID[] đi kèm với mảng manageUser[] vừa để quản lý ID và

quản lý tên người dùng

- Client : Gửi đi sự kiện “user-send-moi ” đi 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 sự 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 của socket đang quản lý kết nối giữa client với server của người được mời Sau đó gửi event “server-gui-ten” đến chính

ID người cần mời kèm theo data là tên người mời và 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});

});