SocketIO kann nicht verwendet werden, ohne server uri an io() auf der Client-Seite zu übergeben

Question

Ich bin sehr neu in React..Ich baue eine einfache React webapp mit Nodejs/Express mit Universal Rendering. Ich verwende auch socket.io, um einige Informationen in Echtzeit zu aktualisieren.

In der socket.io docs heißt es, dass Sie eine Verbindung zum Server herstellen können, indem Sie:

const socket = io() 

Auf der Client-Seite. Dies funktioniert jedoch nicht für mich. Ich bekomme diese Fehlermeldung aus socket.io-Client:

if (null == uri) uri = loc.protocol + '//' + loc.host; 
          ^
TypeError: Cannot read property 'protocol' of undefined 

Stattdessen muss ich in der uri passieren io() wie folgt aus:

const socket = io('http://localhost:5050') 

dann funktioniert alles wie erwartet ... meine Frage

require('babel-register') 
const express = require('express') 
const React = require('react') 
const ReactDOMServer = require('react-dom/server') 
const ReactRouter = require('react-router') 
const ServerRouter = ReactRouter.ServerRouter 
const socketIO = require('socket.io') 
const http = require('http') 
const _ = require('lodash') 
const fs = require('fs') 
var bodyParser = require('body-parser') 
const PORT = 5050 
const baseTemplate = fs.readFileSync('./index.html') 
const template = _.template(baseTemplate) 
const App = require('./js/App').default 


const app = express() 
var server = http.createServer(app) 
var io = socketIO(server) 

// middleware 
app.use(bodyParser.json()) 

app.set('socketio', io) 
app.use('/public', express.static('./public')) 
app.use((req, res) => { 
    const context = ReactRouter.createServerRenderContext() 
    const body = ReactDOMServer.renderToString(
    React.createElement(ServerRouter, {location: req.url, context: context}, 
    React.createElement(App) 

    ) 
) 
    res.write(template({body: body})) 
    res.end() 
}) 

console.log('listening on port', PORT) 
server.listen(PORT) 

: ist, wie ich meine server.js socket.io indem man einfach tun den ersten Fall const socket = io() (ohne IP-Adresse/Port des Servers)

Hier etablieren

Und meine Komponente mit meiner Fassung:

import React, { Component } from 'react' 
const {string, bool, object} = React.PropTypes 
const io = require('socket.io-client') 
const socket = io('http://localhost:5050') // I want to change this! 

    class WelcomeMsg extends Component { 
     constructor (props) { 
     super(props) 
     this.state = { 
      text: '' 
     } 
     } 
     componentDidMount() { 
     socket.on(this.props.location.pathname, (mesg) => { 
      this.setState({text: mesg}) 
     }) 
     } 
     componentWillUnmount() { 
     socket.off(this.props.page) 
     } 
     render() { 
      <div> 
      {this.state.text} 
      </div> 
     } 

    export default WelcomeMsg 

Answer 1

Es stellt sich heraus, funktionierts, nach allem, wenn ich es einrichten wie folgt aus:

import React, { Component } from 'react' 
const {string, bool, object} = React.PropTypes 
const io = require('socket.io-client') 
let socket 

    class WelcomeMsg extends Component { 
     constructor (props) { 
     super(props) 
     this.state = { 
      text: '' 
     } 
     } 
     componentDidMount() { 
     socket = io() 
     socket.on(this.props.location.pathname, (mesg) => { 
      this.setState({text: mesg}) 
     }) 
     } 
     componentWillUnmount() { 
     socket.off(this.props.page) 
     } 
     render() { 
      <div> 
      {this.state.text} 
      </div> 
     } 

    export default WelcomeMsg 

Grundsätzlich, wenn ich die Buchse initialisieren, nachdem Die Komponente wird montiert. Ich denke, die Komponente muss gemountet werden, bevor sie die Standardadresse für die Verbindung erhalten kann.