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 hiện : 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................................................................................................................................1
LỜI CẢM ƠN.....................................................................................................................................2
BẢNG PHÂN CÔNG CÔNG VIỆC CÁC THÀNH VIÊN TRONG NHÓM..................................................3
1.Giới thiệu về Nodejs.....................................................................................................................4
2.Giới thiệu về Socket......................................................................................................................6
1)Khái niệm về Socket..................................................................................................................6
2)Chức năng.................................................................................................................................7
3)Phân loại Socket.......................................................................................................................7
3.1. Datagram Sockets:............................................................................................................7
3.2. Raw Sockets......................................................................................................................8
3.3. Stream Sockets.................................................................................................................8
3.4. Sequenced packet Sockets...............................................................................................9
4)Socket trong Java......................................................................................................................9
3.Giới thiệu về 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 6 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 trong quyển
báo cáo tiểu luận môn Hệ quản trị cơ sở dữ liệu này không phải là bản
sao chép từ bất kì tiểu luận nào có trước. Nếu không đúng sự thật, chúng
em xin chịu mọi trách nhiệm trước thầy.

1
Nhóm 6 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 bộ môn – Thầy
Nguyễn Minh Hải đã dạy dỗ, truyền đạt những kiến thức quý báu cho
em trong 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 của thầy , em đã có thêm cho mình nhiều kiến thức
bổ ích, tinh thần học tập hiệu quả, nghiêm túc. Đây chắc chắn sẽ là
những kiến thức quý báu, là hành trang để em có thể vững bước sau này.

Bộ môn Công Nghệ Java là một môn học thú vị, vô cùng bổ ích và 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 của sinh viên. Tuy nhiên, do vốn kiến thức còn nhiều hạn chế
và khả năng tiếp thu thực tế còn nhiều bỡ ngỡ. Mặc dù em đã cố gắng
hết sức nhưng chắc chắn bài tiểu luận khó có thể tránh khỏi những thiếu
sót và nhiều chỗ còn chưa chính xác, kính mong cô xem xét và góp ý để
bài tiểu luận của em được hoàn thiện hơn.

Em xin chân thành cảm ơn!”

2
Nhóm 6 Công Nghệ Java

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ên ý tưởng, viết code và Làm việc nhóm đầy đủ hàng
Lê Hoài Phong chỉnh sửa file word báo cáo tuần

Lên ý tưởng, viết code và Làm việc nhóm đầy đủ hàng

Phạm Song Toàn chỉnh sửa file word báo cáo tuần

Làm file word báo cáo, file Làm việc nhóm đầy đủ hàng
Trần Hợp Phương powerponit để hướng dẫn tuần
các bước thực hiện chương
trình
Làm file word báo cáo, file Làm việc nhóm đầy đủ hàng
Lý Vĩnh Phúc powerponit để hướng dẫn tuần
các bước thực hiện chương
trình

3
Nhóm 6 Công Nghệ Java

1.Giới thiệu về Nodejs

- Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở
trên Javascript Runtime của Chrome. Chúng ta có thể xây dựng được các
ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.
- Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho
tốc độ xử lý và hiệu năng khá cao. Nó tạo ra được các ứng dụng có tốc
độ xử lý nhanh, realtime thời gian thực. Node.js áp dụng cho các sản
phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ,
hoặc tạo ra các dự án Startup nhanh nhất có thể.
- Về bản chất, Nodejs chính là ngôn ngữ JavaScript. Tuy nhiên, Nodejs
khác với JavaScript ở chỗ các chương trình viết bằng Nodejs sẽ được
chạy trên môi trường máy chủ. Ngược lại, các chương trình JavaScript
thường sẽ được chạy trên môi trường trình duyệt.

4
Nhóm 6 Công Nghệ Java

NHỮNG ỨNG DỤNG NÊN VIẾT BẰNG NODEJS

-Về tốc độ:

+ Nodejs có tốc độ rất nhanh.
+ Đó là một yêu cầu khá quan trọng khi bạn là một startup đang cố
gắng tạo ra một sản phẩm lớn. Và muốn đảm bảo có thể mở rộng nhanh
chóng. Đáp ứng được một lượng lớn người dùng khi trang web của bạn
phát triển lên.
+ Nodejs có thể xử lý hàng ngàn kết nối đồng thời.

-Nhược điểm của Nodejs: 

5
Nhóm 6 Công Nghệ Java

