1. 소켓 통신
- 소켓 통신은 컴퓨터 네트워크에서 프로세스 간에 데이터를 교환하기 위한 기술
- 소켓 통신은 TCP/IP 프로토콜 스택 위에서 작동
- TCP는 연결 지향형 프로토콜로, 데이터 전송의 신뢰성을 보장하고, UDP는 비연결성 프로토콜로, 데이터를 신속하게 보내고 받는 데 사용함
ㄴ. 소켓 메소드
- onopen : 처음 소켓이 연결되면 실행하는 메소드
- onmessage : 서버에서 온 메세지를 받음
- onclose : 소켓 연결이 종료되면 실행함
- send : 서버로 메시지를 전송할때 사용함
useEffect(() => {
if (!webSocket) return;
// 처음 연결시 실행하게함
webSocket.onopen = function () {
console.log("open", webSocket.protocol);
};
// 서버에서 온 메시지를 받음
webSocket.onmessage = function (e) {
const { data, id, type } = JSON.parse(e.data);
setMsgList((prev) => [
...prev,
{
msg: type === "welcome" ? `${data} joins the chat` : data,
type: type,
id: id,
},
]);
};
// 소켓연결이 종료되면 실행하게함
webSocket.onclose = function () {
console.log("close");
};
}, []);
// 메시지 보내는 함수
const onSubmitHandler = (e) => {
e.preventDefault();
const sendData = {
type: "id",
data: userId,
};
// 서버로 메시지 보내기
webSocket.send(JSON.stringify(sendData));
setIsLogin(true);
};2. 웹소켓
- 웹소켓은 HTML5에서 도입된 기술로, 웹 브라우저와 웹 서버 간의 실시간 양방향 통신을 가능하게 함
웹 애플리케이션에서 클라이언트와 서버 간의 통신을 위해 사용되고 실시간 채팅, 온라인 게임, 주식 시장 모니터링 등의 웹 애플리케이션에서 많이 사용됨
ㄱ.소켓과 웹소켓의 차이점
- 소켓은 일반적으로 TCP/IP 프로토콜 스택 위에서 작동
- 소켓은 네트워크 통신을 위한 일반적인 엔드포인트로 사용
- 소켓은 클라이언트와 서버 간의 연결을 유지한 채 데이터를 주고받습니다. 연결을 맺은 후에는 데이터를 전송하기 위해 추가적인 핸드쉐이크가 필요하지 않음
- 웹소켓은 HTTP 프로토콜 위에서 작동하지만, 일반적인 HTTP 통신과는 다르게 지속적인 연결을 유지하고 양방향 통신을 가능함
- 웹소켓은 주로 웹 브라우저와 웹 서버 간의 실시간 양방향 통신
- 웹소켓은 HTTP의 업그레이드 프로토콜로, 클라이언트와 서버 간의 지속적인 연결을 유지하고 양방향 통신을 위한 추가적인 핸드쉐이크를 거칩니다.
3. Socket.io 라이브러리
- Socket.IO를 사용하면 서버와 클라이언트 간에 실시간으로 양방향 통신을 할 수 있음, 클라이언트나 서버에서 데이터를 보내거나 받을 때 지연 시간이 거의 없는 실시간 통신을 가능하게 함.
- Socket.IO는 먼저 WebSocket을 시도하고, 만약 WebSocket이 지원되지 않는 경우에는 폴링(polling)과 같은 다른 기술을 사용하여 실시간 통신을 제공함.
- Socket.IO는 이벤트 기반으로 동작함 클라이언트나 서버에서 이벤트를 발생시키고, 다른 측에서 이러한 이벤트에 대한 리스너를 등록하여 처리할 수 있음
- 하위 브라우저까지 지원가능하고 웹소켓이(long poling)방식으로 전환하여 실시간 통신을 함
- 서버와 클라이언트간의 문제가 생기면 자동으로 재연결을 시도함, 다만 서버와 클라이언트 둘다 socket.io로 제작되어야함
- private, broadcast, public등의 메소드로 채널을 관리하기에 용이함
ㄱ. Socket.io의 이벤트
- connection : 클라이언트 연결시 동작
- disconnect : 클라이언트와 서버 연결이 종료되었을때 발생
- socket.join : 클라이언트에게 방을 할당할때
- socket.in().to() : 특정 방에 속해있는 클라이언트를 선택할때
- emit : 소켓 이벤트를 발생시키고 필요한 데이터를 같이 전송가능함
emit('chat message', 'Hello, world!')와 같이 호출하면 'chat message'라는 이벤트를 발생시키고, 'Hello, world!'라는 데이터를 함께 전송함- on : 소켓 이벤트를 수신할때 사용함, 특정 이벤트에 대한 리스너를 등록하고, 해당 이벤트가 발생했을 때 실행할 콜백 함수를 정의할 수 있음 예를 들면
서버에서 socket.on('chat message', function(msg){...})와 같이 호출하면
'chat message'라는 이벤트를 수신하고, 해당 이벤트가 발생했을 때 실행할 콜백 함수를 정의함.ㄴ. 통신의 종류(채널설정)
- private : 특정한 소켓에만 전송, 1:1 채팅, 개별 사용자에게 메시지를 보내는 경우 등에 사용 예를 들면
socket.emit('private_message', data)- public : 모든 연결된 소켓에게 전송되는 이벤트
io.emit('public_message', data)- Broadcast : 특정한 소켓을 제외한 모든 연결된 소켓에게 이벤트를 전송하는 것을 의미, 나를 제외한 모두에게 메시지 전송
socket.broadcast.emit('broadcast_message', data)
개발작