Soy muy nuevo en React. Estoy creando una aplicación web React simple con Nodejs/Express con renderizado universal. También estoy usando socket.io para actualizar alguna información en tiempo real.
En los documentos de socket.io, se establece que puede establecer una conexión con el servidor haciendo lo siguiente:
const socket = io()Del lado del cliente. Sin embargo, esto no funciona para mí. Recibo este error de socket.io-client:
if (null == uri) uri = loc.protocol + '//' + loc.host; ^ TypeError: Cannot read property 'protocol' of undefinedEn cambio, tengo que pasar el uri a io() así:
const socket = io('http://localhost:5050') Entonces todo funciona como se esperaba... mi pregunta es cómo puedo establecer socket.io simplemente haciendo el primer caso const socket = io() (sin dirección IP/puerto del servidor)
Aquí está mi 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)Y mi componente con mi socket:
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 WelcomeMsgResulta que esto SÍ funciona, después de todo, si lo configuro así:
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 WelcomeMsgBásicamente, si inicializo el zócalo después de que se monte el componente. Supongo que el componente debe montarse antes de que pueda obtener la dirección predeterminada para conectarse.