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;
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;
Cài đặt:
Cần thiết để cài đặt Sockets.IO
Như đã đề cập trước đó, có hai thư viện khác nhau để đưa vào một dự án.
$ npm cài đặt --save socket.io
Để 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ụ 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,
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 trangupvote_val = upvote_val ? sai đúng;
socket.emit( ’upvote-event’, upvote_val );
});
</script>
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 […]
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. […]
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 […]
Đố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 […]
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 […]
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. […]