我部署应用程序后，我的 websocket 无法工作

问题描述 投票：0回答：1

所以我的前端处于 React 状态，并在 Nodejs 中进行了后端支持。我已在 Vercel 上部署了后端和前端。 本地应用程序运行得很好。我正在用前端的端点替换服务器部署的链接。 我的问题： 我在我的应用程序上没有收到任何消息，并且在我进入检查后收到多个 websocket。

its the server's log of vercel

此外，我已经尝试过cors，并且我在下面提供了我的服务器代码和前端代码。我遇到了问题...请任何人帮助我 另请参阅部署后的前端链接 https://galacto-chat-app.vercel.app/ 也可以查看网络选项卡

如果您可以帮助我，请同时查看完整的代码存储库 https://github.com/vaibhav211002/chat

前端代码

import { user } from '../Join/Joined'
import socketIO from "socket.io-client";
import "./chat.css";
// import sendlogo from '../../../images/sendlogo.jpeg'
import Messages from '../messages/Messages';
import ScrollToBottom  from "react-scroll-to-bottom";
import { Link } from 'react-router-dom';



const ENDPOINT = 'http://localhost:4500/';
let socket ; 




const Chat = () => {

    const [id, setid] = useState('');
    const [messages, setMessages] = useState([]);
    const [endmsg, setendmsg] = useState([]);

    const send = ()=>{
        const message = document.getElementById('chatInput').value ;
        document.getElementById('chatInput').value = "";
        socket.emit('message',{message,id})
        
    }

    
 socket = socketIO(ENDPOINT,{transports:['websocket']});

useEffect(()=>{
    socket.on('connect',()=>{
        // alert('connected');
        setid(socket.id);
        console.log('we are at the client side');
    })

    socket.emit('joined',{user});

    socket.on('Welcome',(data)=>{
        setMessages(currentMessages => [...currentMessages, data]);
        console.log(data.user , data.message);
    })

    socket.on('userjoined',(data)=>{
        setMessages(currentMessages => [...currentMessages, data]);
        console.log(data.user,data.message);
    })


    socket.on('leave',(data)=>{
    setMessages(messages => ([...messages,data]));
        console.log(data.user,data.message);
    })
    console.log(messages);



    return ()=>{

        socket.emit('disconnect');
        socket.off();

    }
},[])

useEffect(() => {

    socket.on('sendmessage',(data)=>{
        console.log(data);
        setMessages(currentMessages => [...currentMessages, data]);
        console.log(data.user,data.message,data.id);

    })

  return () => {
    socket.off();

  }
}, [])




  return (
    <div className='chatPage'>
        <div className='chatContainer'>
            <div className='header'>
                <h2>Chat-ting</h2>
                <a href='/'><button className='btnclose' type="button">X</button></a>
                <span className='headname'>Hello , {user}</span>
            </div>
            <ScrollToBottom  className='chatBox'>
                {messages.map((item,i)=> <Messages user={item.id===id?'':item.user} message={item.message} cls={item.id===id?'right':'left'} />)}                
            </ScrollToBottom >
            <div className='inputBox'>
                <input onKeyDown={(event)=> event.key === 'Enter' ? send() : null} type='text' id='chatInput' />
                <button onClick={send} className='sendBtn'>send</button>
            </div>

        </div>
        <div className='footer'>This website is in Development Phase . Stay tuned for updates.For any suggestion Mail: <a href='[email protected]'>[email protected]</a></div>

    </div>
  )
}

export default Chat

支持代码

const http = require('http');
const https = require('https');
const express = require('express');
const cors = require('cors');
const socketIO = require('socket.io');
const { log } = require('console');

const app = express();
const server = http.createServer(app);

const users = {};

app.use(cors());

const io = socketIO(server);
port = 4500 || process.env.PORT ;

io.on("connection",(socket)=>{
    console.log("new connection");

    socket.on('joined',({user})=>{
        users[socket.id] = user;
        console.log(users);
        console.log(`${user} has joined`);
        socket.broadcast.emit('userjoined',{user:"Admin",message:` ${users[socket.id]} has joined`});
        socket.emit('Welcome',{user:"Admin : ",message:"Welcome To The Chat "})

    })

    socket.on('message',({message,id})=>{
        console.log(message," ",id);
        console.log(users[socket.id]);
        io.emit('sendmessage' ,{user:users[id],message,id});
    })

    socket.on('disconnect',()=>{
        if(users[socket.id]){
            socket.broadcast.emit('leave' , {user:"Admin", message:`${users[socket.id]} has left`})
        }
        else{
            delete users[socket.id];
        }
        
        console.log(`${users[socket.id]} Left `);
    })


})

app.get("/",(req,res)=>{
    res.send("working node.js server")
})

server.listen(port,()=>{
    console.log("server is working");
})

jason 前端

{
  "name": "chatting_application",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "path": "^0.12.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.2",
    "react-scroll-to-bottom": "^4.2.0",
    "socket.io-client": "^4.7.4"
  },
  "devDependencies": {
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.4"
  }
}

杰森支持

{
  "name": "serverstat",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "nodemon": "^3.1.0",
    "socket.io": "^4.7.4"
  }
}
javascript reactjs websocket socket.io
1个回答
0
投票

我不确定你的确切问题是什么，但我确实看到了一些我会做不同的事情。我将继续发布我将如何做，也许它对你有用。

首先，v4.x 的 Socket.io 文档 使用 ES 模块，默认导出不是 

Server
。如果可以的话，我会将其更改为 ES 模块语法（导入）。我不熟悉将 
require
与 socket.io 一起使用。

其次，创建套接字实例时没有使用 

new
。

第三，在这种情况下不需要使用

http.createServer(app)
。使用 
app.listen()
返回一个您可以使用的服务器实例，以便创建您的 websocket。

后端代码

const express = require('express');
const cors = require('cors');
import { Server } from 'socket.io'; 

const users = {};
const port = process.env.PORT || 4500;

const app = express();
app.use(cors());


app.get("/",(req,res)=>{
    res.send("working node.js server")
})

const server = app.listen(port,()=>{
    console.log("server is working");
})


const io = new Server(server);


io.on("connection",(socket)=>{
    console.log("new connection");

    socket.on('joined',({user})=>{
        users[socket.id] = user;
        console.log(users);
        console.log(`${user} has joined`);
        socket.broadcast.emit('userjoined',{user:"Admin",message:` ${users[socket.id]} has joined`});
        socket.emit('Welcome',{user:"Admin : ",message:"Welcome To The Chat "})

    })

    socket.on('message',({message,id})=>{
        console.log(message," ",id);
        console.log(users[socket.id]);
        io.emit('sendmessage' ,{user:users[id],message,id});
    })

    socket.on('disconnect',()=>{
        if(users[socket.id]){
            socket.broadcast.emit('leave' , {user:"Admin", message:`${users[socket.id]} has left`})
        }
        else{
            delete users[socket.id];
        }
        
        console.log(`${users[socket.id]} Left `);
    })
})

接下来，对于前端的东西，如果可以的话，我会尝试使用

import
。 
io
不是默认导出，因此它需要如下所示：

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

另外，我不确定您的前端和后端之间的具体设置是什么，但我怀疑您真正的问题是前端上的

ENDPOINT
。

当您从 

app.listen()
返回的服务器实例创建套接字时，您可以让套接字和服务器侦听同一端口，在这种情况下，您的 
ENDPOINT
可以只是“/”。这非常有用，因为如果端口发生变化等，您不需要设置环境变量。

祝你好运，希望这会有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.