깊은바다거북
개발 공부 기록
깊은바다거북
전체 방문자
오늘
어제
  • 분류 전체보기 (219)
    • JAVA (9)
    • JavaScript (15)
    • 스파르타코딩클럽 (11)
      • [내일배움단] 웹개발 종합반 개발일지 (5)
      • [내일배움캠프] 프로젝트와 트러블 슈팅 (6)
    • SQL | NoSQL (4)
    • CS 등등 (0)
    • TIL | WIL (173)
    • 기타 에러 해결 (3)
    • 내 살 길 궁리 (4)

인기 글

최근 글

최근 댓글

태그

  • TIT (Today I Troubleshot)
  • Trie
  • 최대 힙(Max Heap)
  • Linked List
  • BST(이진 탐색 트리)
  • 혼자 공부하는 자바스크립트
  • 자잘한 에러 해결
  • DFS(깊이우선탐색)
  • Preorder Traversal(전위 순회)
  • POST / GET 요청
  • Binary Tree(이진 트리)
  • Til
  • 코딩테스트 연습문제
  • 점화식(Recurrence Relation)
  • TypeScript
  • 팀 프로젝트
  • 자바스크립트 기초 문법
  • 자료 구조
  • Backtracking(백트래킹)
  • Inorder Traversal(중위 순회)
  • leetcode-cli
  • 프로그래머스
  • BFS(너비우선탐색)
  • 재귀 함수
  • Leetcode
  • tree
  • 01. 미니 프로젝트
  • 트러블 슈팅 Troubleshooting
  • 최소 힙(Min Heap)
  • 시간 복잡도
hELLO · Designed By 정상우.
깊은바다거북

개발 공부 기록

TIL | WIL

1/13 (Socket.IO “방”의 개념 예제, 금) TIL

2023. 1. 13. 22:29

(웹소켓 공부 중)

오늘은 Socket.IO를 응용한 간단한 듀얼 게임 예제를 공부하였다.

서버와 프론트 사이에서 socket.emit()과 socket.on()으로 왔다갔다 하는 흐름은 다 정리를 했는데, io.sockets.adapter.rooms.get(roomName)같은 코드들이 어려웠다.

(여기 보는 중)

관리자 채팅방 살짝 예제 - https://p-story-js.tistory.com/107


Socket.IO 연습용 듀얼 게임 실행 화면

듀얼 게임 예제에서 나온 io와 socket 코드 조각들:

const room = io.sockets.adapter.rooms.get(roomName); // roomName='ARLUK'
console.log("room name is: ", room);

// 결과
=> room name is: Set(2) { '72UInmIqz3kqeySbAAAN', 'DRCzbchbPBcUW5_7AAAP' }

⇒ io.sockets는 io.of("/")와 같다(=디폴트 네임스페이스)

io.sockets.in(room).emit('gameState', JSON.stringify(gameState); // room='ARLUK'
// = io.of("/").to(room).emit(...)

⇒ in(room)은 to(room)과 같다.

Socket.IO의 Namespace와 Room

Namespace

: 지정한 Namespace에 있는 소켓끼리(노드끼리)만 통신하도록 연결해주는 것.

: 소켓을 묶어주는 단위.

: url에 지정된 위치에 따라 신호의 처리를 다르게 하는 기술

Room

: Namespace 안에서 또 나뉘어지는 그룹.

Namespace와 Room은 이런 관계가 있고

(IO -> NameSpace -> Room -> Socket )

대략 이런 코드가 있다고 한다:

// 전체 보내기
req.app.get('io').emit('이벤트', 메세지);
 
// 네임스페이스에 있는 유저한테만 보내기
req.app.get('io').of('네임스페이스').emit('이벤트', 메세지);
 
// 네임스페이스에 있으면서, 그안에 룸에 있는 유저한테만 보내기
req.app.get('io').of('네임스페이스').to(roomId).emit('이벤트', 메세지);
 
// 특정 유저한테만 보내기 (1:1대화, 귓속말)
req.app.get('io').to(socket.id).emit('이벤트', 메세지);
 
// 나를 제외한 모든 유저에게 보내기
req.app.get('io').broadcast.emit('event_name', msg);

socket.join()은 방에 참가.

참조(중) : https://inpa.tistory.com/entry/SOCKET-📚-Namespace-Room-기능

모듈 내보내기

CommonJS 방식으로 모듈을 내보낼 때는 ES6처럼 명시적으로 선언하는 것이 아니라 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 합니다.

  1. 여러 개의 객체를 내보낼 경우, exports 변수의 속성으로 할당한다.
  1. 딱 하나의 객체를 내보낼 경우, module.exports 변수 자체에 할당한다.

여러 객체를 내보내는 경우, exports

// currency-functions.js 파일에서 내보내기
const exchangeRate = 0.91;

function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100;
}

const canadianToUs = function (canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
};

function usToCanadian(us) {
  return roundTwoDecimals(us / exchangeRate);
}

exports.canadianToUs = canadianToUs; // 내보내기 1
exports.usToCanadian = usToCanadian; // 내보내기 2
// 다른 파일에서 불러오기:
const currency = require("./currency-functions");

console.log("50 Canadian dollars equals this amount of US dollars:");
console.log(currency.canadianToUs(50));

console.log("30 US dollars equals this amount of Canadian dollars:");
console.log(currency.usToCanadian(30));

단일 객체를 내보내는 경우, module.exports

// currency-object.js 파일에서 내보내기
const exchangeRate = 0.91;

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100;
}

// 내보내기
const obj = {};
obj.canadianToUs = function (canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
};
obj.usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate);
};
module.exports = obj;
// 다른 파일에서 불러오기:
const currency = require("./currency-object");

console.log("50 Canadian dollars equals this amount of US dollars:");
console.log(currency.canadianToUs(50));

console.log("30 US dollars equals this amount of Canadian dollars:");
console.log(currency.usToCanadian(30));

  • 그치만 아직도 어떻게 그냥
// 1. 이것과
var io = require("socket.io")(httpServer);

// 2. 이것이 
const { Server } = require("socket.io");
const io = new Server(httpServer, { //options });

같을 수 있는지 모르겠다.

socket.io에서 반출하는 것이 객체 형태라면 2번 방식으로 “Server”를 특정하여 뽑아오는 것은 이해가 되지만 1번이 이해되지 않는다.

만약 socket.io에서 반출하는 게 객체가 아니라 클래스라면 클래스 인스턴스를 생성한다는 것으로 1번을 이해할 수 있지만 2번이 다시 오리무중이 된다. 클래스를 구조 분해 할당으로 분해할 수도 있는건가? 아닌 것 같은데..


Uploaded by N2T

    'TIL | WIL' 카테고리의 다른 글
    • 1/16 월 (TypeScript, 만나서 반갑소) TIL, TIT
    • 1/15 (Socket.IO를 활용한 간단 듀얼 게임, 일) TIL
    • 1/12 (공부가 느려서 초조한 하루, 목) TIL
    • 1/11 (서버측엔 websockets 모듈, 브라우저측엔 표준 웹 소켓 API, 수) TIL
    깊은바다거북
    깊은바다거북

    티스토리툴바