오해
WebSocket 및 Socket.IO에 대한 일반적인 오해는 거의 없습니다.
첫 번째 오해는 Socket.IO를 사용하는 것이 WebSocket을 사용하는 것보다 훨씬 쉽다는 것입니다. 아래 예를 참조하십시오.
두 번째 오해는 WebSocket이 브라우저에서 널리 지원되지 않는다는 것입니다. 자세한 내용은 아래를 참조하십시오.
세 번째 오해는 Socket.IO가 이전 브라우저에서 폴백으로 연결을 다운 그레이드한다는 것입니다. 실제로 브라우저가 오래되고 서버에 대한 AJAX 연결을 시작한다고 가정합니다.이 트래픽은 일부 트래픽이 교환 된 후 나중에 WebSocket을 지원하는 브라우저에서 업그레이드됩니다. 자세한 내용은 아래를 참조하십시오.
내 실험
WebSocket과 Socket.IO의 차이점을 보여주기 위해 npm 모듈을 작성했습니다.
서버 측 및 클라이언트 측 코드의 간단한 예입니다. 클라이언트는 WebSocket 또는 Socket.IO를 사용하여 서버에 연결하고 서버는 1 초 간격으로 3 개의 메시지를 보내며 클라이언트는 DOM에 추가합니다.
서버 측
Express.js 앱에서 WebSocket과 Socket.IO를 사용하는 서버 측 예제를 비교해보십시오 :
웹 소켓 서버
Express.js를 사용하는 WebSocket 서버 예제 :
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 서버
Express.js를 사용하는 Socket.IO 서버 예제 :
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 클라이언트
바닐라 JavaScript를 사용하는 WebSocket 클라이언트 예제 :
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 클라이언트
바닐라 JavaScript를 사용하는 Socket.IO 클라이언트 예 :
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.50KB, 0.05 초
그 두 가지 요청에서
- HTML 페이지 자체
- WebSocket으로의 연결 업그레이드
연결 업그레이드 요청은 개발자 도구에서 101 개의 스위칭 프로토콜 응답으로 볼 수 있습니다.
Socket.IO 결과
요청 6 개, 181.56KB, 0.25 초
그 6 가지 요청에서 :
- HTML 페이지 자체
- Socket.IO의 JavaScript (180 킬로바이트)
- 첫 번째 긴 폴링 AJAX 요청
- 두 번째 긴 폴링 AJAX 요청
- 세 번째 긴 폴링 AJAX 요청
- WebSocket으로의 연결 업그레이드
스크린 샷
localhost에 얻은 WebSocket 결과 :
localhost에서 얻은 Socket.IO 결과 :
자신을 테스트
빠른 시작:
# Install:
npm i -g websocket-vs-socket.io
# Run the server:
websocket-vs-socket.io
열기 에 http : // localhost를 : 3001 / 브라우저에서, Shift + Ctrl 키 + I 열린 개발자 도구, 네트워크 탭을 열고 웹 소켓 버전에 대한 네트워크 트래픽을 볼 수 Ctrl 키 + R로 페이지를 다시로드합니다.
열기 에 http : // localhost를 : 3002 / 브라우저에서, Shift + Ctrl 키 + I 열린 개발자 도구, 네트워크 탭을 열고 Socket.IO 버전에 대한 네트워크 트래픽을 볼 수 Ctrl 키 + R로 페이지를 다시로드합니다.
제거하려면 :
# Uninstall:
npm rm -g websocket-vs-socket.io
브라우저 호환성
2016 년 6 월 현재 WebSocket은 9보다 높은 IE를 포함하여 Opera Mini를 제외한 모든 항목에서 작동합니다.
2016 년 6 월 기준으로 사용할 수 있는 WebSocket의 브라우저 호환성입니다 .
최신 정보는 http://caniuse.com/websockets 를 참조 하십시오 .