web-dev-qa-db-ja.com

Reactネイティブおよびsocket.ioノードが機能しない

以下は、ノードのwebsocketバックエンドに接続しようとしている、reactのネイティブコンポーネントとノードのserver.jsコードです。

私の反応コードはサーバーと同じコンピューターで実行されています。私はここで非常に多くのさまざまな答えを見つけました、そしてgithub、どれも私が働くことができない。

私もこれを見つけました question これは決して答えられませんでした （this question 答えはあります、私は働けません（1年以上前に尋ねられました）

私は この記事 を見つけ、これらのガイドラインに基づいてコードを修正しようとしましたが、これは機能しませんでした。

反応コード

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"
javascriptnode.jsreact-nativewebsocketsocket.io
18
peter flanagan

私はそれがあるべきだと信じています

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

これは私にとってはうまくいきます。

React nativeを使用しているときに、この種の問題が発生したことを覚えています。多くのsocket.ioチュートリアル（ページのチュートリアルを含む）は、HTMLドキュメントのスクリプトタグを介してJSをインポートする古いスタイルを使用していることを前提としています。メモリーが機能する場合、少し前にsocket.io-client/socket.ioであることを覚えているので、socket.ioが名前空間を変更したようです...

6
klvs

サーバーコードは問題ないようです。ただし、別のクライアントを介してソケットに接続できるかどうかを確認する必要があります。

とにかく、ネイティブコードを反応させるためにこれを試してください。

インポート：

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!")
    })
  }
5
Kaiwen Huang