Hướng Dẫn Cài Đặt và Quản Lý WebSocket API Server

Nginx Giza Data Tháng bảy 12, 2024

WebSocket API Server

Giới Thiệu

Nếu bạn đang tìm kiếm một cách hiệu quả để cài đặt và quản lý WebSocket API server trên VPS của mình, socket-api-gizadata.sh là một giải pháp hoàn hảo. Trong bài viết này, chúng tôi sẽ giới thiệu hai phần quan trọng của script: phần cài đặt và phần menu quản lý. Bạn sẽ hiểu rõ hơn về cách script này giúp bạn thiết lập môi trường server WebSocket và cung cấp các công cụ để quản lý server của bạn một cách dễ dàng và hiệu quả.

Phần 1: Cài Đặt WebSocket API Server

Bài hướng dẫn hôm nay mình làm ở Ubuntu 20.

1.1 Cập Nhật Hệ Thống và Cài Đặt Các Gói Cần Thiết

Phần đầu tiên của script là cập nhật hệ thốngcài đặt các gói cần thiết như Node.js, npm, Nginx, Certbot và Python3-Certbot-Nginx. Những gói này là nền tảng để bạn có thể thiết lập một server WebSocket API hoạt động ổn định và bảo mật.

ShellScript
sudo apt update
sudo apt install -y nodejs npm nginx certbot python3-certbot-nginx

1.2 Cài Đặt pm2

pm2 là một công cụ quản lý quy trình cho các ứng dụng Node.js. Trong phần này, pm2 được cài đặt để giúp bạn quản lý WebSocket server, bao gồm khởi động, dừng, và giám sát trạng thái của server.

ShellScript
sudo npm install -g pm2

1.3 Tạo Thư Mục và Chuyển Tệp Tĩnh

Script sẽ tạo các thư mục cần thiết để lưu trữ tệp tĩnh như hình ảnh và các tệp bao gồm /img/inc. Các thư mục này sẽ chứa các tài nguyên mà WebSocket server cần để hoạt động.

ShellScript
sudo mkdir -p /var/www/${TENSOCKET}/img
sudo mkdir -p /var/www/${TENSOCKET}/inc
sudo chown -R www-data:www-data /var/www/${TENSOCKET}/

1.4 Khởi Tạo Dự Án Node.js và Cài Đặt Các Gói Cần Thiết

Phần này bao gồm việc khởi tạo dự án Node.js và cài đặt các gói cần thiết như wsexpress để tạo WebSocket server và cấu hình các tính năng cơ bản của API.

ShellScript
npm init -y
npm install ws express

1.5 Tạo File server.js và Cấu Hình SSL

File server.js chứa mã nguồn chính cho WebSocket server và được cấu hình để sử dụng SSL với Certbot. Phần này cũng bao gồm cấu hình Nginx để chuyển tiếp lưu lượng từ HTTP đến HTTPS và thiết lập các thư mục tĩnh.

ShellScript
const server = https.createServer({
    cert: fs.readFileSync('/etc/letsencrypt/live/${TENMIEN}/fullchain.pem'),
    key: fs.readFileSync('/etc/letsencrypt/live/${TENMIEN}/privkey.pem')
}, app);

1.6 Khởi Động WebSocket Server và Thiết Lập pm2

Cuối cùng, phần này khởi động WebSocket server bằng pm2 và cấu hình pm2 để tự động khởi động lại server khi VPS khởi động.

ShellScript
pm2 start ~/${TENSOCKET}/server.js --name "${TENSOCKET}"
pm2 startup systemd
pm2 save
sudo systemctl enable pm2-root

Phần 2: Menu Quản Lý WebSocket API Server

2.1 Tạo Menu Quản Lý

Phần này của script tạo một menu tương tác để bạn có thể dễ dàng quản lý WebSocket server của mình. Menu bao gồm các tùy chọn như khởi động, dừng, xóa, và khởi động lại WebSocket server, cũng như kiểm tra trạng thái của server và các công việc bảo trì khác.

