react와 node.js로 웹소켓을 이용하여 채팅을 구현해보려고 하는데..ㅠ

Question

웹 개발은 거의 처음입니다.현재 react와 node.js로 간단한 실시간 채팅을 구현해보려고 socket.io를 사용하여 웹소켓을 써서 구현해보고자 하는데, 간단히 메시지를 입력하면 화면에 출력되게끔 하고 싶습니다.local환경에서 접속됬다는 로그조차 안뜨네요. react 실행하면 사이트 자체는 들어가지는데, 사이트 들어갈 때 콘솔에서 log가 뜨게끔 서버에서 작성했는데, localhost:3000에 들어가도 접속 되었다는 log조차 뜨질 않네요.어느 부분이 문제인 것일까요?-app.js 부분-import React, { useState, useEffect } from 'react'; import io from 'socket.io-client'; const socket = io.connect('http://localhost:3000'); // 서버 주소에 맞게 수정 function App() { const [message, setMessage] = useState(''); const [messages, setMessages] = useState([]); useEffect(() => { socket.on('message', (message) => { setMessages((prevMessages) => [...prevMessages, message]); }); }, []); const sendMessage = () => { socket.emit('message', message); setMessage(''); }; return (

왜 안되는거냐 진짜

{messages.map((msg, index) => (

{msg}

))}

setMessage(e.target.value)} />

); } export default App;-server.js 부분-const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIo(server); io.on('connection', (socket) => { console.log('A user connected'); socket.on('message', (message) => { io.emit('message', message); // Broadcast the message to all connected clients console.log('received message: ', message); }); socket.on('disconnect', () => { console.log('A user disconnected'); }); }); server.listen(5000, () => { console.log('Server is running on port 5000'); });포트번호를 이것저것 바꾸면서 재실행하고 하다보면 아주가끔 되기는 하는 것 같은데, 어느 때 되는지 조차 알 수 없는 상황입니다.답변해주시면 정말 감사하겠습니다.

houseinception · Answer

서버는 5000번 포트인데 클라이언트에서는 3000번 포트에 연결하고 있어서 안되는것 같아요

ᄋᄒ · Answer

const socket &#61; io.connect('http://localhost:3000'); 이부분 const socket &#61; io.connect('ws://localhost:3000');로 변경해보세요 https환경이라면 wss사용하시면 됩니다. 포트는 서버 포트와 동일하게 설정하시면 됩니다.

react와 node.js로 웹소켓을 이용하여 채팅을 구현해보려고 하는데..ㅠ

2개의 답변

Q&A 목록