nextjs에서 socket.io 배포 후 오류..

Question

안녕하세요. 코린이입니다. 오늘 제가 지원하려는 곳 마감이라 빨리 만들어야하는데 처음 사용하는 것들이라 너무 안풀리네요. npm run dev로 로컬호스트에선 실시간 채팅기능이 잘되는데 vercel에 배포 후 채팅 기능이 먹통입니다.혼날각오는 했습니다... 제발 알려주십쇼 ㅜ// app/chat/chatRoom/ChatRoom.js 'use client' import axios from &#34;axios&#34;; import { useCallback, useEffect, useState } from &#34;react&#34;; import SocketIOClient from &#34;socket.io-client&#34;; export default function ChatRoom({session, chatRoomId, result}) { const [sendMessage, setSendMessage] &#61; useState(&#34;&#34;); const [connected, setConnected] &#61; useState(false); const [joinedRoom, setJoinedRoom] &#61; useState(false); // 방에 조인 여부 상태 추가 // const [chat, setChat] &#61; useState(result); const chat &#61; result let [newChat, setNewChat] &#61; useState([]) useEffect(()&#61;>{ // connect to socket server const socket &#61; SocketIOClient.connect('https://carrot-plum.vercel.app', { path: &#34;/api/chat/socket&#34; }); // log socket connection socket.on(&#34;connect&#34;, () &#61;> { console.log(&#34;SOCKET CONNECTED!&#34;, socket.id); setConnected(true); socket.emit(&#34;join&#34;, { room: chatRoomId }); console.log(&#34;join&#34;); setJoinedRoom(true); console.log(joinedRoom); }); // 방에 조인 여부 확인 socket.on(&#34;joinedRoom&#34;, () &#61;> { }); // update chat on new message dispatched socket.on(&#34;message&#34;, (message) &#61;> { // newChat.push(message); // setChat((prevChat) &#61;> [...prevChat, message]); newChat.push(message); setNewChat([...newChat]); }); // socket disconnect on component unmount if exists if (socket) return () &#61;> socket.disconnect(); }, []) const sendMessageHandler &#61; useCallback( (event) &#61;> { setSendMessage(event.target.value); }, [sendMessage] ); const enterKeyPress &#61; (event) &#61;> { if (event.key &#61;&#61;&#61; &#34;Enter&#34; && !event.shiftKey) { // send message event.preventDefault(); submitSendMessage(event); } }; const submitSendMessage &#61; async ( event ) &#61;> { event.preventDefault(); if (sendMessage) { const message &#61; { user: session.user.name, userId : session.user._id, chatRoomId : chatRoomId, sendId : session.user._id, message: sendMessage }; const response &#61; await axios.post(&#34;/api/chat&#34;, message); setSendMessage(&#34;&#34;); } }; return ( (생략) ); } export{ ChatRoom} ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ // pages/api/chat/index.js import { connectDB } from &#34;&#64;/util/database&#34;; export default async (req, res) &#61;> { if (req.method &#61;&#61;&#61; &#34;POST&#34;) { const message &#61; req.body; res.socket.server.io.emit('message', message); res.status(201).json(message); } else { res.status(405).json({ success: false, message: 'index.js에서 실패' }) } }; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ // pages/api/chat/socket.js import { Server } from &#34;socket.io&#34;; // import { Server } from &#34;http&#34;; export const config &#61; { api: { bodyParser: false, }, }; export default async (req, res) &#61;> { if (!res.socket.server.io) { const httpServer &#61; res.socket.server; const io &#61; new Server(httpServer, { path: &#34;/api/chat/socket&#34;, cors: { origin: &#34;https://carrot-plum.vercel.app&#34;, methods: [&#34;GET&#34;, &#34;POST&#34;], allowedHeaders: [&#34;Content-Type&#34;], credentials: true, }, }); // Connection 이벤트 리스너 등록 io.on(&#34;connection&#34;, (socket) &#61;> { console.log(&#96;A user connected: ${socket.id}&#96;); // Join 이벤트 처리 socket.on(&#34;join&#34;, (data) &#61;> { socket.join(data.room); console.log(&#96;Socket ${socket.id} joined room ${data.room}&#96;); // 클라이언트에게 방에 조인되었다는 신호 전송 socket.emit(&#34;joinedRoom&#34;); // 클라이언트가 조인한 방의 정보 확인 const joinedRooms &#61; Array.from(socket.rooms); console.log(&#96;Socket ${socket.id} joined rooms: ${joinedRooms}&#96;); }); // Disconnect 이벤트 리스너 등록 socket.on(&#34;disconnect&#34;, () &#61;> { console.log(&#96;A user disconnected: ${socket.id}&#96;); }); // 메시지 이벤트 처리 socket.on(&#34;message&#34;, (message) &#61;> { // 클라이언트가 조인한 방으로 메시지 브로드캐스트 socket.to(message.chatRoomId).emit(&#34;message&#34;, message); }); }); res.socket.server.io &#61; io; } res.end(); };

kenu,전독시 · Answer

vercel에 백엔드 지원이 되나요?

킁킁탐정 · Answer

다음의 이유로 사용 불가능합니다.https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections

nextjs에서 socket.io 배포 후 오류..

2개의 답변

#socket.io 목록