+ Tốn tài nguyên: Giống như hầu hết các công nghệ mới, việc triển khai
Nodejs trên host không phải là điều dễ dàng. Nodejs vẫn đang trong giai
đoạn phát triển ban đầu, điều này có nghĩa là một số đặc trưng sẽ thay
đổi trong quá trình phát triển tiếp theo.
Ứng dụng nặng tốn tài nguyên
+ Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding
video, convert file, decoding encryption… hoặc các ứng dụng tương tự
như vậy thì không nên dùng NodeJS (Lý do: Nodejs được viết bằng C++
& Javascript, nên phải thông qua thêm 1 trình biên dịch của Nodejs sẽ
lâu hơn 1 chút ). Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp
với NodeJS để tăng hiệu suất tối đa!

2.Giới thiệu về Socket

1)Khái niệm về Socket
Socket là một cổng kết nối mà thông qua mạng lưới kết nối
Internet có thể giúp các chương trình máy tính này có thể kết nối với các
chương trình trên máy tính khác.
Vì thế nó còn được gọi là một điểm cuối trong kênh liên lạc hai chiều.
Các Socket được tạo và tập hợp qua việc thiết lập các yêu cầu lập
trình được xác định là các lệnh gọi hàm và đây chính là kĩ thuật giao
diện lập trình ứng dụng(API). Một Socket có thể đơn giản hoá cách thực
hiện một chức năng trong chương trình. Lập trình Socket giúp người
dùng nhận và gửi dữ liệu từ máy tính nay sang máy tính khác thông qua
đường truyền Internet.

6
Nhóm 6 Công Nghệ Java

2)Chức năng
-Thông thường, một Socket hoạt động sẽ tuân theo một luồng sự
kiện. Đối với mô hình Client-Server hướng kết nối thì Socket trên qui
trình Server chờ đợi yêu cầu của Client để thực hiện chức năng của
mình. Còn Server nhận được yêu cầu của Client khi đã thiết lệp một địa
chỉ mà khách hàng có thể sử dụng để tìm và kết nối với Server. Khi kết
nối được thiết lập thành công Server sẽ đợi khách hàng yêu cầu dịch vụ.
Việc trao đổi dữ liệu giữa Client và Server diễn ra khi Client kết nối với
Server thông qua Socket. Sau đó, Server sẽ trả lời yêu cầu của Client và
gửi lại câu trả lời.
-Hầu hết thời gian, URL và các kết nối của Server và Client được
sử dụng để truy cập Internet. Các chương trình sẽ yêu cầu một liên kết
giao tiếp đơn giản giữa phía Server và Client của chương trình. Vai trò
này được liên kết với một Socket sẽ giúp Client và Server của chương
trình kết thúc. Trong trường hợp một Client bắt đầu và thiết lập giao tiếp
với Server, một Server và một Client đáng tin cậy sẽ được kết nối thông
qua kênh TCP. Với loại giao tiếp này các Client và Server đều có thể
đọc hoặc ghi trên các Socket gắn với một kênh liên lạc cụ thể.

3)Phân loại Socket

3.1. Datagram Sockets:
-Giao thức hoạt động là UDP-user datagram protocol. Đây là
một loại Socket cung cấp chức năng kết nối để gửi và nhận các gói dữ
liệu. Mỗi gói được gửi từ một ổ cắm datagram được định tuyến và gửi
riêng. Đồng thời nó cũng có thể được sử dụng để gửi và nhận tin nhắn
quảng bá.
-Ưu điểm:

7
Nhóm 6 Công Nghệ Java

+ Cho phép người dùng truyền tải dữ liệu mà không cần kết
nối giữa hai quá trình
+ Tốc độ kết nối nhanh, thích hợp với những dữ liệu có kích
thước nhỏ cấn phải truyền tải trong khoảng thời gian nhanh chóng.
+ Các ứng dụng thích hợp để thực hiện truyền tải qua
Datagram Socket thu hút sự tham gia của nhiêu người dùng hiện
nay là các ứng dụng game hay các ứng dụng chat…
-Hạn chế:
+ Không đảm bảo sự bảo mật thông tin
+ Thông tin truyền tải bị xáo trộn hoặc có thể bị mất thông
tin nhưng không có thông báo mất

3.2. Raw Sockets

Cung cấp cho người dùng quyền truy cập vào các giao thức truyền
thông cơ 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à chúng được cung cấp chủ yếu cho người quan
tâm đến việc phát triển các giao thức truyền thông mới hoặc để có quyền
truy cập vào một số phương tiện khó hiểu hơn của một giao thức hiện
có.

3.3. Stream Sockets

