问从MongoDB中响应本机获取无法工作

EN

const express = require("express");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);

const bodyParser = require('body-parser');
const Message = require("./models/message");
const mongoose = require('mongoose');

// MongoDB connection
mongoose.connect(
  'mongodb+srv://blahblah', {
    useNewUrlParser: true,
    useUnifiedTopology: true
  }).then(() => {
    console.log('Connected to the database!')
  }).catch(() => {
    console.log('Connection failed oh noooooo!')
});

// Parse the request body as JSON
app.use(bodyParser.json());

// GET messages
app.get("http://192.168.0.17:8010/api/messages", (req, res) => {
  Message.find({}).exec((err, messages) => {
    if(err) {
       res.send(err).status(500);
    } else {
       res.send(messages).status(200);
    }
  });
});

// POST messages
app.post('http://192.168.0.17:8010/api/messages', (req, res) => {
  Message.create(req.body).then((message) => {
      res.send(message).status(200);
  }).catch((err) => {
      console.log(err);
      res.send(err).status(500);
  });
});

// Socket.io connection
io.on("connection", socket => {
  socket.emit('your id', socket.id);
  socket.on('send message', body => {
      io.emit('message', body)
  })
  console.log("connected")
})

server.listen(8010, () => console.log("server is running on port 8000", server.address()));

import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, Text, TextInput, View, Button, FlatList, ScrollView } from 'react-native';
import io from 'socket.io-client'

const ChatRoom = () => {

  const [yourID, setYourID] = useState();
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState([]);
  const [username, setUsername] = useState([]);

  const socketRef = useRef();

  useEffect(() => {
    socketRef.current = io.connect('/');   
    // Sets your ID on connection
    socketRef.current.on("your id", id => {
      setYourID(id)
      console.log(id)
    })
    console.log("socket connection worked")
    socketRef.current.on("message", (message) => {
    recievedMessage(message);
    console.log(message)
    })
    // Gets the messages from the database and sets my messages with them. Peep the concat.
    fetch("http://192.168.0.17:8010/api/messages", {
      method: "GET"
    }).then((res) => {
      return res.json()
    }).then((resJSON) => {     
      console.log(resJSON)
      setMessages(resJSON.concat())
    }).catch((err) => {
      console.log(err)
    });
  }, []);

    function recievedMessage(message) {
      setMessages(oldMsgs => [...oldMsgs, message])
    }
      
    function sendMessage(e) {
      e.preventDefault();
      // Props on this guy match up with the schema.
      const messageObject = {
          body: message,
          username: username,
          id: yourID
    };
      setMessage("")
      socketRef.current.emit("send message", messageObject);
      // Sends the message to the database on submit. Uses the messageObject
      fetch("http://192.168.0.17:8010/api/messages", {
          method: "POST",
          headers: {
              "Content-Type": "application/json"
          },
          body: JSON.stringify(messageObject)
      }).then((res) => {
          console.log(res)
          return res.json();
      }).catch((err) => {
          console.log(err);
      });
    }

    // function handleChange(e) {
    //   setMessage(e.target.value);
    // }

    // function handleChangeUsername(e) {
    //   setUsername(e.target.value);
    // }

  return (
    //Send down the info, render the chat shit
    <React.Fragment>
      <View style={styles.container}>
        {messages.map((message, index) => {
          if (message.id === yourID) {
            return (
              <ScrollView key={index} contentContainerStyle={styles.myRow}>
                <Text style={styles.myMessage}>
                  {message.body}
                </Text>
              </ScrollView>
            )
          }
          return (
            <ScrollView key={index}>
              <Text style={styles.partnerMessage}>
                {message.username}:   {message.body}
              </Text>
            </ScrollView>
            )
          })}
        </View>

            <View>
                <View style={{ display: 'flex', justifyContent: 'center', marginTop: 30 }}>
                    <TextInput
                    value={message} 
                    onChangeText={message => setMessage(message)} 
                    placeholder="Say something..." />
                    <Button title='snd msg' onPress={sendMessage}/>
                </View>
            </View>

            <View>
              <View>
                <TextInput
                    value={username}
                    onChangeText={username => setUsername(username)}
                    placeholder="Your name..." />
              </View>
            </View>
        </React.Fragment>
    )
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    height: '70%',
    flexDirection: 'column',
    width: '100%',
    marginTop: 100
  },
  myRow: {
    width: '100%',
    display: 'flex',
    justifyContent: 'flex-end',
    flex: 1
  },
  myMessage: {
    width: '45%',
    textAlign: 'center',
    padding: 10
  },
  partnerMessage: {
    width: '45%',
    height: '70%',
    textAlign: 'center',
    display: 'flex',
    overflow: 'scroll',
    flexGrow: 1,
    justifyContent: 'flex-start',
    height: '80%'
  }
})

export default ChatRoom;