ShellScript
# Hàm hiển thị menu
show_menu() {
    clear
    echo "==============================="
    echo "   Quản lý Hệ Thống WebSocket  "
    echo "==============================="
    echo "1. Khởi động WebSocket Server"
    echo "2. Dừng WebSocket Server"
    echo "3. Xóa WebSocket Server"
    echo "4. Khởi động lại WebSocket Server"
    echo "5. Xem Trạng Thái WebSocket Server"
    echo "6. Xem Log WebSocket Server"
    echo "7. Cập nhật Dữ Liệu API"
    echo "8. Khôi phục WebSocket Server"
    echo "9. Kiểm tra SSL"
    echo "10. Kiểm tra Nginx và khởi động lại"
    echo "11. Cập nhật WebSocket Server"
    echo "12. Sao lưu WebSocket Server"
    echo "13. Khôi phục WebSocket Server từ bản sao lưu"
    echo "14. Cập nhật pm2 và các gói Node.js"
    echo "15. Thoát"
    echo "==============================="
    echo -n "Chọn một số (1-9): "
}

2.2 Các Chức Năng Trong Menu

Menu quản lý bao gồm nhiều chức năng quan trọng để duy trì và cập nhật WebSocket server. Bạn có thể sử dụng các tùy chọn trong menu để thực hiện các tác vụ như cập nhật API, sao lưu dữ liệu, và khôi phục từ bản sao lưu.

ShellScript
start_server() {
    echo "Khởi động WebSocket Server với pm2..."
    pm2 start ~/$TENSOCKET/server.js --name $TENSOCKET
    pm2 save
    echo "WebSocket Server đã được khởi động."
}

# Các hàm khác...

2.3 Cập Nhật .bashrc Để Thêm Alias

Cuối cùng, script cập nhật file .bashrc để thêm alias cho menu, giúp bạn dễ dàng truy cập vào menu quản lý từ terminal.

ShellScript
if ! grep -q "alias menu='/usr/local/bin/menu'" ~/.bashrc; then
    echo "alias menu='/usr/local/bin/menu'" >> ~/.bashrc
fi
source ~/.bashrc

Tóm Tắt

Script socket-api-gizadata.sh không chỉ giúp bạn cài đặt WebSocket API server một cách nhanh chóng và dễ dàng, mà còn cung cấp một menu quản lý mạnh mẽ để bảo trì và cập nhật server của bạn. Với các bước cài đặt từ cơ bản đến nâng cao và các tùy chọn quản lý hữu ích, bạn có thể dễ dàng duy trì một môi trường WebSocket API ổn định và bảo mật.

File này mình chạy thử nghiệm trên ubuntu 20.

Code file socket-api-gizadata.sh

File này mình phát triển theo nhu cầu sử dụng, bạn nào cần có thể tham khảo nhé.

ShellScript
#!/bin/bash

# Phần chào mừng
echo "==============================="
echo "      Cài đặt Socket API       "
echo "      Script bởi Gizadata.vn    "
echo "==============================="

echo "* Lưu ý trước khi bắt đầu, bạn phải DNS tên miền cần cài làm socket API về IP của VPS thành công đã nhé, tên miền sẽ được cài đặt SSL."
echo "---------"

read -p "Nhập tên miền của bạn (ví dụ: api.abc.com): " TENMIEN
read -p "Nhập gmail của bạn: " GMAIL
read -p "Nhập tên socket (có thể có dấu -, ví dụ: abc-def): " TENSOCKET

# Cập nhật và cài đặt các gói cần thiết
echo "-------------------------"
echo "Cập nhật hệ thống và cài đặt các gói cần thiết..."
echo "-------------------------"
sudo apt update
sudo apt install -y nodejs npm nginx certbot python3-certbot-nginx

# Cài đặt pm2
echo "-------------------------"
echo "Cài đặt pm2..."
echo "-------------------------"
sudo npm install -g pm2

