How can i send and receive emoji icons in ionic 3 chat application?

I am using https://github.com/HsuanXyz/ionic3-chat this link. all are working very well, but i can't send and receive emoji on chat conversation screen.I am not able to send and receive emoji icons, I receive ???? when i send any emoji icon. can see below image:

My .html code is here:

<ion-footer no-border [style.height]="showEmojiPicker ? '255px' : '55px'">
<div class="input-wrap">
<button ion-button clear icon-only item-right (click)="switchEmojiPicker()">
<ion-icon name="md-happy"></ion-icon>
</button>

<textarea class="textMsg" #chat_input
placeholder="Type a message"
[(ngModel)]="editorMsg"
(keyup.enter)="sendMsg()"
(focusin)="onFocus()">
</textarea>
<button ion-button clear icon-only item-right (click)="sendMsg()">
<ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
</button>
</div>
<emoji-picker [(ngModel)]="editorMsg"></emoji-picker>
</ion-footer>


.ts file code:

import Component, ElementRef, ViewChild from '@angular/core';
import IonicPage, NavController, NavParams, AlertController from 'ionic-angular';
import Events, Content from 'ionic-angular';
// import ChatService, ChatMessage, UserInfo from "../../providers/chat-service";
import * as moment from 'moment';
import ServiceProvider from '../../providers/service/service';
import Storage from "@ionic/storage";
import Loader from "../../providers/loader/loader";
// import EmojiPickerComponentModule from "../../components/emoji- picker/emoji-picker.module";


@IonicPage()
@Component(
selector: 'page-conversationchat',
templateUrl: 'conversationchat.html',
)

export class ConversationchatPage
// selectedImojiPickerIten: EmojiPickerItem;
@ViewChild(Content) content: Content;
@ViewChild('chat_input') messageInput: ElementRef;

msgList: any = ;
// user: UserInfo;
// toUser: UserInfo;
editorMsg = '';
showEmojiPicker = false;
userId : any;
sessionId: any;
conversationData: any;

receiverPic: any;
receiverName: any;
receiverId: any;
conversationId: any;

chatType: any;
messages: any;

// toggled: boolean = false;
// emojitext: string;

constructor(public navCtrl: NavController, public navParams:
NavParams, private loader: Loader, private alertCtrl:
AlertController, private events: Events, public serviceProvider:
ServiceProvider, private storage: Storage)



ionViewDidLoad()
console.log('ionViewDidLoad ConversationchatPage');

ionViewWillEnter()
this.storage.get("userData").then(userData =>
// console.log("user profile data" +JSON.stringify(userData));
this.userId = userData.data.User_Id;
this.sessionId = userData.data.Session_Id;
);

this.storage.get("conversationData").then(conversationData =>
// console.log("conversationData"
+JSON.stringify(conversationData));

if(conversationData.Receiver_ProfilePic == "")
this.receiverPic = "assets/imgs/profileuser.png";
else
this.receiverPic = conversationData.Receiver_ProfilePic;

this.receiverName = conversationData.Receiver_Name;
this.receiverId = conversationData.Receiver_Id;
this.conversationId = conversationData.Converstion_Id;
);

this.storage.get("chatType").then(chatType =>
this.chatType = chatType;
);
this.getMsg();

goBack()
this.navCtrl.pop();


ionViewWillLeave()
// unsubscribe
this.events.unsubscribe('chat:received');


ionViewDidEnter()
//get message list
this.getMsg();

// Subscribe to received new message events
this.events.subscribe('chat:received', msg =>
this.pushNewMsg(msg);
)


onFocus()
this.showEmojiPicker = false;
this.content.resize();
this.scrollToBottom();


switchEmojiPicker()
this.showEmojiPicker = !this.showEmojiPicker;
if (!this.showEmojiPicker)
this.focus();
else
this.setTextareaScroll();

this.content.resize();
this.scrollToBottom();



getMsg()

let getConversionMsgObj =
"User_Id": this.userId,
"sessionId": this.sessionId,
"Chat_Message": this.editorMsg,
"Chat_Id": this.receiverId,
"Chat_Type": this.chatType



this.serviceProvider.chatHistoryApi(getConversionMsgObj).then((result) =>
// console.log("result Conversation chat history"
+JSON.stringify(result));
if(result["success"] == 1)
// this.loader.hide();
this.msgList = result["data"].ChatHistory;
// console.log("this.msgList", this.msgList);
for(let msgUserImage of this.msgList)
// console.log("msgUserImage", msgUserImage);
if(msgUserImage.User_ProfilePic == "")
msgUserImage.User_ProfilePic = "assets/imgs/profileuser.png";

if(msgUserImage.Chat_Time)
// var now = moment();
msgUserImage.Chat_Time = moment.utc(msgUserImage.Chat_Time);





this.scrollToBottom();

else if(result["success"] == 4)
// this.loader.hide();
let alert = this.alertCtrl.create(
subTitle: result["message"],
buttons: [

text: 'OK',
handler: () =>
console.log('ok clicked');
this.navCtrl.push("SigninPage");


]
);
alert.present();

else if(result["success"] == 0)
// this.loader.hide();

else


, (err) =>
// this.loader.hide();
console.log("err profile" +JSON.stringify(err));
// Error log
);



sendMsg()
if (!this.editorMsg.trim()) return;

// Mock message
const id = Date.now().toString();
let chatMsg =

"User_Id": this.userId,
"sessionId": this.sessionId,
"Chat_Message": this.editorMsg,
"Chat_Id": this.conversationId,
"Chat_Type": this.chatType

;

this.pushNewMsg(chatMsg);
this.editorMsg = '';

if (!this.showEmojiPicker)
this.focus();

// console.log("chatMsg", chatMsg);
this.serviceProvider.sendMessageApi(chatMsg).then((result) =>
// console.log("result profile" +JSON.stringify(result));
if(result["success"] == 1)
this.scrollToBottom();
this.getMsg();
// let index = this.getMsgIndexById(id);
// if (index !== -1)
// this.msgList[index].status = 'success';
//
else if(result["success"] == 4)
this.loader.hide();
let alert = this.alertCtrl.create(
subTitle: result["message"],
buttons: [

text: 'OK',
handler: () =>
console.log('ok clicked');
this.navCtrl.push("SigninPage");


]
);
alert.present();
else


, (err) =>
// this.loader.hide();
console.log("err profile" +JSON.stringify(err));
// Error log
);





pushNewMsg(msg)
// console.log("msg pushMsg", msg);
const userId = this.userId,
toUserId = this.receiverId;
// Verify user relationships
if (msg.User_Id === userId && msg.Chat_Id === toUserId)
this.msgList.push(msg);
else if (msg.Chat_Id === userId && msg.User_Id === toUserId)
this.msgList.push(msg);

this.scrollToBottom();


getMsgIndexById(id: string)
return this.msgList.findIndex(e => e.messageId === id)


scrollToBottom()
setTimeout(() =>
if (this.content.scrollToBottom)
this.content.scrollToBottom();

, 400)


private focus()
if (this.messageInput && this.messageInput.nativeElement)
this.messageInput.nativeElement.focus();



private setTextareaScroll()
const textarea =this.messageInput.nativeElement;
textarea.scrollTop = textarea.scrollHeight;





How to solve this issue, I need a solution as soon as possible.

1 Answer
1

Check this awesome plugin -
Emoji

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy