# 1. SocketIO trong NodeJS ## 1.1. Giới thiệu `Socket.IO` là một thư viện JavaScript cho phép giao tiếp hai chiều giữa client và server thông qua WebSockets. Nó cung cấp một API dễ sử dụng cho việc gửi và nhận dữ liệu giữa các client và server trong thời gian thực. `Socket.IO` hỗ trợ một số trình duyệt khác nhau và cung cấp một số cách để giao tiếp giữa client và server. Nó cung cấp một số cách để gửi và nhận dữ liệu giữa client và server, bao gồm: - Gửi dữ liệu từ client đến server. - Gửi dữ liệu từ server đến client. - Gửi dữ liệu giữa các client. Bên phía `server`, `Socket.IO` cung cấp một số sự kiện để lắng nghe và xử lý các yêu cầu từ client sử dụng package `socket.io`. Bên phía `client`, `Socket.IO` cung cấp một số sự kiện để gửi và nhận dữ liệu giữa client và server sử dụng package `socket.io-client`. ## 1.2. Cài đặt Đối với NodeJS, bạn có thể cài đặt `Socket.IO` bằng cách sử dụng npm: ```bash $ npm install socket.io socket.io-client ``` > Nếu không dùng kiến trúc `MVC` thì không cần cài `socket.io-client`, do chỉ cần sử dụng `socket.io` để tạo server. ## 1.3. Sử dụng Các phương thức cơ bản của `Socket.IO` bao gồm: - `socket.emit('event', data)` : gửi dữ liệu từ client lên server và ngược lại - `socket.on('event', function(data){})` : nhận dữ liệu từ server gửi xuống client và ngược lại - `"event"` : tên của sự kiện, không được trùng với các sự kiện có sẵn của socket-io (disconnect, connect, reconnect, ...) - `socket.broadcast.emit()` : gửi dữ liệu từ server xuống tất cả các client, ngoại trừ client gửi dữ liệu lên server - `io.sockets.emit()` : gửi dữ liệu từ server xuống tất cả các client, bao gồm client gửi dữ liệu lên server - `socket.broadcast.to('room').emit()` : gửi dữ liệu từ server xuống tất cả các client trong room có tên `room`, ngoại trừ client gửi dữ liệu lên server - `io.sockets.in('room').emit()` : gửi dữ liệu từ server xuống tất cả các client trong room, bao gồm client gửi dữ liệu lên server - `socket.join('room')` : tham gia vào room có tên `room` - `socket.leave('room')` : rời khỏi room có tên `room` - `io.sockets.manager.rooms` : trả về danh sách các room mà client đang tham gia - `socket.get('key')` : lấy giá trị của key đã thiết lập - `socket.set('key', value)` : thiết lập giá trị cho key - `socket.on('disconnect', function(){})` : xử lý khi client ngắt kết nối - `socket.on('disconnecting', function(){})` : xử lý khi client đang ngắt kết nối - `socket.on('connect_failed', function(){})` : xử lý khi client không thể kết nối - `socket.on('error', function(){})` : xử lý khi có lỗi xảy ra - `socket.on('reconnect_failed', function(){})` : xử lý khi client không thể kết nối lại - `socket.on('reconnect', function(){})` : xử lý khi client kết nối lại thành công - `socket.on('reconnecting', function(){})` : xử lý khi client đang kết nối lại - `socket.on('connect', function(){})` : xử lý khi client kết nối thành công - `socket.on('connecting', function(){})` : xử lý khi client đang kết nối - `socket.on('message', function(){})` : xử lý khi client nhận được tin nhắn, với event là `message` ### 1.3.1. Tạo biến toàn cục để sử dụng ở nhiều file Chúng ta sẽ tạo ra 1 biến `toàn cục` để có thể sử dụng ở nhiều file khác nhau bao gồm: - `init(httpServer)` : khởi tạo server, httpServer là một biến của `http.createServer() hoặc app.listen()`, và trả về một biến `io` là một instance của `socket.io` - `getIO()` : trả về biến `io` đã khởi tạo để sử dụng ở các file khác > utils/socket.js ```js let ioServer; // Tạo biến io để lưu socket ở máy chủ const Socket = { init: (httpServer) => { // Khởi tạo socket.io ở máy chủ // httpServer là server được tạo ở file server.js (VD như app.listen(3000)) const { Server } = require("socket.io"); // Nhập module socket.io ioServer = new Server(httpServer); // Khởi tạo socket.io và lưu vào biến io, sẽ được khởi tạo ở file server.js return ioServer; // Trả về biến io }, getIO: () => { // Lấy biến io của Server để sử dụng ở các file khác if (!ioServer) { // Nếu chưa khởi tạo socket.io thì throw error throw new Error("Socket.io not initialized!"); } return ioServer; // Nếu đã khởi tạo thì trả về biến io }, }; module.exports = Socket; // Xuất module Socket để sử dụng ở các file khác ``` ### 1.3.2. Sử dụng biến toàn cục ở file server.js để tạo server Chúng ta sẽ sử dụng biến `init` đã khởi tạo ở file `utils/socket.js` để tạo server và lắng nghe các sự kiện từ client > server.js ```js const express = require("express"); const app = express(); // Khởi tạo server const server = app.listen(3000); // Tạo server ở cổng 3000 và lưu vào biến server // Khởi tạo socket.io const io = require("./utils/socket").init(server); // Khởi tạo socket.io ở server và lưu vào biến io io.on("connection", (socket) => { // Khi có client kết nối console.log("Client connected"); // Khi client gửi dữ liệu lên server với event là "message" socket.on("message", (data) => { console.log(data); // In ra dữ liệu client gửi lên }); // Khi client ngắt kết nối socket.on("disconnect", () => { console.log("Client disconnected"); }); }); ``` Sau khi khởi tạo server và socket.io ở file `server.js`, chúng ta có thể thử gửi dữ liệu từ client lên server thông qua package `socket.io-client`: > client.js ```js const { io } = require("socket.io-client") const socket = new io("http://localhost:3000"); // Khởi tạo socket.io ở clien, nếu io() thì mặc định là cùng domain với server socket.on("message", (data) => { console.log("Client connected!"); console.log(data); }) socket.emit("message", "Hello from client!") // Gửi 1 message lên server ``` ### 1.3.3. Sử dụng biến toàn cục ở các file khác Ví dụ, khi `client` gửi `data` lên server qua `POST METHOD`, server sẽ gửi `data` đó xuống để xử lý hoặc gửi `data` đó xuống tất cả các `client` khác. Ví dụ, sử dụng kiến trúc `MVC`, client gửi `data` lên server qua `POST METHOD` 1. Tạo các file `script` để xử lý `POST METHOD` gửi `data` lên server > public/js/sendMessage.js ```js const send = document.getElementById("send"); // Lấy thẻ button send const parent = send.parentNode.parentNode; // Lấy thẻ cha của thẻ button send const input = parent.querySelector("input[name='message']"); // Lấy thẻ input chứa message let message = ""; // Khởi tạo biến chứa message input.oninput = () => { // Khi nhập message message = input.value; // Gán message }; document.addEventListener("keyup", (event) => { // Khi nhấn phím if (event.keyCode === 13 && message !== "") { // Nếu nhấn phím Enter và message không rỗng send.click(); // Gọi sự kiện click cho button send } }); send.addEventListener("click", () => { // Khi click button send const id = document.querySelector("input[name='roomId']").value; // Lấy roomId từ input ẩn const receiver = document.querySelector("input[name='receiver']").value; // Lấy receiver từ input ẩn const csrf = document.querySelector("input[name='_csrf']").value; // Lấy CSRF Token const token = document.querySelector("input[name='jwttoken']").value; // Lấy JWT Token // Gửi message lên server if (input.value !== "") { // Nếu message không rỗng thì mới gửi fetch("/chat", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, Authorization: "Bearer " + token, }, body: JSON.stringify({ message: message, receiver: receiver, }), }) .then((res) => res.json()) .catch((err) => console.log(err)); input.value = ""; // Xoá input } }); ``` 2. Tạo file `script` để lấy `data` từ server > public/js/socketMessageChat.js ```js let chat = []; // Khởi tạo mảng chứa các message let data; // Khởi tạo biến chứa dữ liệu từ server const roomId = document.querySelector("input[name='roomId']").value; // Lấy roomId từ input ẩn const token = document.querySelector("input[name='jwttoken']").value; // Lấy token từ input ẩn const messageTag = document.getElementById("messages"); // Lấy thẻ ul chứa các message fetch("/chat" + "/" + roomId, { // Gửi request lên server để lấy dữ liệu method: "GET", // Phương thức GET headers: { // Các header cần thiết "Content-Type": "application/json", // Content-Type là application/json Authorization: "Bearer " + token, // Authorization là Bearer + token }, }) .then((js) => js.json()) // Chuyển dữ liệu nhận được từ json sang javascript .then((res) => { data = res; // Gán dữ liệu nhận được vào biến data chat = [...data.room.messages]; // Gán các message vào mảng chat }); import { io } from "/js/socket.io-client.min.js"; // Import thư viện socket.io-client (đã được tải về từ server vì đây là file view nên chir có thể impport được thư viện đã được public) const socket = new io(); // Tạo 1 socket mới socket.on("connect", (socket) => { // Khi socket kết nối thành công console.log("Connected to server!"); }); // socket.emit("message", "Hello from client!") // Gửi 1 message lên server socket.on("message", (m) => { // Khi nhận được message từ server if (roomId === m.countUnReadOnRoom._id) { // Nếu roomId của message nhận được trùng với roomId của trang chat hiện tại thì mới render message lên màn hình const lastli = messageTag.lastElementChild; // render message lên màn hình sau khi get messageTag const li = document.createElement("li"); // Tạo một thẻ li mới if (data.userId.toString() === m.chats.sender._id.toString()) { // Nếu người gửi là người đang đăng nhập li.classList.add("d-flex", "justify-content-end", "my-2"); // Thêm class vào thẻ li vừa tạo để hiển thị message bên phải } else { // Nếu người gửi không phải là người đang đăng nhập li.classList.add("my-2"); // Thêm class vào thẻ li vừa tạo để hiển thị message bên trái } const div = document.createElement("div"); // Tạo một thẻ div mới div.classList.add("card", "border", "border-muted", "bg-light-subtle"); // Thêm class vào thẻ div vừa tạo div.style.width = "65%"; // Đặt chiều rộng của thẻ div vừa tạo if (data.userId.toString() === m.chats.sender._id.toString()) { // Nếu người gửi là người đang đăng nhập div.style.borderTopLeftRadius = "20px"; // Đặt border radius cho thẻ div vừa tạo div.style.borderTopRightRadius = "0px"; // Đặt border radius cho thẻ div vừa tạo div.style.borderBottomRightRadius = "20px"; // Đặt border radius cho thẻ div vừa tạo div.style.borderBottomLeftRadius = "20px"; // Đặt border radius cho thẻ div vừa tạo } else { // Nếu người gửi không phải là người đang đăng nhập div.style.borderTopLeftRadius = "0px"; div.style.borderTopRightRadius = "20px"; div.style.borderBottomRightRadius = "20px"; div.style.borderBottomLeftRadius = "20px"; } const div1 = document.createElement("div"); // Tạo một thẻ div mới để chứa nội dung message div1.classList.add("card-body", "text-center", "p-2"); // Thêm class vào thẻ div vừa tạo const img = document.createElement("img"); // Tạo một thẻ img mới để chứa ảnh if (m.url) { // Nếu message có chứa ảnh img.classList.add("img-fluid", "mb-2"); img.src = "/" + m.chats.url; // Đặt src cho thẻ img vừa tạo img.style.maxHeight = "30rem"; // Đặt chiều cao tối đa cho thẻ img vừa tạo img.style.height = "auto"; // Đặt chiều cao cho thẻ img vừa tạo img.style.minHeight = "10rem"; // Đặt chiều cao tối thiểu cho thẻ img vừa tạo } const p = document.createElement("p"); // Tạo một thẻ p mới để chứa nội dung message p.classList.add("text-start", "card-text"); // Thêm class vào thẻ p vừa tạo p.style.fontSize = "1rem"; // Đặt font size cho thẻ p vừa tạo p.innerHTML = m.chats.message; // Đặt nội dung cho thẻ p vừa tạo const h6 = document.createElement("h6"); // Tạo một thẻ h6 mới để chứa người gửi và thời gian gửi message h6.classList.add("text-muted", "card-subtitle", "text-end"); // Thêm class vào thẻ h6 vừa tạo h6.style.fontSize = ".75rem"; // Đặt font size cho thẻ h6 vừa tạo h6.innerHTML = m.sender + " " + m.time; // Đặt nội dung cho thẻ h6 vừa tạo if (m.url) { // Nếu message có chứa ảnh div1.appendChild(img); // Thêm thẻ img vào thẻ div1 } div1.appendChild(p); // Thêm thẻ p vào thẻ div1 div1.appendChild(h6); // Thêm thẻ h6 vào thẻ div1 div.appendChild(div1); // Thêm thẻ div1 vào thẻ div li.appendChild(div); // Thêm thẻ div vào thẻ li lastli.insertAdjacentElement("afterend", li); // Thêm thẻ li vào sau thẻ li cuối cùng // Kéo xuống cuối cùng khi có message mới const scrollBar = document.getElementById("scroll-bar"); // Lấy thẻ scroll-bar scrollBar.scrollTop = scrollBar.scrollHeight; // Đặt scroll-bar xuống cuối cùng } // Thông báo chỉ trên thiết bị nhận message, không phải thiết bị gửi message if ( data.userId !== m.chats.sender._id && data.userId === m.chats.receiver._id ) { notify(); // Thông báo // if (Notification.permission === "granted") { // Nếu đã được cấp quyền thông báo // notify(); // Thông báo // } // else if (Notification.permission !== "denied") { // Nếu chưa được cấp quyền thông báo // Notification.requestPermission().then(permission => { // Yêu cầu cấp quyền thông báo // if (permission === "granted") { // Nếu được cấp quyền thông báo // notify(); // Thông báo // } // }) // } // Xin quyền thông báo trên thiết bị nhận message (mobile hoặc máy tính) } }); const notify = () => { const soundPath = "/sound/notification.mp3"; const audio = new Audio(soundPath); audio.play(); }; ``` 3. Tạo file `views` để hiển thị UI từ client > views/chat.ejs ```html <%- include("../includes/head.ejs")%> <%- include("../includes/nav.ejs")%>

