ĐỀ 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 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.

2


Nhóm 6

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 và
chỉnh sửa file word báo cáo

Làm việc nhóm đầy đủ hàng
tuần

Phạm Song Tồn

Lên ý tưởng, viết code và
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
các bước thực hiện chương
trình
Làm file word báo cáo, file
powerponit để hướng dẫn

các bước thực hiện 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

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 ngun: 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 hố cách thực hiện một chức
6

Nhóm 6

Cơng Nghệ Java

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.

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 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ể.

7


Nhóm 6

Cơng Nghệ Java

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:
+ 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 q 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 hố Socket.
Raw Socket khơng dành cho người dùng phổ thơng mà
8


Nhóm 6

Cơng Nghệ Java

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.
-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
9


Nhóm 6

Cơng Nghệ Java

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.
-Đ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.
10


Nhóm 6

Cơng Nghệ Java

-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

11


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 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à hồn tồ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.

12


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.

13


Nhóm 6

Cơng Nghệ Java

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,
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.
2.
3.
4.
5.

6.
7.
8.
9.
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à 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);

14


Nhóm 6

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

15


Nhóm 6

Cơng Nghệ Java

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);
});
$("#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=" /><script src="xuly.js"></script>
<link href="layout.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id="loginForm">

What Your Name?

<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">

Chat Node.js + Socket.io

<form id="goroom">
<input id="txtRoom" type="text" />
<button id="btnTaoRoom" type="reset">Vào room</button>
</form>

<div id="left">
<div id="titleRoom" >Room</div>
<div id="contentRoom"></div>

16


Nhóm 6

Cơng Nghệ Java



<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>

Room:

</td>
<td>

...

</td>
</tr>
</table>
</div>
<div id="listMessages">
</div>
<div id="thongbao"></div>


<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: 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 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!!!---

18