-Dựa vào TCP để truyền dữ liệu. Nếu việc phân phối dữ liệu là không
thể, người gửi sẽ nhận được một thông báo cho thấy kết nối bị lỗi. Đây
là môt trong những ưu điểm của Stream Socket hữu ích hơn so với
Datagram Socket. Bên cạnh đó các dữ liệu cũng không có bất kỳ ranh
giới nào. Stream Socket cung cấp luồng dữ liệu theo định hướng kết nối,
tuần tự và duy nhất mà không có ranh giới với các cơ chế được xác định
rõ để tạo hay để phá huỷ các kết nối đồng thời để phát hiện lỗi.

8
Nhóm 6 Công Nghệ Java

-Việc truyền dữ liệu đáng tin cậy hơn, được sắp xếp theo thứ tự rõ
ràng và không có khả năng bị mất so với Datagram Socket.
-Stream Socket được chia làm 2 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 dữ liệu mở. Các kết nối này khi bị đóng thì các
Socket hoạt động tại mỗi điểm cũng sẽ bị phá huỷ.
+ Passive Socket:là loại Socket không thể tự chủ động kết nối
mà thay vào đó là chờ kết nối đến sẽ tự sinh ra một Socket hoạt
động mới. Đây là loại Socket mà các Server sử dụng để chấp nhận
yêu cầu của Macro kết nối.

3.4. Sequenced packet Sockets

Giao diện này chỉ được cung cấp như một phần của sự trừu tượng hoá
Socket hệ thống mạng và rất quan trọng trong hầu hết các ứ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 các tiêu đề giao thức(SPP) hoặc giao thức gói dữ liệu
Internet(IDP) trên một gói hoặc một nhóm gói bằng cách viết tiêu đề
nguyên mẫu cùng bất kỳ dữ liệu nào được gửi hoặc bằng cách gửi dữ
liệu chỉ định một tiêu đề mặc định sẽ được sử dụng với tất cả dữ liệu gửi
đi và cho phép người dùng nhận các tiêu đề trên các gói đến.

4)Socket trong Java

-Được sử dụng để liên lạc giữa các ứng dụng đang chạy trên JRE khác
nhau. Nó có thể hướng kết nối hoặc không kết nối nhưng nhìn chung
một Socket là một cách thiết lập kết nối giữa Server và Client. Một
socket trong Java là một điểm cuối của liên kết giao tiếp hai chiều giữa
hai chương trình đang chạy trên mạng. Một socket được liên kết với một
số cổng để lớp TCP có thể xác định ứng dụng mà dữ liệu được gửi đến.

9
Nhóm 6 Công Nghệ Java

-Điểm cuối là sự kết hợp của địa chỉ IP và số cổng. Trong nền tảng Java
cung cấp một lớp, Socket thực hiện một mặt của kết nối hai chiều giữa
chương trình Java của người dùng với một chương trình khác trên mạng.
Lớp nằm trên triển khai phụ thuộc vào nền tảng, ẩn các chi tiết của bất
kỳ hệ thống cụ thể nào khỏi chương trình Java của người dùng. Bằng
cách sử dụng lớp thay vì dựa vào mã gốc, các chương trình Java của
người dùng có thể giao tiếp qua mạng theo cách độc lập với nền tảng.
-Trong trường hợp lập trình phía Client, đầu tiên Client sẽ đợi Server
khởi động. Khi Server hoạt động, nó sẽ gửi các yêu cầu đến Server. Sau
đó Client sẽ chờ phản hồi từ Server. Đây là quá trình giao tiếp giữa
Client và Server. Để bắt đầu một yêu cầu của Client, Server thực hiện
các bước:
+ Thiết lập kết nối để hai máy có thông tin về vị trí mạng của nhau là địa
chỉ IP và cổng TCP
+ Truyền thông:Để giao tiếp qua kết nối Socket, các luồng được sử dụng
cho cả đầu vào và đầu ra của dữ liệu. Sau đó khi thiết lập kết nối và 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 được đóng rõ ràng sau khi yêu cầu được
gửi đến Server
-Trong trường hợp lập trình phía Server về cơ bản Server sẽ khởi tạo đối
tượng của nó và chờ yêu cầu của Client. Khi khách hàng gửi yêu cầu,
Server sẽ liên lạc lại với phản hồi. Để mã hoá ứng dụng phía Server,
người dùng cần 2 socket đó là:
+ Một Server Socket để chờ đợi các yêu cầu của khách hàng
+ Một socket cũ đơn giản để giao tiếp với khách hàng

10
Nhóm 6 Công Nghệ Java

3.Giới thiệu về Web Chat

