강의 외 질문드립니다. react socket.io

[방서빈]

안녕하세요 

제가 리액트로해서 채팅을 구현하고 있는 중입니다 

통신이 안되고 있어서 혹시 문제점이 무엇인지 알 수 있을까요? 아래에 코드 작성합니다

// server 코드

const chatDao = require('../models/chatDao');
const { catchAsync } = require('../utils/error');
​
const socketMessage = (io, userId) => {
  io.on('connection', (socket) => {
    console.log('A User Connected.');
​
    socket.on(
      'create_room',
      catchAsync(async (postId, callback) => {
        const room = await chatDao.createRoom(userId, postId);
        socket.join(room.raw.insertId);
        callback(room.raw.insertId);
      })
    );
​
    socket.on(
      'enter_room',
      catchAsync(async (roomId, callback) => {
        socket.join(roomId);
        callback(roomId);
      })
    );
​
    socket.on('new_text', async (content, roomId, callback) => {
      await chatDao.createChat(userId, content, roomId);
      socket.to(roomId).emit('new_text', content);
      callback(content);
    });
​
    socket.on('disconnect', () => {
      console.log('접속이 해제되었습니다', ip, socket.id);
      clearInterval(socket.interval);
    });
​
    socket.on('error', (error) => {
      console.error(error);
    });
​
    socket.on('send', (data) => {
      console.log(data);
      socket.emit('reply', {
        data,
      });
    });
​
    socket.interval = setInterval(() => {
      socket.emit('news', 'Hello Socket.IO');
    }, process.env.SOCKET_PORT);
  });
};
​
module.exports = { socketMessage };


// 프론트엔드 코드

import React, { useState, useContext } from 'react';
import io from 'socket.io-client';
import './chat.css';
import { MenuContext } from '../../components/Nav/MenuProvider';
import { useLocation } from 'react-router-dom';

const Token = localStorage.getItem('accessToken');
const socket = io.connect('http://192.168.0.194:4000', {
 withCredentials: true,
 extraHeaders: {
 Authorization: `Bearer ${Token}`,
},
});
console.log(Token);
socket.on('connection', () => {
 console.log('Connected to server');
});

const Chat = () => {
const location = useLocation();
const roomId = location.state?.setRoomId;
const [useRoomId, setUseRoomId] = useState(roomId ? roomId : null);
 const [socketNew, setSocketNew] = useState(null);
const [searchData, setSearchData] = useContext(MenuContext);
 console.log(searchData);

const handleCreateRoom = () => {
 socket.emit('create_room', searchData, ({ searchData, roomId }) => {
 console.log(`Joined room ${roomId}`);
setUseRoomId(roomId);
});
 socket.emit('send_message', { message: 'Hello' });
};

 const handleJoinRoom = roomId => {
 socket.emit('enter_room', roomId, roomId => {
 console.log(`Joined room ${roomId}`);
 setRoomId(roomId);
 });
 };

 const handleNewText = content => {
 socket.emit('new_text', content, roomId, content => {
 console.log(`Sent message: ${content}`);
 });
 };
return (
<div className="h-screen pt-36">
<button onClick={handleCreateRoom}>테스트</button>
<button onClick={() => handleJoinRoom(roomId)}>이동2</button>
 <input id="input-text" type="text" onKeyDown={onCheckEnter}></input> 
<button onClick={handleCreateRoom}>next</button> 
</div>
 );
};

export default Chat;

[codingapple]

전부 잘 실행되나 의심스런부분에서 출력부터 해봅시다

[방서빈]

전부 잘 실행되었다는 말씀은 서버에 연결하셨다는 ㄷ말씀이실까요?!

[방서빈]

왜 전 서버에 연결이 안될까요?! 이유가 무엇일까요???

[codingapple]

https://socket.io/how-to/use-with-react
이런거 따라해보거나 socket io cors 옵션같은것도 켜봅시다

[방서빈]

서버연결은 확인했습니다 그런데 소켓연결이 안된다고 출력됩니다 무엇이 문제일까요?

[codingapple]

.on 이벤트리스너들은 useEffect 안에 넣어봅시다

[방서빈]

감사합니다!

[글쓴이]

글