ความเข้าใจผิด
มีความเข้าใจผิดบางประการเกี่ยวกับ WebSocket และ Socket.IO:
ความเข้าใจผิดครั้งแรกคือการใช้ Socket.IO ง่ายกว่าการใช้ WebSocket ซึ่งดูเหมือนจะไม่เป็นเช่นนั้น ดูตัวอย่างด้านล่าง
ความเข้าใจผิดที่สองคือ WebSocket ไม่ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์ ดูด้านล่างสำหรับข้อมูลเพิ่มเติม
ความเข้าใจผิดที่สามคือ Socket.IO ปรับลดการเชื่อมต่อเป็นทางเลือกในเบราว์เซอร์รุ่นเก่า จริง ๆ แล้วมันสันนิษฐานว่าเบราว์เซอร์เก่าและเริ่มการเชื่อมต่อ AJAX ไปยังเซิร์ฟเวอร์ที่ได้รับการอัพเกรดในภายหลังบนเบราว์เซอร์ที่รองรับ WebSocket หลังจากมีการแลกเปลี่ยนปริมาณการใช้งาน ดูรายละเอียดด้านล่าง
การทดลองของฉัน
ฉันเขียนโมดูล npm เพื่อสาธิตความแตกต่างระหว่าง WebSocket และ Socket.IO:
มันเป็นตัวอย่างง่าย ๆ ของฝั่งเซิร์ฟเวอร์และรหัสฝั่งไคลเอ็นต์ - ไคลเอ็นต์เชื่อมต่อกับเซิร์ฟเวอร์โดยใช้ WebSocket หรือ Socket.IO และเซิร์ฟเวอร์ส่งข้อความสามข้อความในช่วงเวลา 1s ซึ่งถูกเพิ่มไปยัง DOM โดยไคลเอนต์
ฝั่งเซิร์ฟเวอร์
เปรียบเทียบตัวอย่างฝั่งเซิร์ฟเวอร์ของการใช้ WebSocket และ Socket.IO เพื่อทำสิ่งเดียวกันในแอป Express.js:
WebSocket เซิร์ฟเวอร์
ตัวอย่างเซิร์ฟเวอร์ WebSocket โดยใช้ 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');
ที่มา: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js
เซิร์ฟเวอร์ Socket.IO
ตัวอย่างเซิร์ฟเวอร์ Socket.IO โดยใช้ 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');
ที่มา: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js
ด้านลูกค้า
เปรียบเทียบตัวอย่างฝั่งไคลเอ็นต์ของการใช้ WebSocket และ Socket.IO เพื่อทำสิ่งเดียวกันในเบราว์เซอร์:
WebSocket ไคลเอนต์
ตัวอย่างไคลเอ็นต์ WebSocket โดยใช้ JavaScript วานิลลา:
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); });
ที่มา: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html
ลูกค้า Socket.IO
ตัวอย่างไคลเอ็นต์ Socket.IO ใช้ vanilla JavaScript:
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); });
ที่มา: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html
การรับส่งข้อมูลเครือข่าย
หากต้องการดูความแตกต่างของปริมาณการใช้เครือข่ายคุณสามารถเรียกใช้การทดสอบของฉันได้ นี่คือผลลัพธ์ที่ฉันได้รับ:
ผลลัพธ์ WebSocket
2 คำขอ, 1.50 KB, 0.05 วิ
จากคำขอ 2 ข้อดังกล่าว:
- หน้า HTML เอง
- อัพเกรดการเชื่อมต่อเป็น WebSocket
(คำขออัพเกรดการเชื่อมต่อสามารถมองเห็นได้บนเครื่องมือสำหรับนักพัฒนาที่มีการตอบสนองการเปลี่ยนโปรโตคอล 101)
ผลลัพธ์ Socket.IO
6 คำขอ 181.56 KB, 0.25 วิ
จากคำขอทั้ง 6 ข้อนั้น:
- หน้า HTML เอง
- จาวาสคริปต์ของ Socket.IO (180 กิโลไบต์)
- คำขอ AJAX แบบสำรวจระยะยาวครั้งแรก
- คำขอ AJAX ที่มีความยาวเป็นอันดับสอง
- คำขอ AJAX แบบสำรวจความยาวที่สาม
- อัพเกรดการเชื่อมต่อเป็น WebSocket
ภาพหน้าจอ
ผลลัพธ์ WebSocket ที่ฉันได้รับจาก localhost:
ผลลัพธ์ Socket.IO ที่ฉันได้รับจาก localhost:
ทดสอบด้วยตัวเอง
เริ่มต้นอย่างรวดเร็ว:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
เปิดhttp: // localhost: 3001 /ในเบราว์เซอร์ของคุณเปิดเครื่องมือสำหรับนักพัฒนาด้วย Shift + Ctrl + I เปิดแท็บเครือข่ายแล้วโหลดหน้าเว็บอีกครั้งด้วย Ctrl + R เพื่อดูปริมาณการใช้เครือข่ายสำหรับรุ่น WebSocket
เปิดhttp: // localhost: 3002 /ในเบราว์เซอร์ของคุณเปิดเครื่องมือสำหรับนักพัฒนาด้วย Shift + Ctrl + I เปิดแท็บเครือข่ายแล้วโหลดหน้าเว็บอีกครั้งด้วย Ctrl + R เพื่อดูปริมาณการใช้เครือข่ายสำหรับเวอร์ชั่น Socket.IO
วิธีถอนการติดตั้ง:
# Uninstall:
npm rm -g websocket-vs-socket.io
ความเข้ากันได้ของเบราว์เซอร์
ข้อมูล ณ เดือนมิถุนายน 2559 WebSocket ใช้งานได้กับทุกอย่างยกเว้น Opera Mini รวมถึง IE ที่สูงกว่า 9
นี่เป็นความเข้ากันได้ของเบราว์เซอร์ของ WebSocket บนฉันสามารถใช้ณ มิถุนายน 2559:
ดูhttp://caniuse.com/websocketsสำหรับข้อมูลที่ทันสมัย