React Native 中的套接字 io

Question

我正在为我的 react-native 项目使用 Socket.io。 nodejs 服务器由 Heroku 托管。当我尝试从应用程序连接到服务器时，它工作得很好！！但是当我尝试发出一条消息时，我在接收 Reactjs 站点
上看不到它这是反应本机应用程序的代码 ->

import { io } from "socket.io-client";

useEffect(() => {
if (tried === true) {
  const socket = io("wss://my-domain-name.herokuapp.com");

  socket.emit("finishPayment", "true");

  setScanned(false);
}
}, [status]);

这是接收客户端代码（React js）->

socket.on("finishPayment", (msg) => {
  console.log(msg);
});

连接已完成（在应用程序中），但未发出消息。
知道为什么会这样吗？
谢谢！

Answer 1

我解决了！！！这是最终代码 ->

import { Text, View, StyleSheet, Alert } from "react-native";

navigator.__defineGetter__("userAgent", function () {   // you have to import rect native first !!
 return "react-native";
}); 

import SocketIOClient from "socket.io-client/dist/socket.io.js";
 
  //

  useEffect(() => {
const socket = SocketIOClient("wss://site-name.herokuapp.com/", {
  jsonp: false,
});
socket.on("connect", () => {
  console.log("connected");
  socket.emit("hello", "world");
});

socket.on("connect_error", (err) => {
  console.log(err instanceof Error);
  console.log(err.message); 
});
}, []);

Answer 2

这样干净多了。

 const io = require('socket.io-client/dist/socket.io');

 const socket = io(
    `API URL`,
    {
      transports: ['websocket'], // you need to explicitly tell it to use websockets
    },
  );

  socket.on('connect', () => {
    console.log('connected --------------- socket ---------------');
  });

  socket.on('connect_error', err => {
    console.log(err.message);
  });

Answer 3

在 android（本地）上，我的问题是我没有打开 mi socket serve 和 react native app 之间的连接。只需在终端上运行 adb reverse tcp:3000 tcp:3000 即可打开服务器端口进行连接。我的服务器使用 3000，但在本地将其更改为您服务器的端口。

adb reverse tcp:3000 tcp:3000

React Native 中的套接字 io

Socket io in React Native

node.js

socket.io

reactjs

react-native