React Native one to one conversation using socket.io

user_14582741 0
Viewed 3088

i currently have a react native app with nodejs express Sequelize as my backend and postgres as my database.

So, on my posts screen next to each post, i have a text input and a button where the current user can send the user of the post an initial message. Once the button is pressed, a conversation between these 2 users about this post is created in my database and stored in my conversation table and an entry of the message sent is also stored in my messages table.

I have implemented bidirectional communication between these 2 users. But my problem is i need to refresh the app in order to show the user current user the sent message and to show the receiving user the received message.

I have been researching for a while now and trying to understand how to implement this feature using socket.io but could not get anywhere.

Client Side

Here is my Chat Screen

 function ChatScreen({route,navigation}) {

 const message = route.params.message;
 const [messages, setMessages] = useState(message.Messages);
 const [text, setText] = useState('');
 const { user } = useAuth();
 const [socket, setSocket] = useState(null);


 useEffect(() => {
 const newsocket =io.connect(socketurl)
setMessages(messages);
newsocket.on('connection', msg => {
    console.log('i have joined')
    setMessages(messages=>messages.concat(msg))
    setSocket(newsocket)
 })
 return()=>newsocket.close;
 }, []);

const updateText=(text)=>{
setText(text);
}

  const onSend = (ConversationId,senderId,receiverId,message) => {
  console.log("sent")
messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
setText("")

socket.emit('message', { to: (user.id===route.params.message.user1 ? 
route.params.message.user2 : route.params.message.user1), from: 
user.id, message,ConversationId });
};

return(

<Text>{user.id === message.Recipient.id ? 
message.Creator.name:message.Recipient.name}</Text>

    <KeyboardAvoidingView 
    style={{
        display: "flex",
        flex: 1,
      }}
      behavior={Platform.OS === "ios" ? "padding" : null}
      keyboardVerticalOffset={Platform.OS === "ios" ? 25 : 0}
    >

<FlatList
    inverted
    data={message.Messages}
    keyExtractor={(message) => message.id.toString()}
    renderItem={({item,index})=>(
        <MessageBubble
        text={item.message}
        mine={item.senderId !== user.id}
        />
    )}/>

    <View style={styles.messageBoxContainer}>
        <TextInput 
        style={styles.messageBox} 
        placeholder="Message..." 
        multiline
        clearButtonMode="while-editing"
        onChangeText={updateText} 
        value={text} 
        autoCorrect={false}
        />
        <TouchableOpacity onPress={onSend}>
            <Text style={styles.send}>Send</Text>
        </TouchableOpacity>
    </View>
    </KeyboardAvoidingView>
)

Server Side

index.js

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

io.on("connection", socket => {
 socket.on('message', (data) => {
  socket.join(data.ConversationId);
  io.sockets.in(data.to).emit('send_message', { message: data.message, 
  to: data.to });
});
});

const port = process.env.PORT || config.get("port");
server.listen(port, function () {
console.log(`Server started on port ${port}...`);
});

Currently when i send a message, the message gets stored in my database but my chat does not update instantly (ie. not live), i need to refresh my app and the messages appear.

Can someone please help me and check if the implementation of socket i currently have is correct and if so, how do i render my flatlist instantly?

UPDATE

i think something is wrong in my useEffect, because when i open the chat i am not getting "i have joined" in the console:

useEffect(() => {
setMessages(messages);
socket.on('connect', msg => {
    console.log('i have joined')
    setMessages(messages=>messages.concat(msg))
 })
 }, []);
socket.io sequelize.js react-native node.js
2 Answers

Your currently creating a new connection on every state change.. const socket =io.connect(socketurl)

You have a useEffect callback and that would be the logical place to put your connection logic, currently your only listening once for a connection, but creating multiple connections, so your 'connection' event is never called on these new connections. But you only want to connect once anyway, so we just need to put the connection logic also inside the useEffect, not just the connection event.

Because connecting to a socket is async, you will want to wait for the connection before rendering. So what we could do is store the socket in state, and when we get a connection set socket state, this will fire a re-render with a now valid socket.

eg.

const [socket, setSocket] = useState(null);
...
useEffect(() => {
   const socket = io.connect(socketurl)
   setMessages(messages);
   newsocket.on('connect', msg => { //connect not connection
      console.log('i have joined')
      setMessages(messages=>messages.concat(msg));
      setSocket(newSocket);
   });
   //might make sense to close the socket too, 
   //otherwise a memory leak. 
   return () => newSocket.close();
}, [route, navigation]); 


if (!socket) {
  //we don't have a socket yet,
  return "loading..";
} else {
  // we have a socket, 
  const onSend = (ConversationId,senderId,receiverId,message) => {...
  ....
  // now render..
  return (
    <Text>{.........
user_68702280

Socket Index.js

    /** Socket.io server listens to our app **/
    var io = require('socket.io').listen(app);
    
    
    io.on('connection', function (socket) {
    /** On User Log In **/
    socket.on('login', function (data) {
            console.log('user joined >>', data)
            userList.addUser(data, socket);
        });

    // Example Event //
    socket.on('get_online_friends', userId => {
    //Get List Data And Then //
    let data = [UserList];
    socket.emit('send_online_friend', data);
    }
    )
    // On Logout //
     socket.on('disconnect', function (reason) {
            var offlineId = userList.removeUser(socket)
    );
    
    }

user_list.js

    var userList = {};
    module.exports = userList;
    
    var userData = [];
    var userSocData = {};
    
    userList.user = userData;
    userList.userSoc = userSocData;
    
    userList.getUserList = function () {
        return userSocData;
    };
    
    userList.addUser = function (user, client) {
        userSocData[user] = {
            socketId: client.id
        }
    };
    
    userList.setReceiverId = function (user, client) {
        var index = userData.findIndex(x => x.user_id == user['user_id']);
        if (index !== -1) {
            userData[index]['receiver_id'] = user['receiver_id'];
        }
        userSocData[user['user_id']] = {
            socket: client.id
        };
    };
    
    
    userList.removeUser = function (client) {
        for (const property in userSocData) {
            if (client.id === userSocData[property].socketId) {
                var userID = property;
                delete userSocData[property]
            }
        }
        return userID;
    };

Front End

    ***
    socket.emit("get_request", userData.user_id);
            socket.on("get_request_data", function (data) {
              if (data.status) {
                self.setState({ onlineFriends: data.data });
              }
            });
    ***
user_111368070
Related