首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >从MongoDB中响应本机获取无法工作

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

Stack Overflow用户
提问于 2020-12-19 23:57:16
回答 2查看 912关注 0票数 0

获得了一个应用程序连接到我的数据库与一些消息,我想要获取和渲染。我在家里做过这件事,但我来到了我女孩妈妈的家,这一切都不正常;TypeError留言。我使用的是iOS模拟器,所以我觉得有一些问题,因为我是在从那里运行这个应用程序时进行取回调用的。请看一看,告诉我你的想法!

代码语言:javascript
代码运行次数:0
运行
复制
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()));
代码语言:javascript
代码运行次数:0
运行
复制
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;
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-20 11:20:06

需要作出以下修改:

  1. 在快速服务器代码中,从应用程序的get和post函数中删除"http://192.168.0.17:8010“。例如:

代码语言:javascript
代码运行次数:0
运行
复制
   app.get("http://192.168.0.17:8010/api/messages", (req, res) => {

应该是

代码语言:javascript
代码运行次数:0
运行
复制
    app.get("/api/messages", (req, res) => {

原因:"/api/messages“只是一个端点,暴露在您的快速应用程序所在的任何IP地址(可能是192.168.0.17或任何其他IP)上。

  1. 在您的反应代码:您可能需要检查您的开发机器上的IPv4地址/任何地方的快递应用程序是托管的。在windows上,您可以通过在命令行.

中键入ipconfig来实现这一点。

将其添加到获取请求中,在React应用程序中。

票数 1
EN

Stack Overflow用户

发布于 2020-12-20 11:18:07

使用axios请求服务器EX:--

代码语言:javascript
代码运行次数:0
运行
复制
import axios from "axios"

const instance= axios.create({
    baseURL:"http://localhost:9000/",
});

export default instance 
axios.post('/api/messages',{
   whatever you want to post in json
}).then.....

如果需要,也可以使用异步等待。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65375657

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档