[Feat] : WS

[wochae]

웹소켓 문서

[wochae]

installing dependencies

npm i --save @nestjs/websockets @nestjs/platform-socket.io

creating a gateway module

nest -g module gateway

[wochae]

Postman의 WebSocket Request 이용하기

이 곳에서 내 로컬호스트와 포트 값을 설정하고 맨 처음 리스닝을 하는 코드와 잘 연결되는지 확인한다. 이벤트 네임에는 'newMessage' 를 넣었다. 그리고 New Message 라고 써있는 Context 에 아무 내용을 작성하고 전달하면 지금 내 서버에 컨솔에 전달된 것을 알 수가 있다.

[wochae]

JSON 타입으로 바꿔주고

{
    "msg" : "Hello, World"
}

뭔가 irc 에 메시지 클래스와 비슷한 느낌

[wochae]

Sending data part,

[wochae]

Define a property called server, we're gonna type annotate the Server that Decorator attaches the native websocket server to a given property which's going to be this property

[wochae]

Created another connection to the ws server, gonna go over to this event tab, specify the name of the event that could treat them to be separated. 'New Message' send, receive to client that are listening to with the specific, then consume that Message.

[wochae]

여태까지 개요, 포스트맨을 통해서 socket I/O Request 를 만들었고 해당 서버에 특정 이벤트를 보내면, 서버에 구현된 이벤트 처리를 통해 특정 리스닝 클라이언트에게 메시지를 전달해준다. 그게 연결되어 해당 리스닝을 하고 있는 상태여야만 전달될 수 있다.

[wochae]

socket I/O client Library 설치

npm i socket.io-client

[wochae]

어. 끝났다. 제로초 Nest.js + Socket.io(EventsGateway) 강좌 시작

[wochae]

저번에 nest -g module websocket 이 안됐는데 다른 예제를 보니

nest g mo websockets

로 대신 하면 되더라

[wochae]

여태까지 배웠던 것들 프론트와 피어 리뷰

MVC 디자인 패턴 계층형 아키텍쳐 클라이언트가 요청 시 서버가 반응하는 과정 의존성 주입 모듈 단위, 엔티티, 데이터베이스

[wochae]

react 라이브러리 설치

npm i socket.io-client @emotion/styled className

이걸 6ew 안에 설치한다.

[wochae]

서버와 클라이언트 연결 성공, 이제 회원가입해서 유저 생성, 그 유저 네임을 가져다가 채팅에 데이터 바인딩을 할 수 있도록 설계

[wochae]

왜 모듈이 못 찾는지 알았음

[wochae]

스키마를 직접 생성했고, 이전에 유저 생성할 때 받는 파라미터들을 요구하는데 이것들을 분리해놓을 예정

[wochae]

자주하는 실수, 모듈에 자꾸 레퍼지토리 빼먹음

[wochae]

socket.io - namespace 사용하기