Welcome to SHOP CHAT

<%=room.participants[0]._id.toString() === userId.toString() ? room.participants[1].username : room.participants[0].username%>

" style="font-size: .7rem;"><%=room.messages[room.messages.length - 1].createdAt.toLocaleString('en-US', {timeZone: 'Asia/Ho_Chi_Minh'})%>

"><%=room.messages[room.messages.length - 1].message%>
No room

<% if (rooms.length > 0) { %>

<%=room.participants[0]._id.toString() === userId.toString() ? room.participants[1].username : room.participants[0].username%>

<% if (m.url) { %> <% } %>
<%= m.message %>

<%= m.sender.toString() === room.participants[0]._id.toString() ? room.participants[0].username : room.participants[1].username %> <%= m.createdAt.toLocaleString('en-US', {timeZone: 'Asia/Ho_Chi_Minh'}) %>
<% if (m.url) { %> <% } %>
<%= m.message %>

<%= m.sender.toString() === room.participants[0]._id.toString() ? room.participants[0].username : room.participants[1].username %> <%= m.createdAt.toLocaleString('en-US', {timeZone: 'Asia/Ho_Chi_Minh'}) %>

<% } else { %>

NO MESSAGES

<% } %>

``` 4. Tạo file `controller` để xử lý `data` từ client > controllers/chat.js ```js const Room = require("../models/room"); const User = require("../models/user"); const Message = require("../models/message"); // {POST CHAT} // const postChat = async (req, res, next) => { try { const productId = req.body.id || undefined; // Nếu không có id thì mặc định là undefined const message = req.body.message || "Sản phẩm này còn hàng không?"; // Nếu không có message thì mặc định là "Sản phẩm này còn hàng không?" const url = req.body.url || undefined; // Nếu không có url thì mặc định là "" const sender = req.user._id; // Lấy id của user hiện tại const receiver = req.body.receiver || req.params.receiverID; // Nếu không có receiver thì lấy receiver từ params const chat = new Chat({ message, url: url ? url : undefined, sender, receiver, }); let countUnReadOnRoom; // Khởi tạo biến countUnReadOnRoom const chats = await chat.save(); // Lưu chat vào collection chats const room = await Room.findOne({ participants: { $all: [sender, receiver] }, }); // Tìm kiếm room có 2 participants là sender và receiver if (!room) { // Nếu không tìm thấy room thì tạo mới room const newRoom = new Room({ participants: [sender, receiver], // Lưu id của sender và receiver vào participants messages: [chats._id], // Lưu id của chat vào messages marked: false, // Mặc định là false (chưa đọc tin nhắn) countUnRead: 1, // Mặc định là 1 vì vừa tạo mới room nên chưa đọc }); countUnReadOnRoom = await newRoom.save(); // Lưu room vào collection rooms } else { // Nếu tìm thấy room thì cập nhật lại room countUnReadOnRoom = await Room.findByIdAndUpdate(room._id, { // Cập nhật lại room $inc: { countUnRead: 1 }, // Tăng countUnRead lên 1 $push: { messages: chats._id }, // Thêm id của chat vào messages marked: false, // Đánh dấu là chưa đọc tin nhắn }); } const senderSOC = (await chat.populate("sender", "username")).sender .username; // Lấy username của sender const receiverSOC = (await chat.populate("receiver", "username")).receiver .username; // Lấy username của receiver const io = require("../util/socket").getIO(); // Lấy biến io từ file socket.js io.emit("message", { // Gửi message lên client userId: req.user._id, // Id của user hiện tại sender: senderSOC, // Username của sender receiver: receiverSOC, // Username của receiver chats, // Thông tin của message time: chats.createdAt.toLocaleString("en-US", { timeZone: "Asia/Ho_Chi_Minh", }), // Thời gian tạo message countUnReadOnRoom, // Thông tin của room countUnRead: countUnReadOnRoom?.countUnRead || 1, // Nếu countUnReadOnRoom không tồn tại thì mặc định là 1 }); if (productId) { // Nếu có productId thì chuyển hướng đến trang chat với id của room, ngược lại thì có nghĩa là đang ở sẵn trong room rồi => dùng socket để gửi message lên client res.redirect(`/chat/${countUnReadOnRoom._id}`); // Chuyển hướng đến trang chat với id của room } } catch (error) { const err = new Error(error); err.httpStatusCode = 500; next(err); } }; ```

Welcome to SHOP CHAT

<%=room.participants[0]._id.toString() === userId.toString() ? room.participants[1].username : room.participants[0].username%>

" style="font-size: .7rem;"><%=room.messages[room.messages.length - 1].createdAt.toLocaleString('en-US', {timeZone: 'Asia/Ho_Chi_Minh'})%>

"><%=room.messages[room.messages.length - 1].message%>

No room

<%=room.participants[0]._id.toString() === userId.toString() ? room.participants[1].username : room.participants[0].username%>

<%= m.sender.toString() === room.participants[0]._id.toString() ? room.participants[0].username : room.participants[1].username %> <%= m.createdAt.toLocaleString('en-US', {timeZone: 'Asia/Ho_Chi_Minh'}) %>

<%= m.sender.toString() === room.participants[0]._id.toString() ? room.participants[0].username : room.participants[1].username %> <%= m.createdAt.toLocaleString('en-US', {timeZone: 'Asia/Ho_Chi_Minh'}) %>

NO MESSAGES

NodeJS: Sử dụng SocketIO để gửi dữ liệu thời gian thực