8 글 보임 - 1 에서 8 까지 (총 8 중에서)
-
글쓴이글
-
2023년 3월 28일 16:43 #73912
방서빈참가자안녕하세요 제가 리액트로해서 채팅을 구현하고 있는 중입니다 통신이 안되고 있어서 혹시 문제점이 무엇인지 알 수 있을까요? 아래에 코드 작성합니다 // 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;
2023년 3월 29일 09:43 #74018
codingapple키 마스터https://socket.io/how-to/use-with-react 이런거 따라해보거나 socket io cors 옵션같은것도 켜봅시다
-
글쓴이글
8 글 보임 - 1 에서 8 까지 (총 8 중에서)
- 답변은 로그인 후 가능합니다.