socket.io-client + react，在哪里连接服务器？

Posted 2023-03-07

【中文标题】socket.io-client + react，在哪里连接服务器？

【英文标题】：socket.io-client + react, where to connect to the server?

【发布时间】：2015-11-12 13:08:30

【问题描述】：

我正在编写一个非常简单的 Nodejs 应用程序。我使用 React + Socket.io。

有一个根元素会立即渲染另一个 React 组件（你可能想知道为什么我有这个根元素。原因是我希望能够在接收到来自服务器的消息后挂载这两个组件中的一个，但是对于开始我渲染一个预选的组件）。 在这个根组件中，我在componentDidMount 中定义了一个套接字。现在的问题是我想将这个套接字传递给所有的孩子（这样他们就可以监听并与服务器消息通信。）但是如果我在根的componentDidMount 连接到服务器，在渲染过程中没有socket 因为它还没有连接，null 将被传递给子组件。

'use strict';

var React = require('react');
var ioClient = require('socket.io-client');
var UsersList = require('./usersList');
var Game = require('./game');
var socket;

var Snake = React.createClass(

    displayName: 'Snake',

    propTypes: ,

    getDefaultProps: function() 
        return ;
    ,

    mixins: [],

    getInitialState: function() 
        return (
            usersList: true,
            game: false
        );
    ,

    componentWillMount: function() 
    ,

    componentWillUnmount: function() 
        this.socket.close();
    ,
    componentDidMount: function() 
        socket = ioClient.connect(); // this happens after render
    ,
    render: function() 
        var result = null;
        if (this.state.usersList) 
            result = <UsersList socket=socket/> // therefore this one is passed as null
         else  //game : true
            result = <Game socket=socket/>
        
        return (<div>
            result
        </div>)
    
);

module.exports = Snake;

'use strict';

var React = require('react');

    var UsersList = React.createClass(

        displayName: 'UsersList',

        propTypes: ,

        getDefaultProps: function() 
            return ;
        ,

        mixins: [],

        getInitialState: function() 
            return (
                usersList:[]
            );
        ,
        componentWillReceiveProps: function()
        ,
        componentWillMount: function() 
        ,

        componentWillUnmount: function() 
        ,

        componentDidMount: function() 
            var socket = this.props.socket; // this one was passed into the component as null
            socket.on('usersList', function(data) // so this one returns an error
                this.setState(
                    usersList: data.usersList
                );
            );
        ,
        render: function() 
            var users = [];
            for (var i = 0 ; i < this.state.usersList.length ; i++)
                users.push(<span>this.state.usersList[i]</span>);
            
            return(<div>users</div>);
        
    );

    module.exports = UsersList;

所以，现在你可能会问我为什么不把io.connect() 放在componentWillMount 或文件顶部。好吧，它不起作用！它返回此错误：Cannot find property "protocol" ...。 我不能把它放在文件顶部的render、componentWillMount...

关于如何做到这一点的任何想法？

【问题讨论】：

您好，您在哪里指定连接服务器的路径？我的意思是，ioClient.connect() 没有指定任何路径。我在连接到我的服务器时遇到了麻烦，实际上，服务器接收到连接，但在客户端中，套接字在io.connect('http://localhost:3000/api/chat/connect', path:'/api/chat/connect', reconnect: true, forceNew: true, jsonp: false, transports: ['websocket'] ) 之后立即保持连接。谢谢。

【参考方案1】：

您可以继续在componentDidMount 中连接。它不会立即可供组件的子级使用，但您可以在子级中执行以下操作：

componentDidUpdate(prevProps, prevState) 
   if ( this.props.socket ) 
      // do your connection logic here
   

这将确保孩子们在套接字首次连接并可供他们使用时立即连接。在 if 语句中，您还可以验证 this.props.socket 不等于 prevProps.socket 以防止冗余连接尝试。