웹소켓 편집하기 (부분)

== 주요 라이브러리와 프레임워크 ==

=== Socket.IO ===

socket.io는 양방햔 통신을 하기위해 웹소켓 기술을 활용하는 라이브러리이다. 어찌보면 [[자바스크립트]]와 [[jQuery]]의 관계와 비슷하다고 할 수 있겠다.

==== Socket.IO의 특징 ====

[[Socket.IO]]는 웹소켓의 부가기능이 아니다. 웹소켓은 Socket.IO가 실시간, 양방향, 이벤트 기반 통신을 제공하는 방법 중 하나이다. 만약 당신의 브라우저나 기기가 웹소켓을 지원하지 않는다면 Socket.IO는 다른 방법을 사용해서 계속 동작할 것이다.

주요 기능:
* '''자동 재연결''': 연결이 끊어져도 자동으로 재시도
* '''폴백 지원''': 웹소켓이 지원되지 않을 때 HTTP Long Polling 사용
* '''룸(Room) 기능''': 특정 사용자 그룹에게만 메시지 전송
* '''이벤트 기반 통신''': 직관적인 이벤트 방식

==== Socket.IO vs 순수 웹소켓 ====

ws는 조금 불친절하지만 원하는대로 코드 작성하기가 쉬웠고, socket.io는 기능이 많고 쉽게 사용하기 쉬우며 직관적이다. 처음 배우기에 확실히 좋은건 socket.io, 원하는대로 커스텀하여 만들기 좋은 것은 ws라고 할 수 있다.

'''Socket.IO 장점:'''
* 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도함
* 방 개념을 이용해 일부 클라이언트에게만 데이터를 전송하는 브로드캐스팅이 가능함
* 이벤트 기반의 직관적인 API

'''순수 웹소켓 장점:'''
* 가벼움 (추가 라이브러리 불필요)
* 표준 기술
* 더 나은 성능

==== Socket.IO 사용 예제 ====

서버 측:
<syntaxhighlight lang="javascript">
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
    console.log('사용자 연결됨:', socket.id);
    
    // 특정 룸에 입장
    socket.join('room1');
    
    // 메시지 처리
    socket.on('message', (data) => {
        // 같은 룸의 다른 사용자들에게 전송
        socket.to('room1').emit('message', data);
    });
    
    // 연결 해제
    socket.on('disconnect', () => {
        console.log('사용자 연결 해제됨:', socket.id);
    });
});
</syntaxhighlight>

클라이언트 측:
<syntaxhighlight lang="javascript">
const socket = io('http://localhost:3000');

// 연결 성공
socket.on('connect', () => {
    console.log('서버에 연결됨!');
});

// 메시지 전송
socket.emit('message', { text: '안녕하세요!' });

// 메시지 수신
socket.on('message', (data) => {
    console.log('받은 메시지:', data);
});
</syntaxhighlight>

=== 기타 라이브러리들 ===

==== ws (Node.js) ====
* 가장 인기 있는 Node.js 웹소켓 라이브러리
* 빠르고 가벼움
* 순수 웹소켓 표준 구현

==== uWebSockets.js ====
* 고성능 웹소켓 라이브러리
* [[C++]]로 작성된 바인딩
* 대용량 트래픽 처리에 적합

==== SockJS ====
* 웹소켓 호환성을 위한 라이브러리
* 다양한 폴백 옵션 제공
* 브라우저 호환성 중시