Quan niệm sai lầm
Có một vài hiểu lầm phổ biến liên quan đến WebSocket và Socket.IO:
Quan niệm sai lầm đầu tiên là việc sử dụng Socket.IO dễ dàng hơn đáng kể so với sử dụng WebSocket dường như không phải là trường hợp. Xem ví dụ dưới đây.
Quan niệm sai lầm thứ hai là WebSocket không được hỗ trợ rộng rãi trong các trình duyệt. Xem bên dưới để biết thêm.
Quan niệm sai lầm thứ ba là Socket.IO hạ cấp kết nối dưới dạng dự phòng trên các trình duyệt cũ hơn. Nó thực sự giả định rằng trình duyệt đã cũ và bắt đầu kết nối AJAX với máy chủ, sau này được nâng cấp trên các trình duyệt hỗ trợ WebSocket, sau khi một số lưu lượng được trao đổi. Xem bên dưới để biết chi tiết.
Thí nghiệm của tôi
Tôi đã viết một mô-đun npm để chứng minh sự khác biệt giữa WebSocket và Socket.IO:
Đây là một ví dụ đơn giản về mã phía máy chủ và mã phía máy khách - máy khách kết nối với máy chủ bằng WebSocket hoặc Socket.IO và máy chủ gửi ba tin nhắn trong khoảng thời gian 1 giây, được máy khách thêm vào DOM.
Phía máy chủ
So sánh ví dụ về phía máy chủ về việc sử dụng WebSocket và Socket.IO để làm điều tương tự trong ứng dụng Express.js:
Máy chủ WebSocket
Ví dụ máy chủ WebSocket sử dụng Express.js:
var path = require('path');
var app = require('express')();
var ws = require('express-ws')(app);
app.get('/', (req, res) => {
console.error('express connection');
res.sendFile(path.join(__dirname, 'ws.html'));
});
app.ws('/', (s, req) => {
console.error('websocket connection');
for (var t = 0; t < 3; t++)
setTimeout(() => s.send('message from server', ()=>{}), 1000*t);
});
app.listen(3001, () => console.error('listening on http://localhost:3001/'));
console.error('websocket example');
Nguồn: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
Máy chủ socket.IO
Ví dụ máy chủ Socket.IO sử dụng Express.js:
var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
console.error('express connection');
res.sendFile(path.join(__dirname, 'si.html'));
});
io.on('connection', s => {
console.error('socket.io connection');
for (var t = 0; t < 3; t++)
setTimeout(() => s.emit('message', 'message from server'), 1000*t);
});
http.listen(3002, () => console.error('listening on http://localhost:3002/'));
console.error('socket.io example');
Nguồn: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
Phía khách hàng
So sánh ví dụ về phía khách hàng về việc sử dụng WebSocket và Socket.IO để làm điều tương tự trong trình duyệt:
Máy khách WebSocket
Ví dụ ứng dụng khách WebSocket sử dụng JavaScript vanilla:
var l = document.getElementById('l');
var log = function (m) {
var i = document.createElement('li');
i.innerText = new Date().toISOString()+' '+m;
l.appendChild(i);
}
log('opening websocket connection');
var s = new WebSocket('ws://'+window.location.host+'/');
s.addEventListener('error', function (m) { log("error"); });
s.addEventListener('open', function (m) { log("websocket connection open"); });
s.addEventListener('message', function (m) { log(m.data); });
Nguồn: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
Khách hàng của socket.IO
Ví dụ ứng dụng khách socket.IO sử dụng JavaScript vanilla:
var l = document.getElementById('l');
var log = function (m) {
var i = document.createElement('li');
i.innerText = new Date().toISOString()+' '+m;
l.appendChild(i);
}
log('opening socket.io connection');
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });
Nguồn: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
Lưu lượng truy cập mạng
Để thấy sự khác biệt trong lưu lượng mạng, bạn có thể chạy thử nghiệm của tôi . Đây là kết quả mà tôi nhận được:
Kết quả WebSocket
2 yêu cầu, 1,50 KB, 0,05 giây
Từ 2 yêu cầu đó:
- Trang HTML
- nâng cấp kết nối lên WebSocket
(Yêu cầu nâng cấp kết nối hiển thị trên các công cụ dành cho nhà phát triển với phản hồi 101 Giao thức chuyển đổi.)
Kết quả của socket.IO
6 yêu cầu, 181,56 KB, 0,25 giây
Từ 6 yêu cầu đó:
- chính trang HTML
- JavaScript của Socket.IO (180 kilobyte)
- yêu cầu AJAX bỏ phiếu dài đầu tiên
- yêu cầu AJAX bỏ phiếu dài thứ hai
- yêu cầu AJAX bỏ phiếu dài thứ ba
- nâng cấp kết nối lên WebSocket
Ảnh chụp màn hình
Kết quả WebSocket mà tôi nhận được trên localhost:
Kết quả của Socket.IO mà tôi nhận được trên localhost:
Tự kiểm tra
Bắt đầu nhanh:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
Mở http: // localhost: 3001 / trong trình duyệt của bạn, mở các công cụ dành cho nhà phát triển bằng Shift + Ctrl + I, mở tab Mạng và tải lại trang bằng Ctrl + R để xem lưu lượng truy cập mạng cho phiên bản WebSocket.
Mở http: // localhost: 3002 / trong trình duyệt của bạn, mở các công cụ dành cho nhà phát triển bằng Shift + Ctrl + I, mở tab Mạng và tải lại trang bằng Ctrl + R để xem lưu lượng truy cập mạng cho phiên bản Socket.IO.
Để gỡ cài đặt:
# Uninstall:
npm rm -g websocket-vs-socket.io
Tính tương thích của trình duyệt web
Kể từ tháng 6 năm 2016 WebSocket hoạt động trên mọi thứ trừ Opera Mini, bao gồm IE cao hơn 9.
Đây là khả năng tương thích trình duyệt của WebSocket trên Tôi có thể sử dụng kể từ tháng 6 năm 2016:
Xem http://caniuse.com/websockets để biết thông tin cập nhật.