node.js - 如果不将服务器 uri 传递给客户端的 io()，则无法使用 SocketIO

Question

我对 React 很陌生。我正在使用具有通用渲染功能的 Nodejs/Express 构建一个简单的 React Web 应用程序。我还使用 socket.io 来实时更新一些信息。

在 socket.io 文档中，它指出您可以通过执行以下操作建立与服务器的连接:

const socket = io()

在客户端。但是，这对我不起作用。我从 socket.io-client 收到此错误:

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

相反，我必须将 uri 传递给 io()，如下所示:

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

然后一切都按预期工作...我的问题是如何通过简单地执行第一种情况来建立 socket.io const socket = io() (没有服务器的 IP 地址/端口)

这是我的 server.js:

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)

还有我的带有套接字的组件:

 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

事实证明，这确实有效，毕竟，如果我这样设置的话:

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

基本上，如果我在组件安装后初始化套接字。我猜想需要先安装该组件，然后才能获取要连接的默认地址。