When I Send a message the other user gets 1 emit multiple times using socket.io client

[cubesdev8]

When I Send a message the other user gets 1 emit multiple times usin socket.io client

[cubesdev8]

in react native

[artstylee]

you must clean up listeners

[cubesdev8]

can you elaborate how to do that?

[cubesdev8]

can you elaborate how to do that?

…

On Mon, Dec 20, 2021 at 6:30 AM artstylee ***@***.***> wrote: you must clean up listeners — Reply to this email directly, view it on GitHub <#4222 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AU7WWONZAFQODNQ3DFXC4M3URZ53TANCNFSM5KLUOU2A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[cubesdev8]

also getting error callbacks[i].apply in react native with socket.io

[artstylee]

show your code

[cubesdev8]

import React, { useState, useRef, useEffect } from 'react';
import {
View,
Text,
SafeAreaView,
StyleSheet,
Image,
TouchableOpacity,
FlatList,
TextInput,
StatusBar,
Dimensions,
Keyboard,
ActivityIndicator,
KeyboardAvoidingView,
} from 'react-native';
import { useIsFocused } from '@react-navigation/native';
import ImagePicker from 'react-native-image-crop-picker';
import Snackbar from 'react-native-snackbar';
import { Avatar } from 'react-native-elements';
import moment from 'moment';
import BottomSheet from 'react-native-raw-bottom-sheet';
import { Platform } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';
import { socket } from '../screens/Constatant';
import StringsOfLanguages from './Languages';
import DeviceInfo from 'react-native-device-info';
let device_id = DeviceInfo.getUniqueId();

const Emoji = require('../assets/icon/ic_emoji.png');
const back = require('../assets/icon/ic_back_white.png');
const camera = require('../assets/icon/ic_camera.png');
const send = require('../assets/icon/send.png');
const deleteicon = require('../assets/icon/Delete.png');
let default_pic = require('../assets/icon/no-user.png');

