Question

我正在尝试将socket.io合并到React应用程序中。当用户单击按钮时，我希望程序显示一个模式，通知所有其他用户该按钮已被单击。在我当前的实现中，我在server.js文件中设置了socket.io连接，并在其中一个组件文件中使用socket.io-client从服务器发送/侦听信息。

Server.js文件：

io.on("connection", function(socket) {
    console.log("Socket.io connection established");

    socket.emit("saved article", function(article){
        console.log("article saved");
        io.emit("saved article", article);
    });
});

组件文件：

const socket = io();

class Search extends Component {
    state = {
        topic: "",
        start: "",
        end: "",
        results: [],
        savedModalTriggered: false,
        articlesSaved: [] 
    };

    componentDidMount(){
        socket.on("saved article", article => {
            let articlesSavedCopy = this.state.articlesSaved;
            articlesSavedCopy.push(article.title);
            this.setState({savedModalTriggered: true, articlesSaved: articlesSavedCopy});
        });
    };

    saveOrUnsave = (index) => {
        API.saveArticle(this.state.results[index]).then(response => {
            const article = {
                title: response.data.title
            };
            socket.emit("saved article", article);
            this.reverseSaved(index, response.data);
        });
    };
};

运行代码时会出现以下问题：

1）当搜索组件安装时，程序会触发socket.on（＆＃34;保存文章＆＃34;），即使未调用saveOrUnsave函数，也会弹出通知模式。

2）经过一段时间后，我在控制台中出现以下错误：＆＃34; WebSocket连接到localhost：3000 ...失败：连接在收到握手响应之前关闭＆＃34;

3）我的控制台中也出现以下错误：＆＃34; WebSocket连接到localhost：3000 ...失败：WebSocket打开握手超时＆＃34;

Answer 1

问题是您在连接时发出saved article事件。当客户端在componentDidMount回调中打开新连接时，服务器会发出一个事件，从而触发您已注册的回调。

如果那不是你想要的，你应该从服务器代码中的连接回调中删除emit逻辑。

在反应应用程序中加入Socket.IO

1 个答案: