套接字IO发出两次事件

提问者：小点点

套接字IO发出两次事件

情况:

我正在设置一个带有socket.io的express服务器和一个使用ReactJS的客户机。这是我的服务器:

//... another requirement
const socket = require("./socket");

const app = express();
const server = http.createServer(app);
const port = process.env.PORT || 3000;

//... some parsers ...

routes(app);
socket(server);

server.listen(port);
console.log("Server started on: " + port);

这是我的插座:

const socketIO = require("socket.io");

const socket = server => {
  const io = socketIO(server);
  const chat = io.of("/chat");
  chat.on("connection", client => {
    console.log("User started chat!");
    client.on("disconnect", () => {
      console.log("User left chat!");
    });

    client.on("sendMessage", msg => {
      const { id, text } = msg;
      console.log(id + " says: " + text);
      client.broadcast.emit("incomingMessage", {
        //... response data
      });
    });
  });
};

在客户端中，聊天页面组件将处理向socket发送消息和从socket接收消息:

//_ChatBox in Chat Page
const _ChatBox = (/*props*/) => {
  const chat = io("http://localhost" + ":3000/chat");

  chat.on("incomingMessage", message => {
    console.log("Receive message");
    //...handle income message
  });

  const sendMessageToSocket = (data) => {
    chat.emit("sendMessage", data);
  };

  return ( /*JSX*/);
};

问题:

每次用户访问聊天页面时，socket都会接收到连接事件，并将user started Chat！记录到控制台一次，但实际上，它已经记录了两次，也就是说socket已经处理了两次连接事件。

当_chatbox接收到消息时，它将记录receive message并显示该消息，但它所做的是记录该消息两次并显示该消息两次，这也意味着套接字已经发出incomeMessage事件两次。

我想要的:我想要套接字只处理这些事件一次。

共2个答案

匿名用户

您的组件似乎呈现了两次，因此调用const chat=io（“http://localhost”+“:3000/chat”）；两次，给出两条连接消息。

您可以使用UseEffect()钩子只在第一次呈现时连接。传入一个空数组作为第二个参数意味着该效果将只被调用一次:

const _ChatBox = (/*props*/) => {

  useEffect(()=>{
     const chat = io("http://localhost" + ":3000/chat");

    chat.on("incomingMessage", message => {
      console.log("Receive message");
      //...handle income message
     });

     const sendMessageToSocket = (data) => {
      chat.emit("sendMessage", data);
     };
   }, []);


  return ( /*JSX*/);
};

匿名用户

**在index.js文件中创建套接字，并将其作为道具传递给根应用程序组件，如下所示:-**

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import socketIOClient from "socket.io-client"
var socket = socketIOClient('http://localhost:9000');
ReactDOM.render(
  <React.StrictMode>
     <App socket={socket} />
  </React.StrictMode>,
document.getElementById('root')
);

现在使用这个套接字发出如下事件:-

import React from "react"
import './App.css';
class App extends React.Component {
componentDidMount() {
   this.props.socket.emit('test')
}
render() {
  return (
     <div>
        hello
    </div>
  );
}
}
export default App;