Atrix의 웹 개발 및 삽질 블로그 Atrix의 웹 개발 및 삽질 블로그

버전 정보Next.js : 14.2.5ws : 8.18.0 구조App Router 이번에는 채팅 서비스를 구현 해보려고 한다.이전에 블로그에 기술했던 socket.io가 아닌 ws로 websocket 통신을 구현해보았다. 먼저 필요한 라이브러리들을 설치해준다.npm install ws bufferutil utf-8-validate※ 여기서 bufferutil을 설치하지 않으면 서버쪽에서 아래와 같은 오류가 발생한다.TypeError: bufferUtil.unmask is not a function 아래는 서버 및 클라이언트 측 코드이다.서버 코드// app/api/ws/route.tsimport { NextResponse } from 'next/server'import { WebSocketServer, ..

클라이언트 버전 정보 Next.js : 13.4.9 socket.io : 4.7.1 socket.io-client: 4.7.1 서버 버전 정보 node.js : 18.12.0 express : 4.18.2 socket.io : 4.7.1 Next.js로 여러 웹 프로젝트를 개발하던 중 이번엔 websocket을 사용해보기로 했다. 먼저 websocket이 무엇인지부터 알고 넘어가는 것이 중요하다. 기존 웹은 단방향 통신이며 필요시에 데이터를 송/수신 할 수 있다. 그에 비해 websocket은 서버와 클라이언트간에 실시간으로 양방향 통신을 하게 해주는 녀석이다. 간단히만 말하자면 이런 것이고, 자세한 개념은 구글에 셀 수도 없이 널렸으니 개념이 이해될 때까지 찾아보기를 바란다. socket 통신을 위해 ..