[Node.js] Web Socket

10714 단어 socketnode.jsnode.js

HTTP 한계로 인한 Web Socket의 등장

  • HTTP 프로토콜은 요청에 대해서만 응답을 보내는 단방향 프로토콜이다.
    - 단순 문서 전달에 효율적
    - html 문서를 받아 브라우저를 렌더링하는 데에 사용
  • 매 요청, 응답마다 연결하는 과정이 필요
  • 인터넷이 발전하며 문서 교환 이상으로 사용자 사이의 상호작용이 중요시되면서 양방향 통신이 필요하게 되었다.
    - Long polling, Ajax 등을 사용해도 어느정도 해결이 가능하긴 하다.
  • 이러한 이유로 HTML5 표준안에 WebSocket이 등장했다.

Web Socket

  • 하나의 HTTP 접속으로 양방향 통신(or 데이터 전송)이 가능하다.
    - ex. SNS, 멀티 게임, 주식, 채팅 등
  • URI: ws, wss (http, https 와 같은 개념)

handshaking

  • HTTP 핸드쉐이크가 끝나면, HTTP 프로토콜을 웹 소켓 프로토콜로 변환하여 통신을 시작한다.
  1. 클라이언트에서 웹 소켓 프로토콜로 업그레이드를 요청
    - 소켓 버전, 비밀키 등을 요청 헤더에 포함시킴
  2. 서버에서 웹 소켓 프로토콜로 업그레이드 성공 응답을 전송한다.

대표적인 라이브러리

  • Python: websocket
  • JS: ws, websocket, socket.io
  • Go: gorilla/websocket

Socket.io

  • 설치: npm i socket.io

간단한 채팅 구현하기

server

소켓 서버 셋팅

// index.js
const express = require('express');
const app = express();
const server = require('http').createServer(app);	// http 서버 생성
const io = require('socket.io')(server);	// http 서버를 socket.io 서버로 upgrade

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

소켓 서버 접속

  • 인자로 클라이언트가 접속한 socket 객체가 전달된다.
io.on('connection', (socket) => {	
  console.log('a user connected');
});
  • socket: 개발 클라이언트와 상호작용을 위한 객체
  • io: 서버에 연결된 전체 클라이언트와 상호작용을 위한 객체

메세지 수신

socket.on('envetName', callback() { ... });

메세지 송신

  • 접속된 모든 클라이언트에게 메세지 전송
    io.emit('eventName', msg);
  • 메세지를 전송한 클라이언트에게만 메세지 전송
    socket.emit('eventName', msg);
  • 메세지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메세지 전송
    socket.broadcast.emit('eventName', msg);
  • 특정 클라이언트에게만 메세지 전송
    io.to(id).emit('eventName', msg);

Client

소켓 클라이언트 셋팅

// index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
    </script>
  </body>
</html>

소켓 서버 접속

var socket = io();

메세지 송신

socekt.emit('envetName', msg);

메세지 수신

  • 인자로 서버가 송신한 메세지가 전달된다.
socket.on("event_name", function(data) {
  console.log('Message from Server: ' + data);
});

참고자료

Socket.IO
10.5 Node.js(Express)와 Socket.io
Socket.io를 사용한 실시간 채팅 애플리케이션
[웹소켓] WebSocket의 개념 및 사용이유, 작동원리, 문제점

hdu 5465 트 리 배열
Java 오버라이딩과 다형성(3)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage