Develop Note by J.S.

[Network] Socket.io vs Websocket 본문

Knowledge/Network

[Network] Socket.io vs Websocket

js-web 2023. 6. 26. 11:29
반응형

socket이란?

특정 포트에 바인딩 된 소켓을 통해 Server와 Client간의 양방향 데이터 통신을 지원합니다. socket은 프로토콜, IP, Port가 한 구성이 됩니다. 프로토콜에는 연결지향형인 TCP와 비연결지향형인 UDP가 있습니다. 
웹에서 주로 사용되는 HTTP프로토콜은 단방향 데이터 통신이며 일반적으로 Client가 Server로 Connection -> Request -> Response -> Disconnect 의 절차로 이루어지는데 빈번한 데이터 통신이 발생될 경우 잦은 Connection/Disconnection으로 비효율적인 문제가 있습니다. 이때 1회 Connection으로 양방향 데이터 송수신이 가능한 웹소켓을 사용할 수 있습니다. 


1. WebSocket 특징

 1) 웹에서의 소켓통신은 HTML5 웹 표준기능으로 별도의 설치없이 사용할 수 있습니다.

 2) 적은 사이즈의 데이터를 빠르게 전달 하고 받기에 적합한 기능입니다. 데이터는 String , Blob, 또는 ArrayBuffer형태의 자료만 데이터로 사용할 수 있습니다.

 3) BroadCasting 기능이 없어 연결된 socket Client세션에 For 문을 사용하여 전달하여야 합니다. 주로 주식증권 실시간 차트 등을 예로 들수 있습니다. 

 4) 연결이 끊켰을 때 연결을 재시도하지 않습니다.

 5) JSON데이터의 경우 JSON.stringify, JSON.parse 메서드로 변환하여 전송해야 합니다. 

//Websocket 사용시작
const exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

//메세지 송신
exampleSocket.onopen = function (event) { //socket 연결 완료 event 
  exampleSocket.send("준비완료");
};

//메세지 수신 handler
exampleSocket.onmessage = function (event) {
  console.log(event.data);
}

//연결종료
exampleSocket.close();

 

2. socket.io 특징

 1) Websocket 기술을 활용한 양방향 데이터 송수신 라이브러리 입니다. 별도 설치후 사용가능합니다. 

 2) 연결이 끊켰을 때 reConnection 시도를 합니다. 

 3) Broadcasting 을 지원합니다. 따라서 카카오톡 메신저와 같이 특정 채팅방 전원에게 메세지 전송이 필요한 경우에 socket.io를 사용하기 적합합니다. 

 4) JSON 데이터를 그대로 전송할 수 있습니다.

npm i --save express socket.io

- backend

//socket.js
const SocketIO = require("socket.io");

module.exports = (server) => {
  const io = SocketIO(server, { path: "/socket.io" });
  io.on("connection", (socket) => {
    socket.on("chat message", (msg) => {
      io.emit("chat message", msg);
    });
  });
};



//app.js
const express = require("express");
const app = express();
const Socket = require("./socket");

const server = app.listen(3000, () => {
  console.log("listening port 3000");
});

Socket(server); //socket사용

- frontend

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Socket</title>
</head>
<body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();
        // socket receive Handler
        socket.on('message', (data) => {
        	//수신 이후 login
            
            //송신방법
            socket.emit('message', data);
        });
    </script>
</body>
</html>

 

PS. Websocket, socket.io 모두 장단점이 있기에 서비스가 요구하는 퍼포먼스를 낼 수 있는 기능을 때에 따라 선택하여 사용하시면 됩니다.

 

참고사이트

https://coding-maggot.tistory.com/80

https://fred16157.github.io/node.js/nodejs-socketio-communication-basic/

반응형

'Knowledge > Network' 카테고리의 다른 글

[Network] OSI 7계층 & TCP/IP 4계층  (0) 2023.08.08
[Network] HTTP  (0) 2023.07.03
[Network] API Architecture  (0) 2023.06.27
[Network] HTTPS  (0) 2023.06.26
'Knowledge/Network' Related Articles more