Logo GH

웹 소켓 온라인 SSE

1) 짧은: 무엇과 무엇

웹 소켓 (WS/WSS) -전이중 채널로의 HTP 연결 업그레이드. 채팅, 라이브 게임, 협업, 양방향 원격 측정에 적합합니다.
SSE (Server-Sent Events) - 서버에서 브라우저로의 단방향 스트림 (mm '텍스트/이벤트 스트림'). 시세, 알림, 따옴표, 작업 진행에 이상적입니다. 클라이언트- 'EventSource'.

선택 규칙:
  • 클라이언트의 입력이 실시간으로 (종종 많은) → WebSocket으로 필요합니다.
  • 서버의 푸시 업데이트 만 SSE → 보다 호환성 및 단순성이 더 중요합니다.

2) 네트워크 및 프로토콜

2. 1 전송 및 호환성

웹 소켓: HTTP로 시작합니다... 업그레이드: 웹 소켓 '(TH/1. 1). Microsoft/2, RFC 8441 (CONNECT +: protocol = websocket ') 의 경우 지원은 프록시에 따라 다릅니다. TLS (WSS) 위에서 작동합니다. 필수 판매입니다.
SSE: 스트리밍이 가능한 정상적인 긴 HTP 응답 ('200 OK'). HTT/1을 잘 통과합니다. 1/2/3, CNC/프록시와 호환됩니다 (긴 연결이 종료되지 않은 경우).

2. 2 개의 프록시/밸런서/CDNName

검사: 장기 연결, 아이들 및 타임 아웃, 끈적 끈적한 세션 지원 (상태가 노드에있는 경우).
WS의 경우 연결 당 제한 사항 인 '프록시 _ 판독 _ 타임 아웃', '업그레이드' 헤더가 포함됩니다.
SSE의 경우 프록시가 응답을 버퍼링하지 않도록하십시오 (그렇지 않으면 클라이언트가 제 시간에 이벤트를 보지 못함).

3) 메시지 모델 및 흐름 제어

웹 소켓: 텍스트 또는 이진 프레임; 'ping/pong' 이 있지만 응용 프로그램 (대기열, 창, 드롭 정책) 에 내장 된 역압이 없습니다.
SSE: 텍스트 이벤트 (evolution-8); 클라이언트는 내장 지연과 다시 연결할 수 있습니다. 서버는 '재 시도:' 를 지정할 수 있습니다 원하는 위치에서 재개 할 'id:' 와 'Last-Event-ID' 헤더가 있습니다.

역압 (일반 관행):
  • 클라이언트 당 발신 메시지를 인용하십
  • 이벤트의 대기열을 제한합니다. 오버플로시-낮은 우선 순위/집계를 버립니다.
  • WS의 경우 슬라이딩 윈도우와 응용 프로그램 수준 ACK를 사용하십시오.

4) 연결의 신뢰성

4. 1 탐지 및 유지

WS: N 초마다 'ping' 을 보냅니다. 타임 아웃 갭-지수 백오프 + 지터와 다시 연결됩니다.
SSE: 서버는 연결이 유휴 상태가 아닌 심장 박동으로 "댓글" 을 보냅니다. 클라이언트 자체가 다시 연결됩니다.

4. 2 흐름 복구

WS: 다시 연결한 후 오프셋/시퀀스 메시지를 유지하고 델타를 요청하십시오.
SSE: 요청시 각 이벤트에 대해 'id:' 및 'Last-Event-ID' 를 사용하십시오-서버가 누락 된 이벤트를 보냅니다.

5) 인증 및 인증

요청 맵 (WS) 의 JWT 베어러는 안전하지 않습니다 (로그에서 누출). 'Secure', 'HttpOnly', 'SameSite' 플래그가있는 헤더 (기본 HTP 핸드 셰이크를 통해) 또는 쿠키를 사용하십시오.
mTLS (특히 B2B) 와 원래 요청에 대한 서명 (HMAC) 이 가능합니다.
쿠키가있는 SSE의 경우 CORS ('액세스 제어 허용 원산지', '허용 자격 증명') 에 대해 기억하십시오.

토큰 회전: 스트림을 차단하지 마십시오. 패스 "곧 만료" → 클라이언트가 새 토큰과의 연결을 다시 엽니 다.

6) 데이터 형식 및 압축