const Conversation = ({ route, navigation, navigation: { goBack } }) => {
var textInput = useRef();
const isFocused = useIsFocused();
const { name, chat_created_to, chat_id, chat_created_by, message_by } = route.params;
const refBottomSheet = useRef();
const [image, setImage] = useState();
const [heightBottomSheet, setHeightBottomSheet] = useState(320);
const [first_name, setFirstname] = useState();
const [userid, setUser_Id] = useState();
// console.log('useref',userid);
const [message_List, setMessageList] = useState([]);
console.log('message_List_1st', message_List.length)
const [mesg, setMsg] = useState();
const [childrenloading, setChildrenLoading] = useState(false);
const [SendButtonloading, setSendButtonloading] = useState(false);

const [chatid, setChatId] = useState("");
// console.log("chatid", chatid)
const [Visible, setVisible] = useState(false);
const [ID, setId] = useState();
const [count, setCount] = useState(0);

// console.log(ID)
useEffect(async () => {

getMessageList();
const unsubscribe = navigation.addListener('focus', async () => {
  // fetchemit();
  const intselect = await AsyncStorage.getItem('language')
  StringsOfLanguages.setLanguage(intselect);
  if (!chat_id) {
    chatid ? null : createchat();

    const user_id = await AsyncStorage.getItem('user_id');
    setUser_Id(user_id);
    // setchat_id(chat_id);
    let chat_id = chatid;
    // console.log("if vali chat_id", chatid)

    socket.emit('join_room', {
      chat_id: JSON.stringify(chat_id),
      user_id: user_id,
    });
  } else {
    setChildrenLoading(true);
    // getMessageList();
    const user_id = await AsyncStorage.getItem('user_id');
    setUser_Id(user_id);
    const chat_id = route.params.chat_id;
    // console.log("else vali chat_id", chat_id)
    socket.emit('join_room', {
      chat_id: JSON.stringify(chat_id),
      user_id: user_id,
    });

    // socket.on('left_room', { 'chat_id': JSON.stringify(chat_id)})
  }
});
return unsubscribe;

}, []);

// socket.on('disconnect')

// socket.on('new_message_2', data => {
// console.log('new_message emit', data.info.id);
// // console.log("message_List", message_List);
// // setMessageList(message_List.push(data.info))
// // message_List.push(data.info)

// console.log("asd", message_List[message_List.length - 1])

// if(message_List[message_List.length - 1].id == data.info.id){
// console.log("Ankit In")
// }else{
// message_List.unshift(data.info)
// }

// // console.log("asd", message_List[message_List.length - 1])
// // message_List.unshift(data.info)
// // setMessageList(message_List.push(res.data.info))
// // setMessageList(message_List => [...message_List, message_List.unshift(res.data.info)]);
// // console.log("dsa", message_List[0])
// });

// socket.on('unread_home', function (data) {
// // console.log('unread_home mali', data.info.sums )
// console.log('Conveersa emit mali', data)

// if (data.value == 1) {
// setGetmsg(true)
// } else if (data.value == 0) {
// setGetmsg(false)
// } else {
// null
// }
// })

socket.on("connect", () => {
console.log(socket.id); // x8WIv7-mJelg7on_ALbx
});
socket.on("connect_error", () => {
socket.auth.token = "abcd";
socket.connect();
});

socket.on('new_message', data=>{
console.log('new_message emit id', data.info);
console.log('new_message emit msg', data.info.message);

// console.log("message_List_emit", await message_List);
// // setMessageList(message_List.push(data.info))
// // message_List.push(data.info)
// var an = message_List.length;
// console.log("asd1", an)
// console.log("asd", message_List[0])


// if (message_List[0].id == data.info.id) {
//   console.log("Ankit In")
// } else {
//   message_List.unshift(data.info)
// }





// setMessageList(message_List.push(res.data.info))
// setMessageList(message_List => [...message_List, message_List.unshift(res.data.info)]);
// console.log("dsa", message_List[0])

})
// if(socket.connected == false)
// // socket.on("disconnect", async() =>
// {
// socket.on('disconnect', { 'user_id': userid ,'device_id': device_id })

// }

const SendMessage = async () => {

// console.log(user_id,
//   chat_id,
//   other_id,
//   msg_type,
//   msg)

  console.log("23334")


let snd = {
  user_id: await AsyncStorage.getItem('user_id'),
  chat_id: chatid ? chatid : route.params.chat_id,
  other_id : route.params.chat_created_to,
  msg_type : 1,
  msg : mesg
}



socket.emit('send_message',snd)
console.log(snd)

// textInput.clear();
// setSendButtonloading(true)

// const user_id = await AsyncStorage.getItem('user_id');
// const chat_id = chatid ? chatid : route.params.chat_id;
// console.log(chat_id)

// const other_id = route.params.chat_created_to;
// const token = await AsyncStorage.getItem('token');
// const msg_type = 1;
// const msg = mesg;
// const Body = { chat_id, user_id, other_id, msg_type, msg };
// // console.log("Body",Body)
// // console.log(user_id, other_id);
// setMsg('');
// axios
//   .post(
//     'api',
//     Body,
//     {
//       // or 'PUT'
//       headers: {
//         Authorization: `Bearer ${token}`,
//       },
//     },
//     [],
//   )
//   .then(res => {
//     // console.log('hello', message_List);
//     const response = res.data.status;
//     // console.log("sendmsg res", res.data.info)
//     const id1 = res.data.info
//     if (response == 1) {
//       console.log("Ankit")

//       // {"chat_id": 1, "created_date": "2021-12-18T09:18:14.000Z", "first_name": "1", "id": 1134, "message": "6fd6d", "message_by": 55, "message_to": 51, "message_type": 1, "profile_pic": "uploads/9fe94f833f80995a14d25595d23b3fc7", "read_at": null}

//       // console.log("send res", res)
//       message_List.unshift(res.data.info)
//       // setMessageList(message_List.push(res.data.info))
//       // setMessageList(message_List => [...message_List, message_List.unshift(res.data.info)]);
//       // console.log("dsa", message_List[message_List.length - 1])
//       // console.log("user_id", user_id);
//       setSendButtonloading(false)

//       setMsg('');

//     }
//   })
//   .catch(error => { setSendButtonloading(false) });

};

const ondelete = async () => {
const token = await AsyncStorage.getItem('token');
const id = await AsyncStorage.getItem('id');
const chat_id = await AsyncStorage.getItem('chat_id');
const Body = { id, chat_id };
// console.log(Body);
axios
.post(api/delete_chat_msg', Body, {
// or 'PUT'
headers: {
Authorization: Bearer ${token},
},
})
.then(res => {
if (res) {
AsyncStorage.removeItem('chat_id')
AsyncStorage.removeItem('id')
setVisible(false)
// getMessageList();
}
})
.catch(error => {
if (error) {
// console.log('Network error');
}

  });

}

