首页 > 解决方案 > 指定路径服务器选项时,Socket.io-client 未连接到服务器

问题描述

我有一express 4台服务器正在尝试与之集成Socket.IO

如果我io.attach(serverInstance)在服务器和io.connect("http://localhost:3002")反应客户端上使用socket.io-client连接建立并且服务器记录类似socket connection active, id: 3IjhKYkpY19D6nWHAAAB, client ip: ::ffff:127.0.0.1.

但是当我通过{path: "/socket/socket.io"}asio.attach(serverInstance, {path: "/socket/socket.io"})并且io.connect("http://localhost:3002", {path: "/socket/socket.io"})没有记录任何内容时,即没有建立连接。我最近开始学习socket.io,所以我不太了解。

我希望应该在localhost:3002/socket而不是请求传入的套接字连接localhost:3002/

服务器端:

class SocketInterface {
  constructor() {
    this.server = undefined; // will hold the server instance once defined.
    this.io = socket(); // referencing socket interface.

    this.getServerReference = this.getServerReference.bind(this);
    this.ioDotOn = this.ioDotOn.bind(this);
   }

  /**
   * this method defines the sever reference once the server starts.
   * @param {http.Server} server: reference to the http server.
   */
  getServerReference(server) {
    this.server = server;
    this.io.attach(server, {path: "/socket/socket.io"});
  }

  /**
   * this method executes io.on()
   */
  ioDotOn() {
    if (this.server) {
      this.io.on("connection", socket => {
        // when connection is established
        const ip =
          socket.handshake.headers["x-forwarded-for"] ||
          socket.conn.remoteAddress;

        console.log(
          `socket connection active, id: ${socket.id}, client ip: ${ip}`
        );

        // when connection breaks
        socket.on("disconnect", () => {
          console.log("user gone");
        });
      });
    } else throw new Error("Server is undefined");
  }
}

server.js我需要这个类

const socketInterface = require("./socket/socket-io");
let server = undefined;

// first connect to local db.
MongoInterface.mongoConnect(err => {
  if (err) {
    // if error, occurs terminate.
    console.log(err);
    process.exit(1);
  } else {
    // if connected to MongoDB, get a reference to the taskDbOps singleton object.
    console.log("Connected to MongoDB server");

    // start the server and store a reference to the server.
    server = app.listen(config.PORT, err => {
      if (err) console.log(err);
      else console.log("Application Server Running on Port: ", config.PORT);
    });

    // starting the socket interface.
    if (server) {
      socketInterface.getServerReference(server);
      socketInterface.ioDotOn(); // socket service.
    }
  }
});

反应客户端 它是一个模拟客户端,具有这样api.js的套接字连接: api.js

import io from "socket.io-client";

function x() {
  const socketConn = io.connect("http://localhost:3002", {
    path: "/socket/socket.io"
  });
}
export { x };

这是app.js这样导入的:

import React from "react";
import { x } from "./api";
import logo from "./logo.svg";
import "./App.css";

function App() {

  x(); //connecting to socket

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

我在用着socket.io 2.3

谢谢

标签: node.jsreactjsexpresssocketssocket.io

解决方案


const socketInterface = require("./socket/socket-io");

// first connect to local db.
MongoInterface.mongoConnect(err => {
  if (err) {
    // if error, occurs terminate.
    console.log(err);
    process.exit(1);
  } else {
    // if connected to MongoDB, get a reference to the taskDbOps singleton object.
    console.log("Connected to MongoDB server");

    // start the server and store a reference to the server.
    // binding the server variable here resolves the problem
    let server = app.listen(config.PORT, err => {
      if (err) console.log(err);
      else console.log("Application Server Running on Port: ", config.PORT);
    });

    // starting the socket interface.
    if (server) {
      socketInterface.getServerReference(server);
      socketInterface.ioDotOn(); // socket service.
    }
  }
});

推荐阅读