反应本机和 socket.io 节点不起作用答案

【问题标题】：React native and socket.io node not working反应本机和 socket.io 节点不起作用
【发布时间】：2017-05-01 18:31:39
【问题描述】：

下面是我尝试连接到节点 websocket 后端的 react 本机组件和节点 server.js 代码。

我的反应代码与服务器在同一台计算机上运行。我在这里和 github 上找到了很多不同的答案，但我都无法使用。

我还发现这个 question 从未被回答，this question 有一个答案，我无法开始工作（一年多前被问到）

我找到了this article，并尝试根据这些准则修改我的代码，但没有奏效。

反应代码

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

const io = require('socket.io-client/socket.io');
let socket = io('http://localhost:3000');

export default class App extends React.Component {

    constructor(props) {
        super(props);
        console.log(socket);
    }

    render() {
        return (
            <View>
                <Text>Websocket</Text>
            </View>
        );
    }
}

server.js

const express = require('express');
const http = require('http')
const socketio = require('socket.io');

const app = express();
const server = http.Server(app);
const websocket = socketio(server);
server.listen(3000, () => console.log('listening on *:3000'));

console.log(websocket)

// The event will be called when a client is connected.
websocket.on('connection', (socket) => {
  console.log('A client just joined on', socket.id);
});

我正在使用以下版本的软件包

"expo": "^16.0.0",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"socket.io-client": "^1.7.3"

【问题讨论】：

您链接到的文章说使用require 而不是import 用于socket.io 库。你试过了吗？
附带问题，上周末我第一次使用了 React Native 的内置 Web 套接字库。看起来不错，但这是我第一次使用网络套接字。 socket.io 库比原生库有什么优势？
在下面查看我的答案。
您是否尝试过使用 localhost 的 ip 地址来代替：let socket = io('127.0.0.1:3000');
请注意，您应该使用您的 ip 地址，因为您是从另一台机器连接的，在这种情况下是 android 模拟器，ip 必须是通常以 192.168.1.52 开头的东西

标签： javascript node.js react-native websocket socket.io

【解决方案1】：

我认为应该是

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

这对我有用。

我记得在使用 react native 时遇到过这些问题。许多 socket.io 教程（包括他们页面上的教程）假设您使用的是通过 HTML 文档中的脚本标签导入 JS 的旧样式。看起来 socket.io 更改了命名空间，因为我记得它是 socket.io-client/socket.io 前一段时间，如果有记忆的话......

【讨论】：

为什么是要求而不是进口？为什么会有区别？
如果你愿意，你可以使用 import。我的答案和 OP 的区别是 socket.io-client vs socket.io-client/socket.io。

【解决方案2】：

您的服务器代码看起来不错。虽然你应该检查你是否可以通过另一个客户端连接到它的套接字。

无论如何尝试这个反应原生代码。

进口：

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

在你的组件中做：

componentDidMount () {
    const socket = io(YOURURL, {
      transports: ['websocket']
    })

    socket.on('connect', () => {
      console.log("socket connected")
      socket.emit('YOUR EVENT TO SERVER', {})
      socket.on('EVENT YOU WANNA LISTEN', (r) => {
      })
    })

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

    socket.on('disconnect', () => {
      console.log("Disconnected Socket!")
    })
  }

【讨论】：

我已经像这样设置它并且工作正常......唯一的区别是我像这样导入import io from 'socket.io-client';
哦，很高兴听到这个消息。根据套接字 io 的版本，可能存在命名空间差异。只要你能得到io函数，上面的代码应该可以工作
transsports: ['websocket'] 这对我来说是救命稻草！！！非常感谢！
太棒了！发布问题的家伙从不费心选择正确的答案。

【解决方案3】：

另外，在您的服务器端，将const websocket = socketio(server) 更改为const websocket = socketio.listen(server);

【讨论】：

【解决方案4】：

谢谢，彼得。在我看来，您找到的文章没有帮助，因为您正在尝试连接到为该页面提供服务的主机。根据socket.io page 上的示例，尝试确保此行有效： const io = require('socket.io-client/socket.io'); 和无链接连接：let socket = io();

它对我有用，但只能在同一台计算机上的浏览器中使用。我认为当您在设备上进行测试时，您必须指定您的 IP 而不是 localhost。

祝你好运:)

【讨论】：