const createchat = async () => {
// console.log('createchat called');
const chat_created_by = route.params.chat_created_by;
const chat_created_to = route.params.chat_created_to;
const token = await AsyncStorage.getItem('token');
const Body = { chat_created_by, chat_created_to };
// console.log(Body);
axios
.post('api', Body, {
// or 'PUT'
headers: {
Authorization: Bearer ${token},
},
})
.then(res => {
const Data = res.data.info;

    // console.log(Data.chat_id);

    setFirstname(Data.first_name);
    setChatId(Data.chat_id);
    // console.log(Data.chat_id);
    if (Data.chat_id) {
      // getMessageList(Data.chat_id);
    }
  })
  .catch(error => {
    // console.log(error);
  });

};

const keyboardDidShow = () => {
setKeyboardOn(true);
};

const keyboardDidHide = () => {
setKeyboardOn(false);
};

const getMessageList = async id => {
// socket.on('count_update', data => {
// setCount(1)
// })
// console.log('getMessageList called');

const user_id = await AsyncStorage.getItem('user_id');
const chat_id = id ? id : chatid ? chatid : route.params.chat_id;
const other_id = route.params.chat_created_to;
const token = await AsyncStorage.getItem('token');
// console.log("message_by", route.params.message_by)
// console.log("user_id", user_id)
const reset_count = route.params.message_by == user_id ? 0 : 1;
console.log("reset_count", reset_count)
// const reset_count = (userid==chat_created_by)? 1 : 0;

const Body = { chat_id, user_id, other_id, reset_count };
// console.log(Body);
axios
  .post(api/get_chat_messages', Body, {
    // or 'PUT'
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })
  .then(res => {
    const messageList = res.data.info;
    // console.log("Harsh", messageList)
    setMessageList(messageList);
    setChildrenLoading(false);
  })
  .catch(error => {
    setChildrenLoading(false);
    setSendButtonloading(false);
  });

};

const takePhotoFromCamera = () => {
ImagePicker.openCamera({
quality: 1,
// compressImageQuality: 0.7
}).then(image => {
setImage(image.path);
refBottomSheet.current.close(true);
});
};
const choosePhotoFromLibrary = () => {
ImagePicker.openPicker({
quality: 1,
}).then(image => {
setImage(image.path);

  refBottomSheet.current.close(true);
});

};

const goback = () => {
const chat_id = route.params.chat_id ? route.params.chat_id : chatid;
socket.emit('left_room', {
chat_id: JSON.stringify(chat_id),
});
goBack()
}

