BEIT phát triển hệ thống bằng Opensource Socket.io

BEIT phát triển hệ thống bằng Opensource Socket.io

Trước đó, các trang web thường tải lại mỗi khi tài nguyên được yêu cầu. Điều này gây ra sự chậm trễ không cần thiết làm tăng thời gian chờ đợi trung bình. Người dùng thường phải chờ vài phút để tìm nạp một trang hoặc tệp cụ thể. Mặt khác, các ứng dụng thời gian thực (Trình nhắn tin tức thời, Trò chơi trực tuyến, thông báo đẩy, v.v.) là những ứng dụng chạy trong một khoảng thời gian nhất định sao cho người dùng được cung cấp bản sao tài nguyên ngay lập tức và cập nhật. Độ trễ trong các ứng dụng này được giữ ở mức thấp nhất có thể để mang lại trải nghiệm người dùng mượt mà và nhất quán. Socket.IO là một trong những thư viện JavaScript như vậy mà các lập trình viên sử dụng để phát triển “Ứng dụng web” thời gian thực.

BEIT tiên phong phát triển ứng dụng web  sử dụng nền tảng Socket.IO, là một phát triển mạnh mẽ trên nền tảng công nghệ node.js. BEIT luôn là động lức cho việc phát triển các website, ứng dụng khi sử dụng các nền tảng open source mới nhất

Tại sao Socket.IO :
Hầu hết các ứng dụng trên Internet ngày nay đều dựa trên kiến ​​trúc Client-Server. Khách hàng là người yêu cầu thứ gì đó từ Máy chủ. Máy chủ, dựa trên yêu cầu, phản hồi với kết quả phù hợp. Hai thực thể này hoàn toàn khác nhau do bản chất của các nhiệm vụ mà chúng thực hiện. Trình duyệt là một ví dụ hoàn hảo về ứng dụng khách. Máy khách trên trình duyệt thường giao tiếp với Máy chủ thông qua các yêu cầu và phản hồi HTTP. Vấn đề với giao tiếp này là yêu cầu hoặc phản hồi có thể được gửi cùng một lúc. Để dễ hiểu, hãy nghĩ về nó như một liên kết bán song công. Ngoài ra, các tiêu đề HTTP chứa rất nhiều thông tin dư thừa sẽ vô dụng khi kết nối giữa máy khách và máy chủ được thực hiện. Mặt khác, các ổ cắm hoạt động trên lớp vận chuyển của Ngăn xếp mạng.

Socket.IO hoạt động trên cùng một khái niệm và cho phép giao tiếp hai chiều giữa máy khách và máy chủ web. Để xử lý chúng một cách riêng biệt và hiệu quả, nó bao gồm hai phần;

  • một thư viện máy khách JavaScript chạy trên các trình duyệt.
  • một máy chủ Node.js

Socket.IO dựa trên Engine.IO, đây là triển khai của lớp giao tiếp hai chiều giữa nhiều trình duyệt/thiết bị chéo dựa trên phương tiện truyền tải. Nó mang đến các tính năng sau cho Socket.IO;

  • Độ tin cậy: Nó có thể thiết lập kết nối ngay cả khi có proxy, bộ cân bằng tải, tường lửa cá nhân và phần mềm chống vi-rút.
  • Hỗ trợ tự động kết nối lại: Trừ khi được đề cập rõ ràng trong mã, thư viện máy khách sẽ cố gắng kết nối lại mãi mãi cho đến khi máy chủ khả dụng trở lại.
  • Phát hiện ngắt kết nối: Nó cho phép cả máy chủ và máy khách biết khi nào máy kia không phản hồi nữa.
  • Hỗ trợ ghép kênh: Nó cho phép có một số kênh liên lạc trên cùng một kết nối cơ bản.
  • Hỗ trợ truyền phát nhị phân: Nó cũng cho phép phát ra bất kỳ dữ liệu nhị phân có thể tuần tự hóa nào như ArrayBuffer, Blobs, v.v.

Cài đặt:

Cần thiết để cài đặt Sockets.IO

  • Đã cài đặt nút
  • đã cài đặt npm (trình quản lý gói nút)

Như đã đề cập trước đó, có hai thư viện khác nhau để đưa vào một dự án.

  • Máy chủ:
    Để cài đặt nó trong dự án Node.js, hãy chạy lệnh sau,

    $ npm cài đặt --save socket.io
  • Máy khách JavaScript:
    Bản dựng độc lập của máy khách được hiển thị theo mặc định bởi máy chủ tại /socket.io/socket.io.js . Mặt khác, nó cũng có thể được phục vụ từ bất kỳ nhà cung cấp CDN nào.

    Để sử dụng nó từ Node.js, hãy cài đặt nó thông qua lệnh này,

    $ npm cài đặt --save socket.io-client

Ví dụ:

Ví dụ này là về việc triển khai nút Upvote cơ bản trong Socket.IO. Nó sẽ hiển thị giao tiếp giữa máy chủ và máy khách theo thời gian thực. Để bắt đầu, hãy chuyển đến thư mục dự án được yêu cầu và khởi tạo nó bằng lệnh npm init hoặc tạo tệp pack.json theo cách thủ công .

{
“name”: “upvote-example”,
“version”: “0.1”,
“description”: “ứng dụng socket.io đầu tiên”,
“main”: “index.js”,
“dependencies”: {}
}

Bây giờ hãy cài đặt express js bằng lệnh sau,

cài đặt $ npm --save express@4.15.2

Sau khi cài đặt, hãy tạo tệp index.js sẽ thiết lập ứng dụng.

ứng dụng var = yêu cầu (‘bày tỏ’)();
var http = require( ‘http’ ).createServer( ứng dụng );

