React Native中的Socket io

0vvn1miw  于 2023-08-07  发布在  React
关注(0)|答案(4)|浏览(122)

我正在使用Socket.io进行我的 react-native 项目。nodejs服务器由Heroku托管。当我试图从应用程序连接到服务器时,它工作得很完美!!但尝试发送消息时,我无法在接收 Reactjs 站点上看到它
下面是react native app ->的代码

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


连接已完成(在应用程序中),但未发出消息。
知道为什么会这样吗
谢谢你,谢谢

nhhxz33t

nhhxz33t1#

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

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); 
});
}, []);

字符串

6kkfgxo0

6kkfgxo02#

在android(本地)上,我的问题是我没有打开mi socket serve和react native app之间的连接。只要在终端上运行adb reverse tcp:3000 tcp:3000,服务器端口就会打开进行连接。我使用3000为我的服务器,但更改为您的服务器的端口本地。

adb reverse tcp:3000 tcp:3000

字符串

jgwigjjp

jgwigjjp3#

对我来说,我面临这个问题是出于多种原因。这里列出了问题和解决办法。

**问题1:*在服务器端,我更新了socket.io包,没有看docs中的新内容来实现新版本,重新阅读并遵循docs后发现 * 我使用的是旧的import

const socketio = require("socket.io");
const io = socketio(server);

字符串
我把导入改为新的方式,如下所示

const { Server } = require("socket.io");
const io = new Server(server);

**问题2:**在React Native客户端,我还将socket.io更新为V4.7.1 *,这与服务器端版本相同 *,在阅读最新文档后发现我使用了错误的导入,所以我从这条修改了

import io from "socket.io-client";


到这个

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

**问题3:**我使用http://localhost:5000作为套接字URL,但事实证明这至少在Android模拟器上不起作用,所以我使用我的本地IP代替http://192.168.1.100:5000,我还需要添加transports属性以使其完全工作,如下面的示例:

import { io } from "socket.io-client";
const socket = io("http://192.168.1.100:5000", { transports: ["websocket"] });

  • 额外奖励 * 始终在客户端使用此事件,以确保您是否已连接并查看错误 *
socket.on("connect", () => {
  console.log("Socket Connected");
});

socket.on("connect_error", (error) => {
  console.log("Socket Error", error);
});

mfpqipee

mfpqipee4#

这个干净多了。

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

字符串

相关问题