# Mở cổng 80 và 8443 trên tường lửa
echo "-------------------------"
echo "Mở cổng 80 và 8443 trên tường lửa..."
echo "-------------------------"
sudo ufw allow 80
sudo ufw allow 8443

# Tạo thư mục tệp tĩnh
echo "-------------------------"
echo "Tạo thư mục và chuyển tệp tĩnh..."
echo "-------------------------"
sudo mkdir -p /var/www/${TENSOCKET}/img
sudo mkdir -p /var/www/${TENSOCKET}/inc
sudo chown -R www-data:www-data /var/www/${TENSOCKET}/

# Tạo thư mục dự án
# echo "-------------------------"
# echo "Tạo thư mục dự án..."
# echo "-------------------------"
# mkdir -p ~/$TENSOCKET/{inc,img}
mkdir -p ~/$TENSOCKET
cd ~/${TENSOCKET}

# Khởi tạo dự án Node.js
echo "-------------------------"
echo "Khởi tạo dự án Node.js..."
echo "-------------------------"
npm init -y

# Cài đặt các gói cần thiết
echo "-------------------------"
echo "Cài đặt các gói ws và express..."
echo "-------------------------"
npm install ws express

# Tạo file server.js
echo "-------------------------"
echo "Tạo file server.js..."
echo "-------------------------"
cat << EOF > ~/${TENSOCKET}/server.js
const express = require('express');
const https = require('https');
const WebSocket = require('ws');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 8443;  // Cổng mới

// Static file serving
app.use('/img', express.static(path.join(__dirname, 'img')));
app.use('/inc', express.static(path.join(__dirname, 'inc')));

// SSL Certificates
const server = https.createServer({
    cert: fs.readFileSync('/etc/letsencrypt/live/${TENMIEN}/fullchain.pem'),
    key: fs.readFileSync('/etc/letsencrypt/live/${TENMIEN}/privkey.pem')
}, app);

const wss = new WebSocket.Server({ server });

