问题：

使用socket将MERN聊天应用程序转换为实时应用程序。木卫一

司信厚

2023-03-14

我一直在尝试使用MERN堆栈（React Native而非React）开发一个实时聊天应用程序，并取得了成功，但我无法使用套接字将其转换为实时。io库。下面我从我的项目中提供了一些代码，在使用socket之前描述了情况/结构。io及之后：

流

用户使用他的电话号码注册/登录，在主屏幕的每一次渲染中，如果用户有房间，我将获取房间。（房间=

服务器

我在我的mongoDB中有3个集合，1）用户，2）房间3）消息。

模式：

const RoomSchema = mongoose.Schema({
  roomId: String,
  usersId: [String],
  users: Object,
}, {
  timestamps: true,
});

module.exports = mongoose.model('Room', RoomSchema);

const MessageSchema = mongoose.Schema({
  roomId: String,
  senderId: String,
  text: String,
}, {
  timestamps: true,
});

module.exports = mongoose.model('Message', MessageSchema);

const UserSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
    trim: true,

  },
  phone: {
    type: String,
    required: true,
    trim: true,
    unique: true,
  },
  otp: String,
}, {
  timestamps: true,
});

module.exports = mongoose.model('User', UserSchema);

指数js

const express = require('express');
const mongoose = require('mongoose');
const http = require('http');
const socketio = require('socket.io');

const app = express();
const server = http.createServer(app);

const io = socketio(server).sockets;

mongoose.connect(process.env.MONGO_URL);
mongoose.connection.on('connected', () => {
  console.log('[INFO] Connected to MongoDB');
});
mongoose.connection.on('error', (error) => {
  console.log(`[ERROR] ${error}`);
});

// SOCKETS MIDDLEWARE
require('./middlewares/socket')(io);

server.listen(process.env.PORT, () => {
  console.log(`[INFO] Server running at ${process.env.PORT}`);
});

插座js

const Message = require('../models/Message');

module.exports = (io) => {
  io.on('connection', (socket) => {
    console.log('A user connected.');

    socket.on('sent_messages', async ({ roomId }, cb) => {
      const messages = await Message.find({roomId});
      cb(messages);
    });

    socket.on('send2user', async (data) => {
      socket.broadcast.to(data.roomId).emit();

      const message = new Message({
        roomId: data.roomId,
        senderId : data.senderId,
        text: data.text,
      });
      const result = await message.save();
    });
  });
};

现在，基本上，只要用户触摸前端的联系人项目，就会为这两个用户创建一个聊天室（聊天室）（私人1-1聊天应用）。所以，现在这两个用户已经准备好实时聊天了。获取和创建消息的endpoint（尽管我在socket.js文件中创建了一条新消息，但不知道如何继续）：

router.post('/create_message', async (req, res) => {
  const {roomId, senderId, text} = req.body;
  try {
    const message = new Message({
      roomId,
      senderId,
      text,
    });
    const result = await message.save();

    return res.status(200).json({
      type: 'success',
      data: result,
    });
  } catch (error) {
    return res.status(422).send({error: `${error.message}`});
  }
});

router.post('/get_messages', async (req, res) => {
  const {roomId} = req.body;
  try {
    const messages = await Message.find({roomId});
    return res.status(200).json({
      type: 'success',
      data: messages,
    });
  } catch (error) {
    return res.status(422).send({error: `${error.message}`});
  }
});

前端

公用事业js

export const socket = io(API_URL, {forceNew: true});

socket.on('connection', () => {
  console.log('Connected to server');
});

export const fetchMessages = (roomId, setMessages) => {

  // socket.emit('sent_messages', {roomId}, (data) => {
  //   setMessages(data);
  // });

  AsyncStorage.getItem('token')
    .then(token => {
      if (token) {
        fetch(`${API_URL}/message/get_messages`, {
          method: 'POST',
          headers: {
            ...
          },
          body: JSON.stringify({roomId}),
        })
          .then(response => response.json())
          .then(data => {
            if (data.type === 'success') {
              setMessages(data.data);
            }
            if (data.error) {
              console.log(data.error);
            }
          })
          .catch(error => {
            console.log('[ERROR] While fetching messages: ' + error.message);
          });
      } else {
          console.log('token is null');
      }
    })
    .catch(error => {
      console.log('[ERROR] While fetching token: ' + error.message);
    });
};

export const createMessage = (message, setMessages) => {
  AsyncStorage.getItem('token')
    .then(token => {
      if (token) {
        fetch(`${API_URL}/message/create_message`, {
          method: 'POST',
          headers: {
            ...
          },
          body: JSON.stringify(message),
        })
          .then(response => response.json())
          .then(data => {
            if (data.type === 'success') {
              const latestMessage = data.data;
              setMessages((prevMessages) => ([
                ...prevMessages,
                latestMessage,
              ]));
              // socket.emit('send2user', latestMessage);
            }
            if (data.error) {
              console.log(data.error);
            }
          })
          .catch(error => {
            console.log('[ERROR] While fetching messages: ' + error.message);
          });
      } else {
          console.log('token is null');
      }
    })
    .catch(error => {
      console.log('[ERROR] While fetching token: ' + error.message);
    });
};