1.Giới thiệu
Hiê ̣n nay, thế giới đang chứng kiến sự phát triển vượt bâ ̣c của Internet và cà ứng dụng
trên Internet. Cùng với sự phát triển đó cô ̣ng với nhu cầu trao đổi và thong tin lien lạc
mô ̣t cách nhanh chóng và tiê ̣n lợi đã thúc đẩy sự phát triển các phần mềm để trao đổi
thong tin mô ̣t cách tức thì. Điển hình cho các phần mềm đó là ứng dụng “chat”. Các ứng
dụng cho phép người dùng gửi và nhâ ̣n các thong điê ̣p nhanh chóng mô ̣t cách trực tiếp
với nhau. Vì thế nhưng ứng dụng như “Window Messeger”, “Yahoo Messeger”… ra đời.
Nhưng vấn đề đă ̣t ra là với các phần mềm “chat” như trên thì mô ̣t yêu cầu gần như bắt
buô ̣c là viê ̣c phải cài đă ̣t ứng dụng dể có thể sử dụng chúng. Từ đó nảy sinh ý tưởng đưa
các ứng dụng chat lên Web. Mô ̣t câu hỏi đă ̣t ra là tại sao lại là web và sự tiê ̣n lợi có được
là gì khi đưa những ứng dụng “chat” lên web. Câu trả lời rất đơn giản: Với “Web” bạn có
thể thao tác bấ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 sự thuâ ̣n tiê ̣n cho người dùng và đồng thời là sự tiết kiê ̣m tài nguyên máy tính
mô ̣t cách đáng kể. Thử tưởng tượng nếu bạn phải làm viê ̣c với mô ̣t máy tính được kết nối
Internet nhưng lại không cài sẵn mô ̣t 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 và cài đă ̣t ứng dụng đó lên
máy tính rõ ràng là rắc rối và phiền phức hơn rất nhiều so với viê ̣c dùng mô ̣t trang web có
cùng chức năng.
Cùng với đó, với sự phát triển bùng nổ của công nghê ̣ web và sự hỗ trợ nhày càng
mạnh của các ngôn ngữ lâ ̣p trình. Viê ̣c tạo ra mô ̣t trang web có khả năng hoạt đô ̣ng với
các chức năng như mô ̣t ứng dụng được cài trên máy tính là hoàn toàn có thể. Vì vâ ̣y, viê ̣c
đưa mô ̣t ứng dụng trên máy tính lên thành mô ̣t trang web trở thành mô ̣t nhu cầu thiết thực
và cần thiết.
Với nhưng lý do trên, đồ án sẽ tâ ̣p trung giải quyết vấn để xây dựng mô ̣t ứng dụng
chat với đề tài “Xây dựng ứng dụng web chat bằng Nodejs & Socket.io”. Với mục tiêu đề
tài là xây dựng mô ̣t trang web có khả năng tương tự như những phần mềm chat được cài
đă ̣t trên máy tính đã có trước đây.

11
Nhóm 6 Công Nghệ Java

2.Nội dung
Mô ̣t website có chức năng phục vụ người dùng trao đổi thông tin trực tiếp với nhau. Đầ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 sẽ hiê ̣n lên mô ̣t trang web chat tương tự mô ̣t ứng dụng chat, nó sẽ hiển thị ra danh
sách người dùng đã đăng nhâ ̣p vào. Người dùng còn có thể tạo và vào mô ̣t room để trao
đổi thông tin riêng hoă ̣c tâ ̣p thể. Khi tham gia hê ̣ thống người dùng có thể thực hiê ̣n mô ̣t
số thao tác:
- Người dùng có thể đăng nhâ ̣p và đăng xuất.
- Người dùng có thể tạo room để nhắn với nhau.

3.Ứng dụng
Ứng dụng xây dựng web chat rất rõ ràng , mô ̣t trang web cho phép người dùng trao đổi
thông tin mô ̣t cách nhanh chóng. Và không như 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 có thể sử dụng mọi lúc mọi
nơi. Đấy là sự tiê ̣n lợi lớn nhất mà web chat mang lại cho người dùng. Đó cũng chính là
xu hướng chung của các hê ̣ thống hiê ̣n nay.
Với ứng dụng web chat này chúng ta hoàn toàn có thể đưa vào như mô ̣t chức năng
gắn kèm với mô ̣t traang web, mô ̣t diễn đàn Internet. Mô ̣t trang web thông tin sẽ trở nên
thu hút người dùng hơn nếu có thêm các chức năng của hê ̣ thống web chat mà ta đang nói
đến.

4.Ngôn ngữ lập trình