wss.on('connection', ws => {
    ws.on('message', message => {
        console.log(\`Received message => \${message}\`);
    });

    // Sample API responses
    const apiData = {
        caidat: {
            sdt: "0123456789",
            zalo: "https://zalo.me/0123456789",
            facebook: "https://facebook.com/yourpage",
            telegram: "https://t.me/yourchannel"
        },
        quangcao: {
            tieude: "Ad Title",
            mota: "Ad Description",
            link: "https://youradlink.com",
            hinh: "https://yourimagelink.com/image.jpg"
        },
        sanpham: {
            sanpham1: {
                tieude: "Product Title 1",
                banner: "https://yourimagelink.com/banner1.jpg",
                mota: "Product Description 1"
            },
            sanpham2: {
                tieude: "Product Title 2",
                banner: "https://yourimagelink.com/banner2.jpg",
                mota: "Product Description 2"
            }
        }
    };

    ws.send(JSON.stringify(apiData));
});

server.listen(port, () => {
    console.log(\`WebSocket server is running on wss://${TENMIEN}:${port}\`);
});
EOF

# Cài đặt chứng chỉ SSL với Certbot
echo "-------------------------"
echo "Cài đặt chứng chỉ SSL với Certbot..."
echo "-------------------------"
sudo certbot --nginx -d ${TENMIEN} --non-interactive --agree-tos -m ${GMAIL}

# Cấu hình Nginx
echo "-------------------------"
echo "Cấu hình Nginx..."
echo "-------------------------"
sudo tee /etc/nginx/sites-available/${TENMIEN} > /dev/null << EOF
server {
    listen 80;
    server_name ${TENMIEN};

    location / {
        proxy_pass https://localhost:8443;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host \$host;
    }

    location /img/ {
        alias /var/www/${TENSOCKET}/img/;
        autoindex on;
        try_files \$uri \$uri/ =404;
    }

    location /inc/ {
        alias /var/www/${TENSOCKET}/inc/;
        autoindex on;
        try_files \$uri \$uri/ =404;
    }
}

server {
    listen 443 ssl;
    server_name ${TENMIEN};

    ssl_certificate /etc/letsencrypt/live/${TENMIEN}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/${TENMIEN}/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass https://localhost:8443;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host \$host;
    }

    location /img/ {
        alias /var/www/${TENSOCKET}/img/;
        autoindex on;
        try_files \$uri \$uri/ =404;
    }

    location /inc/ {
        alias /var/www/${TENSOCKET}/inc/;
        autoindex on;
        try_files \$uri \$uri/ =404;
    }
}
EOF

# Kích hoạt cấu hình Nginx
echo "-------------------------"
echo "Kích hoạt cấu hình Nginx..."
echo "-------------------------"
sudo ln -s /etc/nginx/sites-available/${TENMIEN} /etc/nginx/sites-enabled/

# Xoá hoặc comment dòng server_name xung đột trong default
echo "-------------------------"
echo "Xoá hoặc comment dòng server_name xung đột trong default..."
echo "-------------------------"
sudo sed -i "/server_name ${TENMIEN};/d" /etc/nginx/sites-available/default
sudo sed -i "s/server_name ${TENMIEN}; # managed by Certbot/# server_name ${TENMIEN}; # managed by Certbot/g" /etc/nginx/sites-available/default

# Khởi động lại cấu hình Nginx
echo "-------------------------"
echo "Khởi động lại cấu hình Nginx..."
echo "-------------------------"
sudo nginx -t
sudo systemctl restart nginx

# Khởi động WebSocket server bằng pm2
echo "-------------------------"
echo "Khởi động WebSocket server bằng pm2..."
echo "-------------------------"
pm2 start ~/${TENSOCKET}/server.js --name "${TENSOCKET}"

# Thiết lập pm2 để tự động khởi động lại server khi VPS khởi động
echo "-------------------------"
echo "Thiết lập pm2 để tự động khởi động lại server khi VPS khởi động..."
echo "-------------------------"
pm2 startup systemd
pm2 save
sudo systemctl enable pm2-root




echo "--------------"
echo "--------------"
echo "--------------"
echo " TẠO MENU SỬ DỤNG NHANH SOCKET SEVER API VỚI PM2"
echo "--------------"
echo "--------------"
echo "--------------"


# Tạo file menu trong thư mục /usr/local/bin
sudo tee /usr/local/bin/menu > /dev/null <<EOL
#!/bin/bash

# Hàm hiển thị menu
show_menu() {
    clear
    echo "==============================="
    echo "   Quản lý Hệ Thống WebSocket  "
    echo "==============================="
    echo "1. Khởi động WebSocket Server"
    echo "2. Dừng WebSocket Server"
    echo "3. Xóa WebSocket Server"
    echo "4. Khởi động lại WebSocket Server"
    echo "5. Xem Trạng Thái WebSocket Server"
    echo "6. Xem Log WebSocket Server"
    echo "7. Cập nhật Dữ Liệu API"
    echo "8. Khôi phục WebSocket Server"
    echo "9. Kiểm tra SSL"
    echo "10. Kiểm tra Nginx và khởi động lại"
    echo "11. Cập nhật WebSocket Server"
    echo "12. Sao lưu WebSocket Server"
    echo "13. Khôi phục WebSocket Server từ bản sao lưu"
    echo "14. Cập nhật pm2 và các gói Node.js"
    echo "15. Thoát"
    echo "==============================="
    echo -n "Chọn một số (1-9): "
}

# Hàm thực hiện chức năng khởi động WebSocket Server
start_server() {
    echo "Khởi động WebSocket Server với pm2..."
    pm2 start ~/$TENSOCKET/server.js --name $TENSOCKET
    pm2 save
    echo "WebSocket Server đã được khởi động."
}

# Hàm thực hiện chức năng dừng WebSocket Server
stop_server() {
    echo "Dừng WebSocket Server..."
    pm2 list
    echo -n "Nhập ID hoặc tên của ứng dụng cần dừng: "
    read -r app_id
    pm2 stop "\$app_id"
    pm2 save
    echo "Ứng dụng đã được dừng."
}

# Hàm thực hiện chức năng xóa WebSocket Server
delete_server() {
    echo "Xóa WebSocket Server..."
    pm2 list
    echo -n "Nhập ID hoặc tên của ứng dụng cần xóa: "
    read -r app_id
    pm2 delete "\$app_id"
    pm2 save
    echo "Ứng dụng đã được xóa."
}

# Hàm thực hiện chức năng khởi động lại WebSocket Server
restart_server() {
    echo "Khởi động lại WebSocket Server với pm2..."
    pm2 restart $TENSOCKET
    pm2 save
    echo "WebSocket Server đã được khởi động lại."
}

# Hàm thực hiện chức năng xem trạng thái WebSocket Server
status_server() {
    echo "Xem trạng thái WebSocket Server với pm2..."
    pm2 status
}

# Kiểm tra xem chứng chỉ SSL có được tạo ra và chứng nhận hợp lệ không
kiemtrassl() {
    echo "Kiểm tra xem chứng chỉ SSL có được tạo ra và chứng nhận hợp lệ không"
    sudo certbot certificates
}

# Hàm thực hiện chức năng xem log WebSocket Server
view_logs() {
    echo "Xem log WebSocket Server với pm2..."
    pm2 logs
}

# Kiểm tra Nginx và khởi động lại Nginx
kiemtranginx() {
    echo "Kiểm tra Nginx và khởi động lại Nginx"
    sudo nginx -t
    sudo systemctl restart nginx
}

# Hàm thực hiện chức năng cập nhật dữ liệu API
update_api() {
    echo "Cập nhật dữ liệu API từ file server.js..."
    # Thực hiện cập nhật
    # Ví dụ: nếu có các thay đổi trong `server.js`, hãy khởi động lại WebSocket Server
    pm2 restart $TENSOCKET
    echo "Dữ liệu API đã được cập nhật."
}

# Hàm thực hiện chức năng khôi phục WebSocket Server
recover_server() {
    echo "Khôi phục WebSocket Server..."
    pm2 resurrect
    echo "WebSocket Server đã được khôi phục."
}

# Hàm thực hiện chức năng cập nhật WebSocket Server
update_server() {
    echo "Cập nhật WebSocket Server từ nguồn GitHub..."
    cd ~/$TENSOCKET
    git pull origin main  # Hoặc lệnh cập nhật khác
    pm2 restart $TENSOCKET
    echo "WebSocket Server đã được cập nhật."
}

# Hàm thực hiện chức năng sao lưu WebSocket Server
backup_server() {
    echo "Sao lưu WebSocket Server và cấu hình..."
    TIMESTAMP=$(date +'%Y%m%d%H%M%S')
    BACKUP_DIR=~/backups
    mkdir -p $BACKUP_DIR
    tar -czvf $BACKUP_DIR/${TENSOCKET}_backup_$TIMESTAMP.tar.gz ~/$TENSOCKET
    echo "Sao lưu hoàn tất. File sao lưu tại: $BACKUP_DIR/${TENSOCKET}_backup_$TIMESTAMP.tar.gz"
}

# Hàm thực hiện chức năng khôi phục WebSocket Server từ bản sao lưu
restore_server() {
    echo "Khôi phục WebSocket Server từ bản sao lưu..."
    echo -n "Nhập đường dẫn đến file sao lưu (ví dụ: ~/backups/server_backup_20230701.tar.gz): "
    read -r BACKUP_FILE
    tar -xzvf "$BACKUP_FILE" -C ~/
    pm2 restart $TENSOCKET
    echo "WebSocket Server đã được khôi phục từ bản sao lưu."
}

# Cập nhật pm2 và các gói Node.js
update_pm2() {
    echo "Cập nhật pm2..."
    sudo npm install -g pm2
    echo "pm2 đã được cập nhật."
}

# Hàm chính của menu
while true; do
    show_menu
    read -r choice
    case \$choice in
        1) start_server ;;
        2) stop_server ;;
        3) delete_server ;;
        4) restart_server ;;
        5) status_server ;;
        6) view_logs ;;
        7) update_api ;;
        8) recover_server ;;
        9) kiemtrassl ;;
        10) kiemtranginx ;;
        11) update_server ;;
        12) backup_server ;;
        13) restore_server ;;
        14) update_pm2 ;;
        15) echo "Thoát khỏi menu."; exit 0 ;;
        *) echo "Lựa chọn không hợp lệ. Vui lòng chọn lại." ;;
    esac
    echo "Nhấn Enter để tiếp tục..."
    read -r
done

EOL


echo "--------------"
echo "--------------"
echo "--------------"
echo "# Cấp quyền thực thi cho file menu"
echo "--------------"
echo "--------------"
echo "--------------"

# Cấp quyền thực thi cho file menu
sudo chmod +x /usr/local/bin/menu

echo "--------------"
echo "--------------"
echo "--------------"
echo "# Thêm alias vào file .bashrc"
echo "--------------"
echo "--------------"
echo "--------------"

# Thêm alias vào file .bashrc
if ! grep -q "alias menu='/usr/local/bin/menu'" ~/.bashrc; then
    echo "alias menu='/usr/local/bin/menu'" >> ~/.bashrc
fi

echo "--------------"
echo "--------------"
echo "--------------"
echo "# Làm mới cấu hình shell"
echo "--------------"
echo "--------------"
echo "--------------"

# Làm mới cấu hình shell
source ~/.bashrc

echo "--------------"
echo "--------------"
echo "--------------"
echo "Menu đã được tạo và cấu hình thành công!"

echo "-------------------------------------------"
echo "-------------------------------------------"
echo "-------------------------------------------"
echo "-------------------------------------------"
echo "-------------------------------------------"
echo "-------------------------------------------"
echo "Setup hoàn tất. Dưới đây là tóm tắt các mục đã cài đặt:"
echo "--------------"
echo "- Cập nhật hệ thống và cài đặt các gói cần thiết: nodejs, npm, nginx, certbot, python3-certbot-nginx"
echo "- Cài đặt pm2"
echo "- Mở cổng 80 và 8443 trên tường lửa"
echo "- Xoá hoặc comment dòng server_name xung đột trong default"
echo "- Tạo thư mục dự án và khởi tạo dự án Node.js"
echo "- Cài đặt các gói ws và express"
echo "- Tạo file server.js"
echo "- Cài đặt chứng chỉ SSL với Certbot"
echo "- Cấu hình Nginx"
echo "- Kích hoạt cấu hình Nginx"
echo "- Khởi động WebSocket server bằng pm2"
echo "- Thiết lập pm2 để tự động khởi động lại server khi VPS khởi động"
echo "- Tạo menu quản lý Socket API, kích hoạt với lệnh menu"
echo "--------------"
echo "WebSocket server đang chạy trên wss://${TENMIEN}:8443"
echo "--------------"
echo "Thư mục img và inc dùng để lưu các file nếu bạn muốn chạy file trực tiếp ở VPS này"
echo "Vị trí thư mục img là  /var/www/${TENSOCKET}/img"
echo "Vị trí thư mục inc là /var/www/${TENSOCKET}/inc"
echo "-------------------------------------------"

Demo Trang Lấy Dữ Liệu Từ WebSocket API

Để giúp bạn hình dung rõ hơn về cách sử dụng dữ liệu từ WebSocket API mà bạn đã thiết lập, dưới đây là một demo trang đơn giản mà bạn có thể triển khai để hiển thị thông tin từ API của mình.

Trang Demo Hiển Thị Dữ Liệu API

Trang demo này sử dụng JavaScript để kết nối với WebSocket API và hiển thị thông tin cơ bản từ API. Bạn có thể tạo một file index.html với nội dung sau để xem cách dữ liệu được truyền tải và hiển thị trên trang web của bạn.

ShellScript
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Lấy Dữ Liệu Từ API</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 80%; margin: 0 auto; padding: 20px; }
        h1 { color: #333; }
        .info { margin-top: 20px; }
        .info div { margin-bottom: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Thông Tin API WebSocket</h1>
        <div class="info">
            <div id="caidat"></div>
            <div id="quangcao"></div>
            <div id="sanpham"></div>
        </div>

        <script>
            const ws = new WebSocket('wss://api.domain.vn:8443');
            ws.onopen = () => {
                console.log('Đã kết nối tới WebSocket API');
            };

            ws.onmessage = (event) => {
                const data = JSON.parse(event.data);

                // Hiển thị thông tin cài đặt
                document.getElementById('caidat').innerHTML = `
                    <h2>Thông Tin Cài Đặt</h2>
                    <p>Số Điện Thoại: ${data.caidat.sdt}</p>
                    <p>Zalo: <a href="${data.caidat.zalo}">${data.caidat.zalo}</a></p>
                    <p>Facebook: <a href="${data.caidat.facebook}">${data.caidat.facebook}</a></p>
                    <p>Telegram: <a href="${data.caidat.telegram}">${data.caidat.telegram}</a></p>
                `;

                // Hiển thị thông tin quảng cáo
                document.getElementById('quangcao').innerHTML = `
                    <h2>Quảng Cáo Hiện Tại</h2>
                    <p>Tiêu Đề: ${data.quangcao.tieude}</p>
                    <p>Mô Tả: ${data.quangcao.mota}</p>
                    <p>Link: <a href="${data.quangcao.link}">${data.quangcao.link}</a></p>
                    <p>Hình: <img src="${data.quangcao.hinh}" alt="Quảng Cáo" style="max-width: 100%; height: auto;"></p>
                `;

                // Hiển thị sản phẩm
                let sanphamHTML = '<h2>Sản Phẩm</h2>';
                for (const key in data.sanpham) {
                    if (data.sanpham.hasOwnProperty(key)) {
                        sanphamHTML += `
                            <div>
                                <h3>${data.sanpham[key].tieude}</h3>
                                <img src="${data.sanpham[key].banner}" alt="${data.sanpham[key].tieude}" style="max-width: 100px; height: auto;">
                                <p>${data.sanpham[key].mota}</p>
                            </div>
                        `;
                    }
                }
                document.getElementById('sanpham').innerHTML = sanphamHTML;
            };
        </script>
    </div>
</body>
</html>

Giải Thích Cách Hoạt Động Của Trang Demo

Trang web này thiết lập một kết nối WebSocket đến API của bạn và nhận dữ liệu JSON. Dữ liệu này bao gồm thông tin về cài đặt, quảng cáo, và sản phẩm. Sau khi nhận được dữ liệu, JavaScript sẽ phân tích cú pháp JSON và cập nhật nội dung của trang để hiển thị thông tin:

  • Thông Tin Cài Đặt: Hiển thị số điện thoại, Zalo, Facebook và Telegram.
  • Quảng Cáo Hiện Tại: Hiển thị tiêu đề, mô tả, link và hình ảnh quảng cáo.
  • Sản Phẩm: Hiển thị danh sách sản phẩm với tiêu đề, hình ảnh và mô tả.

Bạn có thể tùy chỉnh giao diện và thông tin hiển thị theo nhu cầu của mình. Trang demo này là một cách tuyệt vời để kiểm tra xem API của bạn có hoạt động đúng không và xem dữ liệu được truyền tải như thế nào.

Tóm Tắt Các Tính Năng

  • Kết nối WebSocket: Tạo kết nối đến API và nhận dữ liệu theo thời gian thực.
  • Hiển thị dữ liệu: Cập nhật nội dung trang web để hiển thị thông tin từ API.
  • Tùy chỉnh giao diện: Có thể dễ dàng thay đổi giao diện và thông tin hiển thị trên trang demo.

Hy vọng bạn sẽ tìm thấy phần demo trang lấy dữ liệu từ API này hữu ích trong việc phát triển và kiểm tra WebSocket API của mình!

Giới Thiệu Về Giza Data

Giza Data – Nhà Cung Cấp Giải Pháp VPS, hosting, Email, Tên Miền và Thiết Kế Website Tin Cậy

Chào mừng bạn đến với Giza Data – đơn vị cung cấp các giải pháp VPS, Hosting, Email, Tên MiềnThiết Kế Website chất lượng tại Việt Nam. Chúng tôi tự hào mang đến cho bạn một loạt các dịch vụ công nghệ thông tin chất lượng cao, được thiết kế để đáp ứng nhu cầu của cả cá nhân và doanh nghiệp.

Dịch Vụ Của Chúng Tôi

  • VPS: Cung cấp VPS (Virtual Private Server) với hiệu suất mạnh mẽ, khả năng mở rộng linh hoạt và độ tin cậy cao. Hạ tầng VPS của chúng tôi được đặt tại Hồ Chí Minh, Việt Nam, đảm bảo tốc độ mạng nhanh và kết nối ổn định.
  • Hosting: Dịch vụ Hosting web đa dạng với các gói dịch vụ phù hợp cho mọi loại hình website, từ cá nhân đến doanh nghiệp lớn. Chúng tôi cam kết cung cấp băng thông rộng rãi và thời gian hoạt động tối ưu.
  • Email: Giải pháp Email chuyên nghiệp cho doanh nghiệp với các tính năng bảo mật, quản lý dễ dàng và hỗ trợ kỹ thuật tận tình. Chúng tôi cung cấp các gói email doanh nghiệp với nhiều tính năng hữu ích.
  • Tên Miền: Dịch vụ đăng ký và quản lý Tên Miền với giao diện thân thiện và quy trình đơn giản. Bạn có thể dễ dàng tìm và đăng ký tên miền phù hợp cho website của mình.
  • Thiết Kế Website: Dịch vụ Thiết Kế Website chuyên nghiệp với các giải pháp thiết kế, phát triển và bảo trì website. Chúng tôi giúp bạn xây dựng một website ấn tượng và hiệu quả để phát triển thương hiệu và kinh doanh.

Tại Sao Chọn Giza Data?

  • Hạ Tầng Mạnh Mẽ: Chúng tôi đầu tư vào hạ tầng công nghệ hiện đại, đảm bảo cung cấp dịch vụ ổn định và hiệu suất cao.
  • Tốc Độ Mạng Nhanh: Máy chủ của chúng tôi được đặt tại Hồ Chí Minh với kết nối mạng nhanh và ổn định, giúp bạn có trải nghiệm dịch vụ tốt nhất.
  • Hỗ Trợ Kỹ Thuật Chuyên Nghiệp: Đội ngũ hỗ trợ kỹ thuật của chúng tôi luôn sẵn sàng 24/7 để giúp bạn giải quyết mọi vấn đề và đáp ứng nhu cầu của bạn.
  • Giải Pháp Tối Ưu: Chúng tôi cung cấp các giải pháp linh hoạt và hiệu quả cho cá nhân và doanh nghiệp, giúp bạn đạt được mục tiêu của mình một cách dễ dàng và tiết kiệm chi phí.

Liên Hệ Với Chúng Tôi

Nếu bạn đang tìm kiếm một đối tác tin cậy cho các giải pháp công nghệ thông tin của mình, Giza Data chính là sự lựa chọn hoàn hảo. Hãy liên hệ với chúng tôi ngay hôm nay để biết thêm thông tin về các dịch vụ và giải pháp của chúng tôi.

Quảng Cáo
Zalo
Proxy
VPS
Tài khoản
Hosting
Tên miền
Facebook