反應本機和 socket.io 節點不工作

Question

下面是我試圖連接到我的節點 websocket 后端的我的本機組件和節點 server.js 代碼。

我的反應代碼與服務器在同一台計算機上運行。 我在這里和 github 上找到了很多不同的答案，但我都無法使用。

我也發現了這個問題，這是從來沒有回答，而這個問題有答案，我不能獲得工作（被要求在一年前）

我找到了這篇文章，並試圖根據這些指南修改我的代碼，但這沒有用。

反應代碼

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

服務器.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"

Answer 1

我相信應該是

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

這對我有用。

我記得在使用 React Native 時遇到過這類問題。 許多 socket.io 教程（包括他們頁面上的教程）假設您使用的是通過 HTML 文檔中的腳本標簽導入 JS 的舊樣式。 看起來 socket.io 改變了命名空間，因為我記得它是socket.io-client/socket.io前一段時間，如果有內存的話......

Answer 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!")
    })
  }

Answer 3

此外，在您的服務器端，將const websocket = socketio(server)更改為const websocket = socketio.listen(server);

Answer 4

謝謝，彼得。 在我看來，您找到的文章沒有幫助，因為您正在嘗試連接到為該頁面提供服務的主機。 根據socket.io 頁面上的示例，嘗試確保此行有效： const io = require('socket.io-client/socket.io'); 並在沒有鏈接的情況下連接： let socket = io();

它對我有用，但只能在同一台計算機上的瀏覽器中使用。 我認為當您在設備上進行測試時，您必須指定您的 IP 而不是 localhost。

祝你好運 ：）