230101 [ERROR] emit을 읽을 수 없다

오류내용

Uncaught TypeError: Cannot read properties of undefined (reading 'emit')

오류과정

//클라이언트 웹소켓 연결 코드 파일
export const registerNewUser = (username) => {
  console.log(username);
  console.log(socket.emit)
  socket.emit('newUser', {
    username: username,
    socketId: socket.id
  });
}
//registerNewUser함수를 사용하는 컴포넌트
  const handlerJoinButton = () => {
    dispatch(dashboardActions(username));
    history.push('/dashboard');
    registerNewUser(username);

버튼을 누를 때 오류가 발생

해결과정

버전 이슈

• 현재 4버전 이고 1부터 4까지 지우고 다시 설치 해봐도 안됨

  "dependencies": {
  "express": "^4.18.2",
  "socket.io": "^4.5.4"
  }

This 이슈 바인딩을 하라는 솔루션

• This 이해도가 완벽하지는 않지만 오류코드들이 클래스형 컴포넌트이고 일반함수가 아닌 화살표함수를 쓰기 때문에 패스

레퍼렌스에 Packge.json을 보니 4버전은 같지만 fix버전이 다른걸 알았다

• socket.io 공식문서 가서 보니 react나 redux에 비해서 어렵다
  Client쪽을 보니 import 하는 부분부터 다르다

해결

//Before
import socketClient from 'socket.io-client'
const SERVER = 'http://lacalhost:5500/'

let socket

export const connectWithWebSocket = () => {
    socket = socketClient(SERVER)
  
    socket.on('connection', (socket) => {
        console.log('succesfully connected with wss server')
        console.log('socket.id')
      })
    }

//After
import {io} from 'socket.io-client';

export let socket = io("http://localhost:5500", { transports: ["websocket"]});
export const initSocketConnection = () => {
  return socket.connect();
};