Socket.io 사용시 Client 와 Server 동시에 개발하기

보통 client 가 server 에 접속시, path 모듈을 이용해 index.html 이 포함된 폴더를 client 하게 넘기게된다.

이렇게 하기위해서는 결국 client 에서 build 를 해놔야하는데,

개발중에는 매번 빌드하는것이 매우 번거러운 일이다.

따라서 개발시에는 Backend 서버와 FrontEnd 서버 (Vite 같은것) 가 동시에 실행된 상황에서,

FrontEnd 속 socket.io-client 는 BackEnd 서버로 접속할수있게 해야한다.

 

Vite 같은경우 npm run dev 를 하였을때, 기본적으로 3000 으로 접속하게된다.

 

Backend 서버가 8000 포트를 사용하고, Frontend 서버가 3000 을 사용하고있다고 해보자.

/* back_end_server.js */

const SERVER_PORT = 8000

const express   = require ('express')
const io        = require ('socket.io')(express().listen(SERVER_PORT))

/* client 가 접속한뒤 실행될 함수들 */
io.on('connection', (socket) => {

    /* 접속한 client 에게 message 보개기 */
    socket.emit ('ServerEvent', 'Hello Client') 

    /* 접속한 client 로 부터 message 받기 */
    socket.on   ('ClientEvent', (clientMessage) => console.log(clientMessage)) 

})

개발시 Backend 서버의 코드는 따로 달라질것이 없다.

중요한건 FrontEnd 서버 코드이다.

/* front_end_server.js */

import io from 'socket.io-client'

const socket = io('http://localhost:8000', { transports : ['websocket', 'xhr-polling'] })

socket.emit ('ClientEvent', 'Hello Server!')
socket.on   ('ServerEvent', (serverMessage) => console.log(serverMessage))
socket.on   ("connect_error", (err) => console.log(err) })

위에 보이는것처럼, io 안에 인자로 넘기는 내용이 제일 중요하다.

첫번째 인자로 url 을 넘기게되는데, 이때 BackEnd 서버 js 파일에서 내가 할당한 포트 8000을 포함한

전체 url "http://localhost:8000" 을 넘겨줘야한다.

이게 끝이 아니라, 2번째 인자까지 꼭 넘겨줘야 정상적으로 실행이된다.

socket.on ("connect_error") 를 사용하면, 잘 접속 되었는지 확인할수있다.

err 가 콘솔에 찍히지않는다면 정산적으로 백앤드 서버에 접속이 된것이다.

 

위와 같이 코드를 작성하였다면, 프론트앤드를 굳이 빌드하지않고도, 양쪽다 개발을 실시간으로 할수있다.

 

정리를 하면,  백앤드 서버가 8000 이고, 클라이언트 서버가 3000 일때 (Vite),

클라이트언트 서버안에 socket instance 에서 8000 으로 접속을 하는것이다. (io 의 인자로 넘겨서)