聊天屏。js

const ChatScreen = () => {
  const {params} = useRoute();
  const roomId = params?.roomId;
  const navigator = useNavigation();
  const {user, rooms} = useAuth();

  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const sendMessage = () => {
    if (input) {
      const message = {
        roomId,
        senderId: user._id,
        text: input,
      };
      createMessage(message, setMessages);
      setInput('');
    }
  };

  useEffect(() => {
    fetchMessages(roomId, setMessages);
  }, []);

  const scrollViewRef = useRef();

  return (
    <SafeAreaView>
      <KeyboardAvoidingView>
        <>
          {/* RENDER MESSAGES WITH SCROLLVIEW */}
          <ScrollView
            ref={scrollViewRef}
            onContentSizeChange={() =>
              scrollViewRef.current.scrollToEnd({animated: true})
            }
            onLayout={() =>
              scrollViewRef.current.scrollToEnd({animated: true})
            }>
            {messages.length > 0 ? (
              messages.map((message, index) => (
                <MessageItem key={index} myID={user._id} data={message} />
              ))
            ) : (
              <Text>Start Chatting</Text>
            )}
          </ScrollView>

          <View>
            <View>
              <TextInput
                value={input}
                onChangeText={setInput}
                placeholder="Type here"
              />
            </View>

            <TouchableOpacity
              onPress={sendMessage}>
              <IonIcon name="ios-add" size={28} color="#fff" />
            </TouchableOpacity>
          </View>
        </>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

export default ChatScreen;

所以，正如你所看到的，我无法使用socket实现实时性。io，我还不知道是使用套接字还是apiendpoint获取/创建消息。如果有人能帮我解决这个问题，我会非常感激！我只是想让它像一个使用socketio的实时聊天应用程序一样工作。

更新：

通过看一些教程

节点服务器socket.js

const Message = require('../models/Message');

module.exports = (io) => {
  io.on('connection', (socket) => {
    console.log('A user connected.');

    socket.on('get_messages', async (roomId) => {
      const messages = await Message.find({roomId});
      socket.broadcast.to(roomId).emit('get_messages', messages);
    });

    socket.on('listener', async (data) => {
      // here, I am able to receive `data` : {roomId: '...', senderId: '...', text: '...'}
      io.to(data.roomId).emit('listener', data); // but using this, I cannot listen to changes, look in client file below this.

      const message = new Message({
        roomId: data.roomId,
        senderId : data.senderId,
        text: data.text,
      });
      await message.save();
    });
  });
};

客户端-反应-聊天creen.js：

import {socket} from '../../utils/utility';

const ChatScreen = () => {
  const {params} = useRoute();
  const roomId = params?.roomId;
  const navigator = useNavigation();
  const {user, rooms} = useAuth();

  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const InitialFetchMessages = (_roomId) => {
    socket.on('get_messages', () => {
      socket.emit('get_messages', ); // HOW TO RECEIVE THE MESSAGES HERE?
    });
  };

  const sendMessage = () => {
    if (input) {
      const message = {
        roomId,
        senderId: user._id,
        text: input,
      };
      socket.emit('listener', message);
      setInput('');
    }
  };

 // main real-time listener
  useEffect(() => { // NOT RUNNING
    socket.on('listener', (data) => { // data = received data
      setMessages([...messages, data]);
    });
    return () => socket.off('listener');
  }, [messages]);

  useEffect(() => {
    InitialFetchMessages(roomId, setMessages);
  }, []);

  const scrollViewRef = useRef();

  return (
    <SafeAreaView>
      <KeyboardAvoidingView>
        <>
          {/* RENDER MESSAGES WITH SCROLLVIEW */}
          <ScrollView
            ref={scrollViewRef}
            onContentSizeChange={() =>
              scrollViewRef.current.scrollToEnd({animated: true})
            }
            onLayout={() =>
              scrollViewRef.current.scrollToEnd({animated: true})
            }>
            {messages.length > 0 ? (
              messages.map((message, index) => (
                <MessageItem key={index} myID={user._id} data={message} />
              ))
            ) : (
              <Text>Start Chatting</Text>
            )}
          </ScrollView>

          <View>
            <View>
              <TextInput
                value={input}
                onChangeText={setInput}
                placeholder="Type here"
              />
            </View>

            <TouchableOpacity
              onPress={sendMessage}>
              <IonIcon name="ios-add" size={28} color="#fff" />
            </TouchableOpacity>
          </View>
        </>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

export default ChatScreen;

有谁能指出发生了什么，为什么它没有向roomId发出，因为我希望它是私有的，并且基于roomId。

严知

2023-03-14

在前端，您使用API来发送消息，而不是使用Socket on和emit来实时发送消息。因为您使用的是API，所以聊天只有在刷新后才会更新。

使用socket将MERN聊天应用程序转换为实时应用程序。木卫一

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档