Để xây dựng lên mô ̣t hê ̣ thống là phần mềm ứng dụng hay mô ̣t trang web thì đầu tiên cần
phải sữ dụng đến các ngôn ngữ lâ ̣p trình. Và mục tiêu riêng của đồ án các ngôn ngữ lâ ̣p
trình ở đây nói riêng là các ngôn ngữ lâ ̣p trình web như:html,

12
Nhóm 6 Công Nghệ Java

Php, javacript,asp.net…. Và ở đây, tôi chọn các ngôn ngữ để dùng cho ứng dụng web
chat: html,javascript, css cùng với để xây dựng nên hê ̣ thống cùng với nodejs & socket.io.

4.Phân Tích Code

1.Server.js
1. var express = require("express");
2. var app = express();
3. app.use(express.static("public"));
4. app.set("view engine", "ejs");
5. app.set("views", "./views");
6. var server =  require("http").Server(app);
7. var io = require("socket.io")(server);
8. server.listen(process.env.PORT || 3000);
9.
10. var mangUser=[];
11.
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à 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 đang 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);
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), 1
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 đang gõ chữ
52.   socket.on("toi-dang-go-chu", function(){
53.     var s = socket.Username + " đang nhắn tin";
54.     io.sockets.emit("ai-do-dang-go-chu", s);
55.   });
56.   //User ngừng gõ chũ

13
Nhóm 6 Công Nghệ Java

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("<div class='room'>" + r + "</div>");
  });
});
//Room hiện tại
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(("<div class='user'>" + i + "</div>"));
  });
});

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("<div class='ms'>" + data.un + "<br/>" + "<span id='td1'>" + data.nd + "</span>" +"</div>");
  });

  socket.on("ai-do-dang-go-chu", function(data){
    $("#thongbao").html("<img width='30px' height='25px' src='tenor.gif'>" + 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);
  });

14
Nhóm 6 Công Nghệ Java

  $("#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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Chat Node.js vs Socket.io</title>
    <script src="jquery.js"></script>
    <script src="https://chatnodejssocketio.herokuapp.com/socket.io/socket.io.js"></script>
    <script src="xuly.js"></script>
    <link href="layout.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id="wrapper">
      <div id="loginForm">
        <h3>What Your Name?</h3>
        <form id="login">
          <input type="text" id="txtUserName" />
          <button id="btnRegister" type="reset" onclick="javascript:alert('Welcome to Chat Nodejs & SocketIO')">Đăng nhâ
̣p</button>
        </form>
      </div>
      <script>
        var input = document.getElementById("txtUserName");
        input.addEventListener("keyup", function(event) {
          if (event.keyCode === 13) {
           event.preventDefault();
           document.getElementById("btnRegister").click();
          }
        });
        </script>
      <div id="chatForm">
        <p><h1 style="border:solid 1px lawngreen; text-align: center;">Chat Node.js + Socket.io</h1>
        <form id="goroom">
          <input id="txtRoom" type="text" />
          <button id="btnTaoRoom" type="reset">Vào room</button>
        </form>
        </p>
        <div id="left">
          <div id="titleRoom" >Room</div>
          <div id="contentRoom"></div>
          <br/>
          <div id="titleUser">User Online</div>
          <div id="contentUser">
          </div>
        </div>
        <div id="right">
          <div id="sayHi">
            Xin chào, bạn <span id="currentUser"></span>
            <input type="button" id="btnLogout" value="Đăng xuất" />
          </div>
          <div id="HienTai">
            <table>
              <tr>
                <td><h3>Room:</h3></td>
                <td><h4 id="roomHienTai">...</h4></td>
              </tr>
            </table>
          </div>

          <div id="listMessages">
          </div>

15
Nhóm 6 Công Nghệ Java

          <div id="thongbao"></div><br></br>
          <form id="chat">
            <input type="text" id="txtMessage" placeholder="Nhắn tin..."/>
            <button id="btnSendMessage" type="reset" >Send</button>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

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: rg
b(126, 107, 107);}
#contentRoom{border:solid 1px black;padding: 5px;border-top: none;height: 179px;text-align: cente
r;overflow: auto;background-color: rgb(126, 107, 107);}
#titleUser{border:solid 1px black; padding: 5px;text-align: center;font-weight: bold; background-color: rg
b(126, 107, 107);}
#contentUser{border:solid 1px black;padding: 5px;border-top: none;height: 178px;text-align: cente
r;overflow: auto;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; o
verflow: 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;}

16
Nhóm 6 Công Nghệ Java

---Kết Thúc, Cảm ơn thầy đã xem bài báo cáo của nhóm em!!!---

17