我正在嘗試使用套接字將我的 HTML 前端連接到節點 js 后端

Question

我正在嘗試連接我的 html 前端來處理我前端的 socket.on 事件。 我的 nodejs 服務器在 5858 端口上運行。 我正在嘗試在同一端口上運行 socketio 但它沒有連接。 我的 nodejs 代碼在下面

const express = require('express');
const app = express();

const connectdb = require('./db/connect.js');
const port = process.env.PORT || 5858
const DATABASE_URL = "mongodb://localhost:27017";
const server = require('http').createServer(app);

const io = require('socket.io')(server , {

  cors: {
    origin: false,
    withCredentials: false
  }
}).listen(server);


//connection to database
connectdb(DATABASE_URL);

//  apply to all requests
app.use(cors())
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });
// app.use(express.limit('50M'));
app.use(bodyParser.json())  //Body Parser MiddleWare
app.use(express.json())



io.on('connection', (socket) => {
    console.log("new connection")
    socket.on('otpnumberevent', (data) => {
        console.log(data);
        let invid = data.id
           
invoicesModel.findOneAndUpdate(
  invid,
    data,   
  {
    "fields" : {"otpverified" : 1},
   "new": true 
  }
).exec((err , doc) =>{
            console.log(doc)
            if (err) {
                let response = {
                  message: "Failed",
                  doc: err
                }
                io.emit('messageSent', response)
              }
              else {
                let response = {
                  message: "Success",
                  doc: doc
                }
                
                io.emit('getotpresponse', response)
              }
    
            });
       
    });

    
  });

app.get('/' , (req , res) => {

    res.send("Welcome to Dma backend");
});



server.listen(port, () => {
  console.log('Server listening at port %d', port);
});

從前端開始，我使用帶有 .php 擴展名的 html 代碼，因此我使用在線套接字 CDN 連接套接字，我的前端代碼在這里。

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js" integrity="sha512-YeeA/Qxn5hYdkukScTCNNOhTrv1C2RubAGButJ1rmgQwZf/HdRaCGl+JAVkqsqaNRaYNHdheiuKKuPf9mDcqKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

                  var socket = io('http://localhost:5858', { transports: ['websocket', 'polling', 'flashsocket'] }); //socket connection code, my nodejs server is running on 5858 port
           socket.on('getotpresponse' , (data) =>{
            console.log(data);
               if(data.doc.otpverified == "Yes"){

                        swal({
                            title: "Success!",
                            text: "Otp verification Successfull",
                            icon: "success",
                            button: "Okay!",
                         }).then(function() {
                            location.reload(true);
                              });

                    }else{
                         swal({
                            title: "Failed!",
                            text: "OTP verification failed!",
                            icon: "error",
                            button: "Okay!",
                         });
                    }
           })

                })
    });

每當我嘗試從前端連接時，我都會在控制台屏幕上收到此錯誤。

我已經嘗試了一切。 在上面的代碼中可以看到，在套接字連接中添加了 CORS。 仍然遇到同樣的問題

Answer 1

將 cors -> origin 更改為 true

const io = require('socket.io')(server , {

  cors: {
    origin: true,
    withCredentials: false
  }
}).listen(server);

如果沒有解決，請執行以下操作：

1. 檢查套接字是否連接到與 nodejs 服務器相同的端口。
2. 如果套接字連接到與節點服務器相同的端口，請檢查套接字連接上是否啟用了 CORS。
3. 如果啟用了CORS，檢查headers是否設置正確，如origin、X-Requested-With、Content-Type、Accept。
4. 如果標題設置正確，請檢查套接字是否正確。 該事件已在前端正確配置。
5. 如果插座。 如果配置正確，能否請您檢查一下后台的invoice model.findOneAndUpdate函數是否配置正確？
6. 如果 invoice model.findOneAndUpdate 函數配置正確，那么檢查 io. Emit 函數在后端配置。
7. 如果 io. Emit 函數配置正確，然后檢查socket 是否正確。 該事件已在前端正確配置。
8. 如果插座。 如果事件配置正確，請檢查前端是否配置了交換功能？
9. 您能否檢查交換功能的位置是否正確配置？ 前端正確配置了重新加載功能。
10. 如果位置。 重新加載功能已正確配置，然后問題應該得到解決。