Emojis in ionic chat app aren't well received

Ionic Framework ionic-v3
1

I’m working on ionic chat app, where I used the Firebase-cloud-messaging service to push the messages from the sender to the receiver.

I tried to add an emoji picker to my app but not all emojies are received in the correct format by the receiver.

Here are the data format sent between each part :

Client to server (Json object)
Server to FCM server (Json string)
FCM server to client (Json string)
–> Client creates a json object from the received json string
Here is how the emojis are written in the ionic code :


const EMOJIS = "😀 😃 😄 😁 😆 😅 😂 🤣 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 🤡 🤠 😏 😒 😞 😔 😟 😕 🙁" +
       " ☹️ 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 🤤 😭 😓 😪 😴 🙄 🤔 🤥 😬 🤐 🤢 🤧 😷 🤒 🤕 😈 👿" +
       " 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚" +
       " 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🤳 💅 🖖 💄 💋 👄 👅 👂 👃 👣 👁 👀 🗣 👤 👥 👶 👦 👧 👨 👩 👱‍♀️ 👱 👴 👵 👲 👳‍♀️ 👳 👮‍♀️ 👮 👷‍♀️ 👷" +
       " 💂‍♀️ 💂 🕵️‍♀️ 🕵️ 👩‍⚕️ 👨‍⚕️ 👩‍🌾 👨‍🌾 👩‍🍳 👨‍🍳 👩‍🎓 👨‍🎓 👩‍🎤 👨‍🎤 👩‍🏫 👨‍🏫 👩‍🏭 👨‍🏭 👩‍💻 👨‍💻 👩‍💼 👨‍💼 👩‍🔧 👨‍🔧 👩‍🔬 👨‍🔬" +
       " 👩‍🎨 👨‍🎨 👩‍🚒 👨‍🚒 👩‍✈️ 👨‍✈️ 👩‍🚀 👨‍🚀 👩‍⚖️ 👨‍⚖️ 🤶 🎅 👸 🤴 👰 🤵 👼 🤰 🙇‍♀️ 🙇 💁 💁‍♂️ 🙅 🙅‍♂️ 🙆 🙆‍♂️ 🙋 🙋‍♂️ 🤦‍♀️ 🤦‍♂️ 🤷‍♀" +
       "️ 🤷‍♂️ 🙎 🙎‍♂️ 🙍 🙍‍♂️ 💇 💇‍♂️ 💆 💆‍♂️ 🕴 💃 🕺 👯 👯‍♂️ 🚶‍♀️ 🚶 🏃‍♀️ 🏃 👫 👭 👬 💑 👩‍❤️‍👩 👨‍❤️‍👨 💏 👩‍❤️‍💋‍👩 👨‍❤️‍💋‍👨 👪 👨‍👩‍👧" +
       " 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👦 👩‍👧" +
       " 👩‍👧‍👦 👩‍👦‍👦 👩‍👧‍👧 👨‍👦 👨‍👧 👨‍👧‍👦 👨‍👦‍👦 👨‍👧‍👧 👚 👕 👖 👔 👗 👙 👘 👠 👡 👢 👞 👟 👒 🎩 🎓 👑 ⛑ 🎒 👝 👛 👜 💼 👓" +
       " 🕶 🌂 ☂️";

Here is how it’s sent from the sender :

2
2.PNG407×573 30.4 KB

And here is how it’s received by the receiver :

Screenshot_20180313-115056
Screenshot_20180313-115056.jpg1079×1675 92.5 KB

Had anyone encountered this problem before ??
Thanks in advance and I hope my explanation for the problem was clear enough.

2

Hi , you can’t use emoji like a normal text you should instal emoji-picker

npm i @ionic-tools/emoji-picker --save

https://www.npmjs.com/package/@ionic-tools/emoji-picker

3

Hi, Thanks for the suggestion.
Actually I coud send some of the emojies like this but not all of them. I’m using the unicode of the emojies.
And I think that parsing it many times made it lose something but i couldn’t figure it out.

4

make sure your using the right unicode(the newest version so that all emojis are there) in your backend.
And that the unicode is properly encoded in the transfer s
If you are using mysql you have to use the one with more supported bytes per character

5

I also have this problem to display emoji in Ionic 3.

I created a chat application where I use emoji, but when I send an emoji it sends an empty message to the reception of the emoji.

Can you tell me how you were able to send and receive the emoji in your application, please?

Here is my question that I posted today on the forum