在客户端和服务器之间发送消息并不好我在 react-native 中使用 socket.io答案

【问题标题】：send a message between client and server is not fine i using socket.io in react-native在客户端和服务器之间发送消息并不好我在 react-native 中使用 socket.io
【发布时间】：2018-12-04 15:12:44
【问题描述】：

我正在尝试将 Socket.io 与 react native App 一起使用，但客户端和服务器端之间存在一些问题，我认为代码正确，但单击按钮时它不会更新状态，连接是完成，我显示日志工作我没有显示任何错误！

这是我的代码：

服务器/app.js

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

server.listen(8080);

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

io.on("connection", function(socket) {
  console.log(socket.id);
  socket.on("update", () => {
    console.log("update con");
    socket.emit("update");
  });
});

服务器/index.html

<h1>Welcome Socket.io !!</h1>
<button>Update</button>

<script src="/socket.io/socket.io.js"></script>

<script>
  var socket = io();
  var btn = document.querySelector("button");
  btn.onclick = function() {
    console.log("update func");
    socket.emit("update");
  };
</script>

App.js

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
window.navigator.userAgent = "react-native";
import io from "socket.io-client";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "HelloWorld"
    };
    this.socket = io("localhost:8080", { jsonp: false });
  }

  componentDidMount() {
    this.socket.on("update", () => {

      this.setState({ name: "updated name !" });
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>{this.state.name}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

【问题讨论】：

1.你有一个服务器和两个客户端。如果 Android 项目连接，您应该会在服务器日志中看到两个 id。 2.您将“更新”发送回您的 JS 客户端，而不是您的 react-native 客户端
@ChrisG 我在服务器日志中有两个正确的 id，你能用我的代码解释一下你在 Num 2 中的意思吗
1.在 Genymotion 设备上打开浏览器并尝试访问服务器。对我来说是http://192.168.220.10:8080。成功后，将确切的 URL 放入 react 本机代码的 io() 2. 在您的服务器代码中，将 socket.emit("update"); 更改为 io.emit("update");，以便将消息发送给所有客户端
@ChrisG 我这样做了，但问题仍然存在:(
它对我有用。如果你需要帮助，你需要更具体一点。您是否将 Genymotion 设备设置为桥接模式？你能在 Genymotion 浏览器上看到你快递服务器的 index.html 吗？

标签： javascript reactjs react-native websocket socket.io

【解决方案1】：

我认为问题来自您的套接字服务器的地址。在App.js 中，您写的是 localhost，但如果它在移动设备、模拟器或设备中，那么您的地址不能是localhost。它可以是 10.0.2.2 的模拟器 Android 或你的电脑和设备共享的 WiFi 上的电脑地址。

【讨论】：

在第一次使用 Genymotion 时，我将地址更改为192.168.1.108，仍然是端口 8080，但不再工作了
好吧，我曾经为此使用过 genymotion！您是否尝试将 http:// 放在 localhost 之前或将 localhost 替换为 128.0.0.1 ？？？
@Gha 试试这个this.socket = io('http://127.0.0.1:8080', { transport: ['websocket', 'pooling'] })
并且在用户连接时不会自动发送“更新”。所以你不会收到这个事件，除非你先发出它。就像您在客户端浏览器上所做的一样
那么我现在改变了什么？