Question

大家好，我正在研究一个简单的RN聊天应用程序

我检查了服务器代码中连接事件的连接，服务器也可以获取我的套接字ID

但是，任何Emit或On都不起作用。

这是我的服务器代码

var http = require('http');
var express = require('express'),
app = module.exports.app = express();
console.log("serverStarted");
var server = http.createServer(app);
const io = require('socket.io')(server);
server.listen(3000);  //listen on port 80
io.on('connection',function(socket){
    console.log("Client Connected."+socket.id);
    socket.on('Button',function(data){
        console.log("ButtonPressed");
    });
    socket.emit('userid',socket.id);
});

这是客户端代码

import React, { Component } from 'react';
import {
  Button,
  Alert,
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import SocketIOClient from 'socket.io-client';

let socket;
type Props = {};
export default class App extends Component<Props> {
    constructor(){
    super();
    socket = SocketIOClient('http://myip:3000');
    Alert.alert("Socket is Connected.");
    socket.on('userid',(id)=>{
      this.setState({userid:{id}});
      Alert.alert(id);
    })
  }

  state = {
    userid:"id"
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Button title = "pres" onPress={()=>{
    socket.emit('Button',"button");
    }}>
          </Button>
        <Text style={styles.instructions}>
          {this.state.userid}
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

使用此代码，当我按下按钮时，我认为socket.on在服务器中工作

当在服务器中连接套接字时，客户端会更改“渲染中的文本”。

但两者都不起作用。

请帮帮我......

Answer 1

我发现问题.....

Socket.io已更新，因此我需要替换

import io from 'socket.io-client'

到

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

Answer 2

首先转到您的项目根目录并安装

npm i socket.io-client

import SocketIOClient from 'socket.io-client';


constructor(props) {

    super(props);

    //use your own local ip
     this.socket = SocketIOClient('http://localhost:9000/');

     this.socket.on('response', (messages) => {
      Alert.alert("response." + JSON.stringify(messages));
      console.log("response" + JSON.stringify(messages));
    });
  }
  componentDidMount(){
      this.socket.emit('Request_name', '1');
  }

react-native socket.io emit / on不起作用

2 个答案: