Reactjs无法正常连接到的NodeJS

Question

Reactjs无法正常连接到的NodeJS

我有以下哪个节点的js代码工作正常使用jQuery AJAX调用。当我测试使用Ajax的代码，它示出两个消息的控制台的用户连接和HelloWorld的消息。

//var socket = io();
//var socket = require('socket.io');

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendFile(__dirname + '/chat.html');
});

io.on('connection', function(socket){
    console.log('a user connected now');
    socket.on('joined', function(data) {
        console.log(data);
        socket.emit('acknowledge', 'Acknowledged');
    });

});

http.listen(9090, function(){
    console.log('listening on *:9090');
});

现在我想运行与reactjs的代码，但它的工作原理部分。

随着Reactjs，我只能看到显示该用户的信息连接到服务器，但它不会显示的Helloworld惠康消息。当我检查控制台reactjs代码，

我可以看到未捕获的ReferenceError：套接字没有在这行代码中定义

socket.emit('joined', 'Hello World from client ');

这里是主代码

//npm install --save socket.io
//npm install --save socket.io-client

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import { Link } from 'react-router-dom';
import axios from 'axios';
import io from "socket.io-client";


class ChatReact extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};



this.socket = io('http://localhost:9090');

 this.socket.on('connect', function(data) {
        socket.emit('joined', 'Hello World from client ');
    });

this.socket.on('acknowledge', function(data) {
        alert(data);
    });

  }


  render() {
    return (
      <div >
        <div>


<h1> Testing Socket Io with Reactjs</h1>


        </div>

      </div>
    );
  }
}

export { ChatReact };

Answer 1

第一个问题是，你实际上没有一个socket变量定义的任何地方，你有什么是this.socket，等等一类的属性。你将需要参考这种方式。

其次，即使你修改代码以使用this.socket，你的回调函数内的this不会指向你的反应类，所以this.socket将是不确定的。为了解决这个问题，你需要或者箭头功能或约束规则的功能。

请问您的环境支持箭头的功能呢？如果是这样，改变一个回调这种方式应该做的伎俩：

this.socket.on('connect',(data) => {
    this.socket.emit('joined', 'Hello World from client ');
 });

Answer 2

你的问题是，socket没有定义可言的，而是应与this.socket（this.socket.emit）。然而，你将有一个问题，因为this将在传统的功能回调不确定的。相反，你可以做使用fat arrow functions回调（不重新绑定this），而是接近你的“套接字”连接，像这样：

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import { Link } from 'react-router-dom';
import axios from 'axios';
import io from "socket.io-client";

class ChatReact extends React.Component {
  constructor(props) {
    super(props);

    this.state = { data: {} };
  }

  componentDidMount(){
    const socket = io('http://localhost:9090');
    socket.on('connect', () => {
        socket.emit('joined', 'Hello World from client ');
    });
    socket.on('acknowledge', data => {
        this.setState({ data });
    });
  }

  render() {
    return (
       <div>
         <h1>Testing Socket Io with Reactjs</h1>
         { JSON.stringify(this.state.data, null, 4) }
       </div>
    );
  }
}

export default ChatReact;