Socket.io-client 未连接到 socket.io 服务器反应和节点(快递)

Posted

技术标签:

【中文标题】Socket.io-client 未连接到 socket.io 服务器反应和节点(快递)【英文标题】:Socket.io-client is not connecting to socket.io server react and node(express) 【发布时间】:2021-04-21 23:24:57 【问题描述】:

我尝试使用以下代码连接到 socket.io-client:

客户:

import queryString from 'query-string';
import React,  useEffect, useState  from 'react';
import io from 'socket.io-client';

let socket;

const Chat = (location) => 

const [name, setName] = useState("");
const [room, setRoom] = useState("");
const EP = 'http://localhost:5000/';

useEffect(() =>
    const name , room = queryString.parse(location.search);

    socket = io(EP);

    setName(name);
    setRoom(room);

    console.log(socket);
,[EP, location.search])

return(
    <h1>helloooooooooooooo name welcome to room</h1>
)


export default Chat;

服务器:

const express = require('express');
const socketio = require('socket.io');
const http = require('http');
const router = require('./router/router');

const PORT = process.env.PORT ||5050;

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




//socket.io

io.on('connection', socket => 
console.log("we have a new user!!!!!!!!!");

socket.on('disconnect', () =>
    console.log('User had left!');
)
)

// io.on('connection', socket =>  
//     console.log("we have a new user!!!!!!!!");

//     socket.on("disconnect", () => console.log("user is left"))        
//  );

app.use(router);

server.listen(PORT, () => console.log(`Server has started on $PORT`));

我没有从这个服务器套接字获取连接或断开控制台日志。 我遵循与 socke.io doc 相同的流程。

console message from browser, its showing disconnected true and connected false and no id

【问题讨论】:

【参考方案1】:

在浏览器中,WebSocket 对象不支持附加标头。如果您想添加一些标头作为某些身份验证机制的一部分,您可以使用transportOptions 属性。请注意,在这种情况下,标头不会在 WebSocket 升级请求中发送。

 // WILL NOT WORK in the browser
    const socket = new Socket('http://localhost', 
      extraHeaders: 
        'X-Custom-Header-For-My-Project': 'will not be sent'
      
    );
    // WILL NOT WORK
    const socket = new Socket('http://localhost', 
      transports: ['websocket'], // polling is disabled
      transportOptions: 
        polling: 
          extraHeaders: 
            'X-Custom-Header-For-My-Project': 'will not be sent'
          
        
      
    );
    // WILL WORK
    const socket = new Socket('http://localhost', 
      transports: ['polling', 'websocket'],
      transportOptions: 
        polling: 
          extraHeaders: 
            'X-Custom-Header-For-My-Project': 'will be used'
          
        
      
    );

信用:Engine.IO client

【讨论】:

【参考方案2】:

在客户端,在 useEffect 内部而不是

socket = io(EP);

到这里

socket = io.connect(EP , 
        "force new connection" : true,
        "reconnectionAttempts": "Infinity", 
        "timeout" : 10000,                  
        "transports" : ["websocket"],
        withCredentials:true,
            extraHeaders:
                "my-custom-header": "abcd"
            
    );

i got this solution from this question

【讨论】:

【参考方案3】:

从 Socket.IO v3 开始,您需要显式启用跨域资源共享 (CORS)。 https://socket.io/docs/v3/handling-cors/

// server-side
const io = require("socket.io")(httpServer, 
  cors: 
    origin: "https://example.com",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  
);

// client-side
const io = require("socket.io-client");
const socket = io("https://api.example.com", 
  withCredentials: true,
  extraHeaders: 
    "my-custom-header": "abcd"
  
);

【讨论】:

非常感谢,我尝试了很多方法,我仔细阅读了套接字文档,但不幸的是仍然没有工作。仍然没有连接。

以上是关于Socket.io-client 未连接到 socket.io 服务器反应和节点(快递)的主要内容,如果未能解决你的问题,请参考以下文章

使用 socket.io-client.java 库连接到 socket.io 命名空间

带有 OAuth access_token 的 socket.io-client io.connect 查询字符串

Socket.IO 客户端如何连接?

Socket.IO-client.java 反复断开重连

Angular 2:错误 TS2307:找不到模块“socket.io-client”

无法在 Angular 项目中导入 socket.io-client