오해

WebSocket 및 Socket.IO에 대한 일반적인 오해는 거의 없습니다.

1. 첫 번째 오해는 Socket.IO를 사용하는 것이 WebSocket을 사용하는 것보다 훨씬 쉽다는 것입니다. 아래 예를 참조하십시오.

2. 두 번째 오해는 WebSocket이 브라우저에서 널리 지원되지 않는다는 것입니다. 자세한 내용은 아래를 참조하십시오.

3. 세 번째 오해는 Socket.IO가 이전 브라우저에서 폴백으로 연결을 다운 그레이드한다는 것입니다. 실제로 브라우저가 오래되고 서버에 대한 AJAX 연결을 시작한다고 가정합니다.이 트래픽은 일부 트래픽이 교환 된 후 나중에 WebSocket을 지원하는 브라우저에서 업그레이드됩니다. 자세한 내용은 아래를 참조하십시오.

내 실험

WebSocket과 Socket.IO의 차이점을 보여주기 위해 npm 모듈을 작성했습니다.

• https://www.npmjs.com/package/websocket-vs-socket.io
• https://github.com/rsp/node-websocket-vs-socket.io

서버 측 및 클라이언트 측 코드의 간단한 예입니다. 클라이언트는 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 초

그 두 가지 요청에서

1. HTML 페이지 자체
2. WebSocket으로의 연결 업그레이드

연결 업그레이드 요청은 개발자 도구에서 101 개의 스위칭 프로토콜 응답으로 볼 수 있습니다.

Socket.IO 결과

요청 6 개, 181.56KB, 0.25 초

그 6 가지 요청에서 :

1. HTML 페이지 자체
2. Socket.IO의 JavaScript (180 킬로바이트)
3. 첫 번째 긴 폴링 AJAX 요청
4. 두 번째 긴 폴링 AJAX 요청
5. 세 번째 긴 폴링 AJAX 요청
6. 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 를 참조 하십시오 .

---

답변