Tạo ứng dụng chat realtime đơn giản bằng NodeJS

Bài đăng này đã không được cập nhật trong 5 năm

Xin chào các bạn, một trong những chủ đề khá được quan tâm đối với những newbie khi học về NodeJS cũng như những người muốn tìm hiểu công nghệ NodeJS đó là ứng dụng chat realtime. Hôm nay mình sẽ hướng dẫn các bạn tạo một ứng dụng chat realtime đơn giản bằng NodeJS.

Trước tiên mình cùng tìm hiểu Socket là gì nhé!

1. Socket là gì?

Theo wiki:

A network socket is an internal endpoint for sending or receiving data within a node on a computer network. Concretely, it is a representation of this endpoint in networking software (protocol stack), such as an entry in a table (listing communication protocol, destination, status, etc.), and is a form of system resource.

Các bạn có thể hiểu Socket đơn thuần là một giao diện lập trình ứng dụng mạng, thông qua giao diện này, chúng ta có thể lập trình điều khiển, truyền thông giữa 2 máy sử dụng giao thức TCPIP và UDP.

Ở đây mình ứng dụng trực tiếp vào việc gửi message giữa client và server để tạo thành ứng dụng chat realtime )

2. Cài đặt

Cài đặt các package cần thiết:

express để tạo server và khởi tạo app mới

npm install express

socket.io cho phép giao tiếp realtime giữa front-end và back-end

npm install socket.io

Hoàn chỉnh file package.json sẽ như sau:

{
    "name": "node_chat_realtime",
    "version": "1.0.0",
    "description": "Demo chat realtime NodeJS",
    "dependencies": {
        "socket.io": "^2.1.1",
        "express": "^4.16.3"
    },
    "author": "Tien Phat"
}

Bạn có thể copy hoặc chạy lệnh npm init để tạo file package.json nhé.

Sau khi có file package.json các bạn chạy lệnh npm install để install các package nhé.

Cuối cùng bạn tạo các file theo cấu trúc của mình nhé:

OK như vậy mình đã cài đặt xong những thứ cần thiết, giờ mình cùng đi vào chi tiết các file nhé.

3. File điều khiển chính

File điều khiển chính ở đây là app.js, file này sẽ là file chạy khi chạy node:

var path = require("path");
var express = require("express");
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);

//Chỉ ra đường dẫn chứa css, js, images...
app.use(express.static(path.join(__dirname, 'public')));

//Tạo router
app.get("/", function (req, res) {
    res.sendFile(path.join(__dirname + '/views/chat.html'));
});

//Tạo socket 
io.on('connection', function (socket) {
    console.log('Welcome to server chat');

    socket.on('send', function (data) {
        io.sockets.emit('send', data);
    });
});

//Khởi tạo 1 server listen tại 1 port
server.listen(3000);

Nội dung file này gồm có 4 phần chính tương ứng như mình đã notes.

Tại phần tạo socket mình sử dụng function connection của socket để bắt sự kiện khi có 1 client kết nối đến server và thực hiện log ra console và 1 sự kiện send là sự kiện khi client gửi message thì server sẽ nhận được và gửi data sang các kết nối khác đến server (đây chính là phần realtime cuả socket).

Chú ý: 2 package path và http là 2 package mặc định khi chạy npm install đã cài đặt sẵn nên các bạn không cần thêm vào package.json nữa

4. Tạo giao diện chat

File chat.html

<!DOCTYPE html>
<html>
<head>
    <title>Chat realtime NodeJS demo</title>

    <link rel="stylesheet" href="/css/styles.css">

    <script src="/js/socket.io.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/chat.js"></script>
</head>

<body>

<fieldset>
    <legend>Demo chat realtime NodeJS</legend>
    <input type="text" id="username" name="username" placeholder="Enter name">
    <br>
    <div id="content"></div>

    <input id="message" placeholder="Write something..">
    <br>
    <button id="sendMessage">SEND</button>
</fieldset>

</body>
</html>

File chat.js

$(function () {
    //Kết nối tới server socket đang lắng nghe
    var socket = io.connect('http://localhost:3003');

    //Socket nhận data và append vào giao diện
    socket.on("send", function (data) {
        console.log(data);
        $("#content").append("<p class='message'>" + data.username + ": " + data.message + "</p>")
    })

    //Bắt sự kiện click gửi message
    $("#sendMessage").on('click', function () {
        var username = $('#username').val();
        var message = $('#message').val();

        if (username == '' || message == '') {
            alert('Please enter name and message!!');
        } else {
            //Gửi dữ liệu cho socket
            socket.emit('send', {username: username, message: message});
            $('#message').val('');
        }
    })
})

File styles.css

#content {
    border: 1px solid darkgrey;
    width: 400px;
    height: 300px;
    padding: 10px;
    overflow-y: scroll;
}

#content p {
    margin: 5px;
}

#username, #content, #message, #sendMessage {
    margin-bottom: 5px;
}

Ngoài ra còn 2 thư viện sau:

Jquery 3.3.1 dùng để viết code javascript cho ngắn gọn hơn.
SocketIO 2.2.1 dùng để lập trình socket.

5. Chạy ứng dụng

Để chạy ứng dụng các bạn chạy node app.js và sẽ ra kết quả. Khi có một kết nối mới tới server đang lắng nghe, sẽ log: Server welcome client connected

Giao diện chat realtime: Giao diện chat realtime giữa 2 kết nối khác nhau

6. Tổng kết

Như vậy mình đã hướng dẫn xong cách tạo 1 app chat realtime bằng NodeJS với công cụ SocketIO. Bây giờ các bạn có thể tạo riêng cho mình một app chat nhé

Thanks for reading!