const CẢNG = 3000;

app.get( ‘/’, function( req, res ) {
res.send( ‘

Chào thế giới

‘ );
});

http.listen( PORT, function() {
console.log( ‘nghe trên *:’ + PORT );
});

Mã này làm gì, nó tạo ra một trình xử lý chức năng cho Express, sau đó được cung cấp cho máy chủ HTTP. Trình xử lý này phản hồi bằng “Xin chào thế giới” cho khách hàng khi / trang được yêu cầu. Cuối cùng, máy chủ HTTP bắt đầu lắng nghe cổng 3000.

Chạy nó sẽ giống như thế này,

Beit phát triển trên nền tảng Open source Socket.io trong node js Beit phát triển trên nền tảng Open source Socket.io trong node js

Cung cấp HTML:
Trước đây, chỉ một dòng HTML duy nhất được gửi dưới dạng phản hồi cho yêu cầu GET. Lần này, hãy đính kèm tệp HTML bằng phương thức sendFile .

app.get( ‘/’, function( req, res ) {
res.sendFile( __dirname + ‘/public/index.html’ );
});

Tích hợp Socket.IO:
Để cài đặt mô-đun phía máy chủ, hãy chạy lệnh sau,

$ npm cài đặt --save socket.io

Bây giờ hãy thay đổi index.js như sau,

ứng dụng var = yêu cầu (‘bày tỏ’)();
var http = require( ‘http’ ).createServer( ứng dụng );
var io = require( ‘socket.io’ )( ​​http );

const CẢNG = 3000;

app.get( ‘/’, function( req, res ) {
res.sendFile( __dirname + ‘/public/index.html’ );
});

http.listen( PORT, function() {
console.log( ‘nghe trên *:’ + PORT );
});

io.on( ‘kết nối’, function( socket ) {
console.log( “người dùng đã kết nối!” );
});

Các thay đổi bổ sung khởi tạo trình xử lý Socket.IO. Hành động ghi nhật ký được gắn vào trình xử lý này khi nó phát ra tín hiệu ‘kết nối’.

Về phía khách hàng, tất cả những gì cần làm chỉ là đoạn mã sau trước khi đóng thẻ. Điều này cho thấy một io toàn cầu được sử dụng bởi một khách hàng cụ thể.

<script src=”/socket.io/socket.io.js”></script>
<script>
var socket = io();
</script>

Khởi động lại dự án từ bảng điều khiển và thử mở máy chủ cục bộ trên nhiều tab và trình duyệt. Mỗi người trong số họ sẽ hoạt động như một kết nối khách hàng duy nhất. Thông báo nhật ký sẽ in mỗi khi kết nối được thiết lập giữa máy khách và máy chủ.

Mỗi ổ cắm cũng kích hoạt một sự kiện ngắt kết nối đặc biệt khi khách hàng đóng hoặc làm mới một tab:

io.on( ‘kết nối’, function( socket ) {
console.log( ‘người dùng đã kết nối!’ );
socket.on( ‘ngắt kết nối’, function() {
console.log( ‘người dùng đã ngắt kết nối’ );
}) ;
});

Phát ra sự kiện:
Ý tưởng chính đằng sau Socket.IO là người ta có thể gửi và nhận bất kỳ sự kiện nào tùy chọn, có hoặc không có bất kỳ dữ liệu nào. Bất kỳ đối tượng nào có thể được mã hóa dưới dạng JSON đều được và dữ liệu nhị phân cũng được hỗ trợ.

Giả sử rằng khi người dùng nhấp vào nút ủng hộ, một sự kiện có tên là sự kiện ủng hộ sẽ được phát ra. Vì vậy, trong tệp index.html , hãy chèn đoạn mã sau.

<script src=”/socket.io/socket.io.js”></script>
<script>
var socket = io();
var btn = document.getElementById( ‘upvote-btn’ );
var upvote_val = false;

btn.addEventListener( ‘click’, function( e ) {
e.preventDefault(); // ngăn tải lại trang

upvote_val = upvote_val ? sai đúng;

socket.emit( ​​’upvote-event’, upvote_val );
});
</script>

Bài viết liên quan

2024.10.23
24 xu hướng thiết kế web hàng đầu năm 2024 và 2025

Những tiến bộ nhanh chóng trong công nghệ đã tác động đáng kể đến xu hướng thiết kế trang web […]

2024.10.13
BEIT và Xu hướng thiết kế Shopify năm nay

Trong thế giới thương mại điện tử không ngừng phát triển, việc đi trước đón đầu là rất quan trọng. […]

2024.10.02
Công ty công nghệ BEIT chúng tôi là ai

Công ty công nghệ BEIT là một trong những doanh nghiệp tiên phong trong lĩnh vực công nghệ thông tin […]

2024.09.30
Hướng dẫn cho người mới bắt đầu về công cụ tạo hình ảnh AI

Đối với người dùng không chuyên, việc tạo hình ảnh bắt mắt từng là một thách thức. Giờ đây, các […]

2024.09.30
Danh sách kiểm tra SEO để tối ưu hóa trang web WordPress

Cách cải thiện SEO cho trang web của bạn, tăng thứ hạng tìm kiếm và tăng mức độ tương tác […]

2024.06.11
Hướng dẫn về Elementor: Cách quản lý trang WordPress Elementor

Mục lục1 1. Khám phá các tùy chọn Elementor1.1 Cài đặt phần tử1.2 Những Widget nào được bao gồm?2 2. […]

Giới thiệu

Chúng tôi có kinh nghiệm trong phát triển các dự án E-commerce, phần mềm quản lý, Mobi app, các dự án outsource. Với những công nghệ mới nhất hiện nay.

Tìm kiếm