[TIL] 웹소켓은 실시간 통신.

오늘은 웹소켓을 이용해 만든 사이드뷰 게임에 추가적으로 기능을 넣을 예정이었다.

 

하지만 시작부터 에러에 부딪혀 앞으로 나아갈 수 없는 상황이 3시간 넘게 지속되며 머리가 깨질 것 같았다.

 

정리를 하고 나니 웹소켓이라는 주제를 무시하고 작업을 진행중이었다는 것을 알 수 있었다.

 

---

 

오늘 학습한 내용

 

웹소켓은 말그대로 실시간 통신을 하는 것이다. 

 

.io()는 클라이언트에서 사용하는 명령으로 서버와 클라이언트간의 웹소켓 연결을 초기화 한다. 인자로는 서버 url을 받으며 생략할 때는 현재 웹페이지의 호스트와 연결을 시도한다.

 

예시코드

const socket = io('http://localhost:3000', {
    reconnection: true, // 연결이 끊겼을 때 자동 재연결
    reconnectionAttempts: 5, // 최대 재연결 시도 횟수
    timeout: 20000, // 연결 시도 타임아웃 (ms)
});

 

 

.on()은 특정 이벤트를 수신하여, 해당 이벤트가 발생했을때 실행할 콜백 함수를 지정한다. 사용위치는 클라이언트, 서버 둘다 가능하다.

 

예시코드

// 클라이언트 측
socket.on('event_name', (data) => {
    console.log(data);
});

// 서버 측
io.on('connection', (socket) => {
    socket.on('event_name', (data) => {
        console.log(data);
    });
});

 

.emit()은 특정 이벤트를 발생시키고 데이터를 함께 전달하는 것으로 클라이언트와 서버 양쪽에서 사용가능하다.

 

예시 코드

// 클라이언트 측
socket.emit('event_name', { key: 'value' });

// 서버 측
io.on('connection', (socket) => {
    socket.emit('event_name', { key: 'value' });
});

 

 

io.on()은 서버에서 사용하는 명령으로 서버에서 특정 이벤트를 수신하거나 기본적인 연결상태를 관리한다.

 

예시 코드

io.on('connection', (socket) => {
    console.log('A client connected:', socket.id);

    // 연결된 클라이언트가 특정 이벤트를 보낼 때 처리
    socket.on('event_name', (data) => {
        console.log('Event data:', data);
    });

    // 연결이 끊어졌을 때 처리
    socket.on('disconnect', () => {
        console.log('Client disconnected:', socket.id);
    });
});

 

학습에 대한 추가 정보

 

서버와 클라이언트 사이 연결을 유지하며 데이터를 주고 받을 수 있는 것 외에 broadcast 기능을 사용하면 특정 소켓을 제외한 모든 클라이언트에게 메세지를 전송할 수 있다.

 

서버에서 broadcast 하는 방법

io.on('connection', (socket) => {
    console.log('A client connected:', socket.id);

    // 특정 소켓을 제외하고 모든 클라이언트에게 메시지 전송
    socket.broadcast.emit('message', {
        text: 'A new user has joined the chat!',
    });
});

 

- 게임에서 친구가 로그인했을때 친구가 아닌 소켓을 제외하고 친구인 소켓들에게만 접속했다는 메세지를 보냈다는 것과 유사하다고 생각된다.

 

room, namespace를 사용하면 특정 파트에만 broadcast 메세지를 보낼 수 있다.

 

 

localStorage와 Redis

 

• localStorage는 클라이언트 측에 데이터를 저장하는 방식으로, 브라우저 세션에 지속됩니다. 하지만 저장 용량이 제한적이고 문자열만 저장할 수 있다는 단점이 있습니다.

 

• Redis는 서버 측에서 사용되는 빠른 데이터 저장소로, 다양한 데이터 구조를 지원하고, 세션 관리, 캐시 등 다양한 용도로 사용됩니다. Redis를 Node.js에서 사용하려면 ioredis와 같은 라이브러리를 활용할 수 있습니다.

 

트러블 슈팅

리소스를 불러오지 못하는 에러가 발생

데이터를 잘 가져오는지 확인하는 메시지를 보냈지만 다음과 같은 에러 발생

 

문제를 찾던 도중 애초에 public 폴더는 클라이언트단이라 외부의 다른 파일들을 참조할 수 없다는 것을 알게 되었다.

 

방법에는 다음이 있다.

 

1. API 요청을 통해 데이터 가져오기

 

2. public 폴더 내 파일 붙여넣기