const onLongPress = async (chat_id, id) => {
setId(id.toString())
const chatiid = await AsyncStorage.getItem('chat_id');
if (ID == chatiid) {
AsyncStorage.removeItem('chat_id')
setVisible(false)
} else {
AsyncStorage.setItem('chat_id', chat_id.toString())
setVisible(true)
}

if (ID == id) {
  AsyncStorage.removeItem('id')
  setVisible(false)
  setId(0)
} else {
  AsyncStorage.setItem('id', id.toString())
  AsyncStorage.setItem('chat_id', chat_id.toString())
  setVisible(true)
}

}

return (

{isFocused ? (

) : null}

  <View
    style={{
      height: 70,
      flexDirection: 'row',
      justifyContent: 'space-between',
    }}>
    <View
      style={{
        top: 30,
        height: 25,
        zIndex: 1,
        width: '15%',
        justifyContent: 'center', alignItems: 'center'

      }}>
      <TouchableOpacity
        style={{ height: 25, width: 25 }}
        onPress={goback}>
        <Image
          source={back}
          style={{ height: 20, width: 20, resizeMode: 'contain' }}
        />
      </TouchableOpacity>
    </View>

    <View
      style={{
        height: '100%',
        justifyContent: 'center',
        width: '70%', alignItems: 'center'
      }}>
      <Text
        style={{
          fontSize: 18,
          fontFamily: 'Roboto-Medium',
          color: '#fff',
        }}>
        {first_name ? first_name : name}
      </Text>
    </View>
    <View
      style={{
        top: 30,
        height: 25,
        zIndex: 1,
        width: '15%', justifyContent: 'center', alignItems: 'center'
      }}>
      {Visible ?
        <TouchableOpacity
          style={{ height: 25, width: 25 }}
          onPress={ondelete}
        >
          <Image
            source={deleteicon}
            style={{ height: 20, width: 20, resizeMode: 'contain' }}
          />
        </TouchableOpacity>
        : null}
    </View>

  </View>







  <KeyboardAvoidingView
    style={{ flex: 1 }}
    behavior={Platform.OS === 'ios' ? 'padding' : ''}>
    <View
      style={{
        height: '100%',
        borderTopRightRadius: 35,
        borderTopLeftRadius: 35,
        backgroundColor: '#fff',
      }}>
      <View
        style={{
          height:
            Platform.OS === 'ios' ? '102.5%' : '100%',
          // ? Dimensions.get('window').height / 1.20
          // : Dimensions.get('window').height / 1.14,
          backgroundColor: '#FFF',
          borderTopRightRadius: 35,
          borderTopLeftRadius: 35,
          paddingBottom: 60
        }}>
        {childrenloading ? (
          <View
            style={{
              height: '100%',
              width: '100%',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <ActivityIndicator size="large" color="#0F2B53" />
          </View>
        ) : (
          <FlatList
            data={message_List}
            showsVerticalScrollIndicator={false}
            keyExtractor={item => item.id}
            inverted
            borderBottomRightRadius={35}
            borderBottomLeftRadius={35}

            renderItem={({ item }) => (
              <View
                style={{
                  backgroundColor: 'transparent',
                  width: Platform.OS === 'ios' ? '95%' : '89%',
                  alignSelf: 'center',
                  marginTop: 8,
                  marginBottom: 20,


                }}>
                {item.message_by == userid ? (
                  <TouchableOpacity style={{ backgroundColor: ID == item.id.toString() && Visible == true ? '#BCD2E8' : 'transparent' }} onLongPress={() => onLongPress(item.chat_id, item.id)} onPress={() => ID == item.id.toString() ? AsyncStorage.removeItem('id') | setVisible(false) | setId(0) : null}>
                    <View
                      style={{
                        borderTopRightRadius: 10,
                        borderTopLeftRadius: 10,
                        borderBottomLeftRadius: 10,
                        backgroundColor: '#E9E9E9',
                        width: '70%',
                        right: 10,
                        alignSelf: 'flex-end',

                      }}>
                      <Text
                        multiline={true} s
                        style={{
                          right: 5,
                          color: '#0F2B53',
                          alignSelf: 'flex-start',
                          padding: 10,
                          fontFamily: 'Roboto-Regular',
                        }}>
                        {decodeURIComponent(item.message)}
                      </Text>

                      <Text
                        style={{
                          right: 10,
                          color: '#0F2B53',
                          alignSelf: 'flex-end',
                          alignItems: 'flex-end',
                          fontFamily: 'Roboto-Regular',
                          fontSize: 10,
                          bottom: 7,
                        }}>
                        {moment(item.created_date)
                          .local()
                          .format('HH:mm a')}
                      </Text>
                    </View>
                  </TouchableOpacity>
                )



                  : item.message_by != userid ? (
                    <View
                      style={{
                        flexDirection: 'row',
                        justifyContent: 'space-around',
                      }}>
                      {!item.profile_pic ? <Avatar size={44} rounded source={default_pic} />
                        :
                        <Avatar
                          size={44}
                          rounded
                          source={{
                            uri:
                              ''api +
                              item.profile_pic,
                          }}
                          style={{
                            resizeMode: 'contain',
                            height: 40,
                            width: 40,
                            left: 7,
                            alignSelf: 'flex-end',
                          }}
                        />}

                      <View
                        style={{
                          backgroundColor: '#0F2B53',
                          width: '70%',
                          right: 10,
                          borderTopRightRadius: 10,
                          borderTopLeftRadius: 10,
                          borderBottomRightRadius: 10,
                        }}>
                        <View style={{}}>
                          <Text
                            multiline={true}
                            style={{
                              color: 'white',
                              alignSelf: 'flex-start',
                              padding: 10,
                              fontFamily: 'Roboto-Regular',
                            }}>
                            {decodeURIComponent(item.message)}
                          </Text>
                        </View>
                        <Text
                          style={{
                            left: 10,
                            color: '#DEDBD8',
                            alignSelf: 'flex-start',
                            fontFamily: 'Roboto-Regular',
                            fontSize: 10,
                            bottom: 7,
                          }}>
                          {moment(item.created_date)
                            .local()
                            .format('HH:mm a')}
                        </Text>
                      </View>
                    </View>
                  ) : // item.sendimage ? (
                    //   <View
                    //     style={{
                    //       flexDirection: 'row',
                    //       justifyContent: 'space-around',
                    //     }}>
                    //     <Avatar size={55} rounded source={avatar}
                    //       style={{
                    //         resizeMode: 'contain',
                    //         height: 40,
                    //         width: 40,
                    //         left: 7,
                    //         alignSelf: 'flex-end',
                    //       }}
                    //     />
                    //     <View
                    //       style={{
                    //         width: '70%',
                    //         right: 10,
                    //         alignSelf: 'flex-start',
                    //       }}>
                    //       <Image
                    //         source={item.sendimage}
                    //         style={{
                    //           height: 150,
                    //           width: '100%',
                    //           borderTopRightRadius: 10,
                    //           borderTopLeftRadius: 10,
                    //           borderBottomRightRadius: 10,
                    //         }}
                    //       />
                    //     </View>
                    //   </View>
                    // ) : item.receiveimage ? (
                    //   <View
                    //     style={{ width: '70%', right: 10, alignSelf: 'flex-end' }}>
                    //     <Image
                    //       source={item.receiveimage}
                    //       style={{
                    //         height: 150,
                    //         width: '100%',
                    //         borderTopRightRadius: 10,
                    //         borderTopLeftRadius: 10,
                    //         borderBottomLeftRadius: 10,
                    //       }}
                    //     />
                    //   </View>
                    // )
                    //   :

                    null}
              </View>
            )}
          />
        )}

        <View
          style={{
            position: 'absolute',
            zIndex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
            backgroundColor: '#fff',
            alignSelf: 'center',
            borderColor: '#0F2B53',
            borderWidth: 1,
            borderRadius: 50,
            width: '95%',
            bottom: 20,
          }}>
          <TouchableOpacity
            style={{ alignItems: 'center', justifyContent: 'center', left: 10 }}>
            <Image
              source={Emoji}
              style={{ height: 20, width: 20 }}
            />
          </TouchableOpacity>
          <TextInput
            placeholder={StringsOfLanguages.placeHolder}
            ref={input => {
              textInput = input;
            }}
            value={textInput}
            multiline
            placeholderTextColor="#c1c1c1"
            onChangeText={text => setMsg(text)}
            style={{
              width: '80%',
              minHeight: 45,
              maxHeight: 130,
              overflow: 'hidden',
              fontFamily: 'Roboto-Regular',
              paddingLeft: 20,
              paddingTop: 15,
              color: '#0f2b53'
            }}
          />
          <View
            style={{
              minHeight: 40,
              minWidth: 40,
              resizeMode: 'contain', alignItems: 'center', justifyContent: 'center',
              right: Platform.OS === 'ios' ? 1 : 5
            }}>
            {mesg ? (
              <TouchableOpacity
                style={{ zIndex: 1 }}
                activeOpacity={0.99}
                onPress={SendMessage}>
                <Image
                  source={send}
                  style={{ height: 40, width: 40, resizeMode: 'contain' }}
                />
              </TouchableOpacity>
            ) : SendButtonloading == true ? <View

              style={{ zIndex: 1, height: 40, width: 40, resizeMode: 'contain', justifyContent: 'center', alignItems: 'center' }}
            >
              <ActivityIndicator size="small" color="#0F2B53" />
            </View> : null}
          </View>
        </View>
      </View>
    </View>
  </KeyboardAvoidingView>

  <BottomSheet
    ref={refBottomSheet}
    closeOnDragDown={true}
    closeOnPressMask={false}
    shouldMeasureContentHeight={true}
    height={heightBottomSheet}
    customstyles={{
      wrapper: {
        backgroundColor: 'transparent',
      },
      draggableIcon: {
        backgroundColor: '#000',
      },
    }}>
    <View style={styles.panel}>
      <View style={{ alignItems: 'center' }}>
        <Text style={styles.panelTitle}>Send Photo</Text>
        <Text style={styles.panelSubtitle}>Send Image</Text>
      </View>
      <TouchableOpacity
        activeOpacity={0.99}
        style={styles.panelButton}
        onPress={takePhotoFromCamera}>
        <Text style={styles.panelButtonTitle}>Take Photo</Text>
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.99}
        style={styles.panelButton}
        onPress={choosePhotoFromLibrary}>
        <Text style={styles.panelButtonTitle}>Choose From Library</Text>
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.99}
        style={styles.panelButton}
        onPress={() => refBottomSheet.current.close()}>
        <Text style={styles.panelButtonTitle}>Cancel</Text>
      </TouchableOpacity>
    </View>
  </BottomSheet>
</SafeAreaView>

);
};
export default Conversation;

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#0F2B53',
},
panel: {
flex: 1,
height: 300,
padding: 20,
backgroundColor: '#FFFFFF',
paddingTop: 20,
},
buttonImageIconStyle: {
height: 15,
width: 30,
resizeMode: 'contain',
tintColor: '#164273',
},
panelTitle: {
fontFamily: 'Roboto-Medium',
fontSize: 27,
height: 35,
},
panelSubtitle: {
fontFamily: 'Roboto-Medium',
fontSize: 14,
color: 'gray',
height: 30,
marginBottom: 10,
},
panelButton: {
padding: 13,
borderRadius: 10,
backgroundColor: '#0F2B53',
alignItems: 'center',
marginVertical: 7,
},
panelButtonTitle: {
fontSize: 17,
fontFamily: 'Roboto-Medium',
color: '#ffffff',
},
});

[cubesdev8]

i have globled a socket!
may be you can tell how to @artstylee