React.js无法正确连接到Node.js

时间:2019-02-03 23:20:35

标签: node.js reactjs

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

2 个答案:

答案 0 :(得分:0)

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

第二,即使您更改代码以使用this.socket,回调函数中的this也不会指向您的react类,因此this.socket将是未定义的。要解决此问题,您将需要使用箭头功能或绑定的常规功能。

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

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

答案 1 :(得分:0)

您的问题是socket根本没有定义,而是应该与this.socketthis.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;