Question

我目前正在编写一个带有 react 的餐厅订单跟踪应用。我打算使用 websockets 进行 2 路通信，因此所有连接的设备都可以共享相同的订单状态，并相互更新。我用 react 写前端，用 express 写后端。

在 App.jsx 中：

import "./App.css";
import React from "react";
import Button from "react-bootstrap/Button";

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

export default class App extends React.Component {
  componentDidMount() {
    this.socket = io("127.0.0.1:3001", {
      transports: ["websocket"],
      autoConnect: true,
    });
    this.socket.on("connect", () => {
      console.log("connected");
    });

    this.socket.on("close", () => {
      console.log("disconnected");
    });

    this.socket.io.open((err) => {
      console.log("opened");
    });
    console.log(this.socket.connected);
  }

  render() {
    return <Button onClick={() => console.log(this.socket)}>Click me!</Button>;
  }
}

在 index.js 中：

const io = require("socket.io")({ transports: ["websocket"] });
io.attach(3001);

let orders = {};
io.on("connection", (socket) => {
  console.log("New client connected");
  socket.on("connect_error", (err) => {
    console.log(`connect_error due to ${err.message}`);
  });
  socket.on("disconnect", () => {
    console.log("disconnected");
  });
});

每次刷新页面，节点控制台输出

New client connected
New client connected
disconnected

但是当我点击 React 应用中的按钮时，this.socket.connected 是 false。

我不知道为什么它连接了两次，或者为什么 this.socket.connected 总是错误的。

感谢任何帮助，谢谢

Socket.io 客户端两次连接到服务器，并立即断开连接（反应）

0 个答案: