32

我正在使用 Phonegap + React.js 和 Socket.io 开发一个应用程序。然而，随后 React-Native 发布了，原生的感觉很棒。

我尝试让 socket.io-client 与 React Native 一起工作，但不幸的是没有取得多大成功。我做了一些研究，我得到了与本期中描述的完全相同的错误：https ://github.com/facebook/react-native/issues/375

关于这个问题的评论说尝试使用 fetch API 来获取 JS 模块，但我认为我做错了：

var socketScript;    
fetch('https://cdn.socket.io/socket.io-1.2.0.js')
    .then(function(response) {
        socketScript = response._bodyText;
    }).done(function() {
        var socket = socketScript.io();
    });

这将返回一个undefined is not a function。

有没有办法让 socket.io-client 与 React Native 一起工作？还是我看错了？也许还有其他更适合的解决方案？

4

8 回答 8

59

对于像我这样偶然发现这个问题的人，他们正在寻找如何将 socket.io 与 react native 集成。

由于 React Native 支持 websocket 的时间很短，你现在可以使用 Socket.io 非常轻松地设置 web socket。您所要做的就是以下

  1. npm install socket.io-client
  2. 首先导入 react-native
  3. 分配window.navigator.userAgent = 'react-native';
  4. 导入 socket.io-client/socket.io
  5. 在您的构造函数中分配this.socket = io('localhost:3001', {jsonp: false});

所以在 npm 安装 socket.io-client 之后，它应该看起来像这样：

import React from 'react-native';

// ... [other imports]

import './UserAgent';

import io from 'socket.io-client/socket.io';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.socket = io('localhost:3001', {jsonp: false});
  }

  // now you can use sockets with this.socket.io(...)
  // or any other functionality within socket.io!

  ...
}

然后在“UserAgent.js”中：

window.navigator.userAgent = 'react-native';

注意：因为 ES6 模块导入被提升，我们不能在 react-native 和 socket.io 导入相同的文件中进行 userAgent 分配，因此单独的模块。

编辑：

上面的解决方案应该可以工作，但在它不尝试创建单独的 socketConfig.js 文件的情况下。在那里导入任何需要的东西，包括const io = require('socket.io-client/socket.io');并window.navigator.userAgent = 'react-native';在需要 socket.io-client 之前。然后您可以在那里连接您的套接字并将所有侦听器放在一个地方。然后可以将动作或函数导入配置文件并在侦听器接收到数据时执行。

于 2015-08-26T18:48:54.693 回答
9

现在，如果您想在您的 RN 应用程序中使用 socket.io，您必须使用以下代码：

if (!window.location) {
    // App is running in simulator
    window.navigator.userAgent = 'ReactNative';
}

// This must be below your `window.navigator` hack above
const io = require('socket.io-client/socket.io');
const socket = io('http://chat.feathersjs.com', {
  transports: ['websocket'] // you need to explicitly tell it to use websockets
});

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

非常感谢Eric Kryski。

于 2016-03-24T14:05:07.107 回答
3

如果没有 WebSocket API 的 polyfill，您可以创建一个使用 web-socket 的本机模块，并使用eventDispatcher.

在 Javascript 方面，您可以使用DeviceEventEmitter.addListener.

有关使用本机模块的更多信息，请参阅有关该主题的 react-native 文档

于 2015-04-04T23:43:21.253 回答
3 
import { io } from 'socket.io-client'
const socket = io(`${SOCKET_URL}:${SOCKET_PORT}`)

重要的！SOCKET_URL应该是您的本地 IP 地址，而不是localhostor 127.0.0.1。

检查您的本地 IP：
Mac / Linux：ifconfig在终端中
运行 Windows：ipconfig --all在 shell中运行

应该是这样的：const socket = io('http://10.0.1.6:3000', {transports: ['websocket']})

于 2021-01-25T14:22:16.760 回答
1

2016 年 2 月编辑：React Native 现在支持 Web Sockets，因此其中一些建议是无效的。

恐怕你误解了 Github 问题。在其中，阿克曼说：

对于这种特定情况，您可能希望使用环境提供的 fetch API。

他没有说你应该使用 fetch API 来抓取远程 JS 模块。他的建议是使用 fetch API 代替内置的 Node.JS 请求模块，该模块在 React Native 中不可用。

让我们看看你的代码：

socketScript = response._bodyText;
var socket = socketScript.io();

想一想——socketScript它不是一个 JavaScript 对象，而是一个字符串——那么你怎么能调用它的io方法呢？

你真正需要做的是_bodyText在使用它之前进行解析（在你可以使用的浏览器中eval），但是你仍然会遇到问题，虽然 React Native 有一个用于 XHR 和 fetch API 的 polyfill，但它还没有有一个用于 WebSocket API。除非我弄错了，否则这意味着你被卡住了。

我建议打开一个 Github issue 来请求一个 WebSocket API polyfill 并征求社区的意见。有人可能有解决方法。

于 2015-04-02T09:22:39.117 回答
0

终于找到了。

客户

import { io } from "socket.io-client/build/index"
io("ws://<LOCAL HOME NETWORK IP>:<PORT ON SERVER>")

服务器

import express from "express"
import http from "http"
import * as SocketIO from "socket.io"

const app = express()
const server = new http.Server(app)
const io = new SocketIO.Server(server)
const port = 8000
io.on("connection", socket => {
   console.log("CONNECTIONS")
}
于 2020-12-19T18:19:27.593 回答
0

可能这将通过错误

import io from "socket.io-client/socket.io"

然后只需添加以下行....

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

然后在 componenDidMount 或 useEffect 函数中添加以下行。切勿在类组件的构造函数下使用它。

 var socket = io("https://localhost.com:3000", { jsonp: false });
        // client-side
        socket.on("chat_message", (msg) => {
            console.log(msg);
        });
于 2021-06-05T17:00:43.673 回答
0

尽管您可以使用socket.io-clientlib，但社区抱怨大多数版本的兼容性问题（我确实遇到过一些）。它可以工作，但现在我害怕升级 lib，因为我需要验证下一个版本与我的服务器版本和 react-native 版本的兼容性！

似乎很多人错过了react 自己的 Websockets 实现！我真的建议您使用它而不是socket.io-client. 它的用法非常相似：

var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {  // connection opened  ws.send('something'); // send a message};
ws.onmessage = (e) => {  // a message was received  console.log(e.data);};
ws.onerror = (e) => {  // an error occurred  console.log(e.message);};
ws.onclose = (e) => {  // connection closed  console.log(e.code, e.reason);};
于 2021-08-16T08:23:26.713 回答