웹 소켓: 퍼메시지 디플레이트를주의 깊게 활성화하십시오 (CPU). 이미 압축 된 형식 (Proto, Avro) 의 압축을 피하십시오. 이진 페이로드는 JSON보다 경제적입니다.
SSE: 이것은 텍스트입니다. 큰 데이터의 경우 REST/gRPC 리소스 또는 청크 파일에 대한 링크를 보내십시오. SSE 용 gzip 전송-적절하지만 프록시/CDN에서 버퍼링을 감시하십시오.

7) 스케일링 및 팬 아웃

7. 1 수평 스케일링

앱 결함없이 다시 시작하십시오. 연결 상태-프론트 레이어에서; 데이터-중개인의 데이터.
로컬 대기열이있는 경우 끈적 끈적한 (세션/사용자별 해시) 이 필요합니다.
이상은 무국적 전선입니다. 노드 만 멀티 플렉스 구독; 이벤트는 일반적인 펍/서브에서 제공됩니다.

7. 펍/서브 및 브로커 2 개

넓은 팬 아웃을 위해서는 Kafka/NATS/Redis Streams를 사용하십시오.
"Fanout Gateway" 계층은 WS/SSE를 통해 주제를 구독하고 클라이언트를 보풀합니다.
노드 간 부하 균형을 맞추기 위해 라우팅 키를 사용하십시오.

8) 생산 구성 요소

8. 1 NGINX-웹 소켓

nginx map $http_upgrade $connection_upgrade { default upgrade; '' close; }

server {
listen 443 ssl http2;
server_name ws. example. com;

location /ws {
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_http_version 1. 1;
proxy_read_timeout 75s; # increase for long sessions proxy_send_timeout 15s;
proxy_pass http://ws-backend;
}
}

8. 2 NGINX-SSE (버퍼링을 비활성화하는 데 중요)

nginx location /events {
proxy_http_version 1. 1;
proxy_set_header Connection "";
proxy_buffering off; # is critical for proxy_cache off threads;
chunked_transfer_encoding on;
proxy_read_timeout 60m;
proxy_pass http://sse-backend;
}

8. 3 Kubernetes (Ingress Annotations, NGINX Ingress)

yaml metadata:
annotations:
nginx. ingress. kubernetes. io/proxy-read-timeout: "3600"
nginx. ingress. kubernetes. io/proxy-send-timeout: "3600"
nginx. ingress. kubernetes. io/enable-websocket: "true"
nginx. ingress. kubernetes. io/proxy-buffering: "off"  # для SSE

9) 코드 예

9. 1 SSE 클라이언트 (브라우저)

js const es = new EventSource("/events? channel=odds", { withCredentials: true });

es. addEventListener("message", (e) => {
const data = JSON. parse(e. data);
renderOdds(data);
});

es. addEventListener("error", () => {
//EventSource will reconnect itself; can be shown spinner
});

9. 2 SSE 서버 (노드. js/Express)

js app. get('/events', (req, res) => {
res. writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
res. write ('retry: 3000\n\n') ;//3s backoff to client

const sub = subscribe(req. query. channel, (event) => {
res. write(`id: ${event. id}\n`);
res. write(`event: message\n`);
res. write(`data: ${JSON. stringify(event. payload)}\n\n`);
});

req. on('close', () => sub. unsubscribe());
});

9. 3 웹 소켓 클라이언트 (브라우저)

js const ws = new WebSocket("wss://ws. example. com/ws");
ws. onopen = () => ws. send(JSON. stringify({ type: "join", room: "chat-1" }));
ws. onmessage = (m) => handle(JSON. parse(m. data));
ws. onclose = () => scheduleReconnect();

10) 보안 및 제한

연결 당 및 사용자 당 속도 제한: 수신 메시지 속도 (WS) 및 발신 흐름 속도 (WS/SSE) 를 제한합니다.
연결 수명 및 총 트래픽별로 쿼터.
메시지 크기 제한은 최대 메시지/초입니다.
악수 단계에서 WAF/봇 필터; 연결 범람 방지 (많은 짧은 연결).
임차인/네임 스페이스 격리: 개별 리소스 풀.

11) 관찰 가능

메트릭:
  • '연결 _ active', '연결 _ new _ total', 'bytes _ in/out',
  • '메시지 _ in/out _ total', 'drop _ messes _ total',
  • 'recontact _ total', 'latency _ delivery _ ms {p50, p95, p99}'.
  • 로그: IP/UA, 벽화/테넌트, 닫기 이유 ('close _ code'), 지속 시간.
  • 추적: 이벤트를 원래 명령 (상관 ID) 과 연관시킵니다. WS의 경우 "가상" 부치 스팬을 사용하십시오.

