Reactjs 无法正确连接到 Nodejs答案

【问题标题】：Reactjs could not properly connect to NodejsReactjs 无法正确连接到 Nodejs
【发布时间】：2019-06-27 17:56:21
【问题描述】：

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 Wellcome 消息。当我检查控制台的 reactjs 代码时，

我可以看到 uncaught ReferenceError: socket is not defined 在这行代码

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 };

【问题讨论】：

在马特爵士，您的建议将触发以下错误。未捕获的类型错误：无法读取 Socket. 处未定义的属性“发射”。
请问还有其他解决方法吗？感谢您到目前为止的回复
socket.io - ReferenceError: socket is not defined的可能重复

标签： node.js reactjs

【解决方案1】：

您的问题是 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;

【讨论】：

感谢马特卡洛塔爵士到目前为止的回复，但不幸的是，您的解决方案目前不适用于我。谢谢之间

【解决方案2】：

第一个问题是您实际上没有在任何地方定义socket 变量，您拥有的是this.socket，因此是类的属性。您需要以这种方式引用它。

其次，即使您将代码更改为使用this.socket，您的回调函数中的this 也不会指向您的react 类，因此this.socket 将是未定义的。要解决此问题，您将需要一个箭头函数或一个绑定的常规函数。

您的环境是否支持箭头功能？如果是这样，以这种方式更改回调应该可以解决问题：

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

【讨论】：