node.js - Reactjs 无法正确连接到 Nodejs
问题描述
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 代码时,
我可以看到未捕获的 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
根本没有定义,而是应该与this.socket
(this.socket.emit
)有关。但是,您会遇到问题,因为this
在传统的函数回调中未定义。相反,您可以使用胖箭头函数回调(不会重新绑定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;
推荐阅读
- mysql - 我是新手,并且在我正在从事的学习项目中遇到了一些麻烦
- javascript - 如何使用 AJAX 使用来自视图的信息正确填充模式
- css - 相对位置和绝对位置在 ngFor 中不起作用
- r - 如何过滤具有来自另一个数据帧的相似数据的数据帧?
- python - request.user 的喜欢时间未显示
- python - Python:带有负值的log-lin图
- azure - 无法使用 terraform 在 cosmos db 中设置自动缩放
- javascript - className.remove 不工作。单击按钮时尝试删除活动
- java - IntelliJ 不会从 Maven 依赖项 (JavaFX 17) 加载 javafx 包
- c# - 使用在策略方法中传递的基本参数的具体类型