12) 운영 뉘앙스

TLS는 클라이언트에 더 가깝게 종료됩니다 (CNC/edge).
고갈되는 동안 연결의 사전 회전 (우아한): 플래그에 "재 연결" 을 제공하십시오.
"핫" 채널을 균등하게 배포하기 위해 키를 깎습니다.
늦은 가입자의 상태 스냅 샷 (스냅 샷 + 델타).
최종 값 캐시 (특히 SSE) -콜드 클라이언트에 유용합니다.

13) 반 패턴

WS를 통해 SSE 또는 JSON을 통해 큰 이진 덩어리를 스트리밍하십시오. 메시지에서 HTT 다운로드 및 링크를 사용하십시오.
연결 시점과 긴 세션에 대한 재확인이 없을 때만 승인.
글로벌 끈적 끈적한 → 불균형 및 핫 노드.
장애인 타임 아웃/제한 → 냉동 연결은 수영장을 먹습니다.
SSE 프록시/CDN의 버퍼링 → "실시간" 은 몇 분의 지연이됩니다.
다시 연결한 후 시퀀스/오프셋 → 부족으로 클라이언트는 데이터 무결성을 잃습니다.

14) 구현 점검표

  • WS (양방향) 또는 SSE (일방적) 가 선택됩니다.
  • 구체화 된 타임 아웃, 유지 및 재 연결 (백오프 + 지터).
  • 디자인 된 시퀀스/오프셋 및 (SSE 용) 'id '/' Last-Event-ID'.
  • 크기/속도/연결/할당량, DoS 보호 정의.
  • 프록시/인프라 설정: 업그레이드, 프록시 _ 버퍼링 오프 (SSE), 읽기/보내기 타임 아웃.
  • 스케일링: 펍/서브 브로커, 팬 아웃 게이트웨이, 필요한 경우에만 끈적 끈적한.
  • 인증: 안전한 토큰 전송, 끊임없는 회전.
  • 관찰 가능성: 지표, 로그, 흔적; 대시 보드 및 경고.
  • 릴리스 계획: 우아한 드레인 연결, 클라이언트에게 다시 연결하라는 신호.
  • 게임 일: 네트워크 중단, 노드 드롭, 브로커 과부하, 긴 RTT.

15) FAQ

CDN을 통해 SSE를 캐시 할 수 있습니까?
일반적으로 아닙니다: 개인화 된 흐름입니다. 짧은 TTL 및 청크 배송으로 공개 채널의 경우 "실시간" 을 쉽게 깰 수 있습니다.

WebSocket이 해/2/3 위에서 작동합니까?
브라우저 WS는 TH/1로 시작합니다. 1- 업그레이드; h2에는 RFC 8441이 있으며 프록시/서버의 지원은 별도로 필요합니다. h3-운동 중; 스트리밍의 경우 h3에는 WebTransport가 있지만 다른 API입니다.

브라우저 용 gRPC vs WS?
깨끗한 브라우저는 gRPC를 말하지 않습니다. Envoy를 통해 gRPC-Web이 필요합니다. 대화식 UI의 경우 WS + REST가 더 쉬운 경우가 많습니다.

16) 총계

웹 소켓-실시간 대화와 소형 양방향 채널이 필요할 때.

SSE-서버에서 클라이언트로 간단하고 안정적인 푸시가 필요한 경우 최소한의 복잡성과 자동 재 연결이 필요합니다

판매 성공은 정확한 타임 아웃 및 한계, 오프셋 복구, 펍/서브 팬 아웃, 올바른 프록시 설정 및 명확한 관찰 가능성입니다.

Contact

문의하기

질문이나 지원이 필요하시면 언제든지 연락하십시오.우리는 항상 도울 준비가 되어 있습니다!

Telegram
@Gamble_GC
통합 시작

Email — 필수. Telegram 또는 WhatsApp — 선택 사항.

이름 선택 사항
Email 선택 사항
제목 선택 사항
메시지 선택 사항
Telegram 선택 사항
@
Telegram을 입력하시면 Email과 함께 Telegram에서도 답변드립니다.
WhatsApp 선택 사항
형식: +국가 코드 + 번호 (예: +82XXXXXXXXX).

버튼을 클릭하면 데이터 처리에 동의하는 것으로 간주됩니다.