CODEWITHSUNDEEP
javascriptc#asp.net-coresignalrblazor
sudip chand
sudip chand

Reputation: 265

How To Send Emoji With Text In Blazor SignalR

I have developed a private chat application using blazor server signalR where we can addfriend and chat with them privately.

Now, what I want is to send the emoji and text message.

What I have done to get emoji in input text box is that I have given Id id="mytext" to input which is bind to @bind="MsgBody" and that is passed to javascript function SetElemetById(id).

Now, the problem is that the MsgBody is null on button click @onclick="SendMessage" when Javascript function SetElemetById(id) is called in input, if its not called then we have value in MsgBody but we don't have emoji in input.

Any help with my code or any idea how can i send emoji and text will be great. Thank you

Below is my razor component html

<input type="text" name="message" id="mytext" @bind="MsgBody" class="form-control Message-Input">
<button type="button" class="btn btn-primary" @onclick="SendMessage"> Send</button><br><br>

Below is my code to call javascript function

protected override async Task OnInitializedAsync()
{
    await iJSRuntime.InvokeVoidAsync("SetElemetById","mytext");
}



Below is my javascript function

function SetElemetById(id) {
    var getTextBoxId = document.getElementById(id)
    $(getTextBoxId).emojioneArea({
    pickerPosition: "bottom"
    });
};



Below is my code to save message from input

    public async Task SendMessage()
    {
      dualMessage.MessageBody = MsgBody; // MsgBody is null
      dualMessage.SendOn = DateTime.Now;
      mainService.SaveChatMessage(dualMessage);
    }

Upvotes: 0

Views: 1439

Answers (2)

enet
enet

Reputation: 45704

What you do is wrong. Blazor Data-binding engine ignores any changes you render to the Html tags. Thus you can't affect the data binding of the input text element from JavaScript. This is why the MsgBody variable is always null. But even if you could, you should first try to implement every thing in Blazor, and if it proves impossible, resort to JSInterop.

protected override async Task OnInitializedAsync()
{
    await iJSRuntime.InvokeVoidAsync("SetElemetById","mytext");
}

Just for the records, you should initialize your JS objects from the OnAfterRender(Async) pairs, and only once; that is you call your init functions from within the if statement like this:

if(firstRender)
{
  // Call your JS init functions
}

Try the following to implement the emoji functionality:

  1. Go to Github and download the repository Code

  2. Unzip it... It is unzipped into a folder named: RealtimeChat_WebAssembly-master

  3. This folder contains two folders: EmojiPicker and WSDTChat. The EmojiPicker folder is empty. Why ? I did not waste time to learn.

  4. However, I solved this issue by downloading the code from here

  5. Extracted the folder, and then copied its content into the EmojiPicker folder. Do that...

  6. Open the solution in Visual Studio, build the solution, and then execute the command: update-database in the Package Manager Console in order to create the database. Now run the app and test it.

  7. Do test the functionality of adding emojis, as well as photos.

  8. Now, what you have to do is follow the relevant code to understand how the guy implemented the use of emojis...copy the necessary code and apply it to your chat.

  9. You may adopt from this app functionalities your app is missing as well as the UI look and behavior.

Please do the above, and if you have encountered any issue let me know. If you are a programmer, then you should happily try to solve all the issues alone. But I'm here, and I'm not a programmer;}

Upvotes: 2

Daniel W.
Daniel W.

Reputation: 1198

Why not making it without javascript?

Define a array with the utf32 emojis you want and create a keypad in the browser to add those emojis.

<!-- Emoji Keyboard -->
<div>
  @foreach (var c in emojis)
  {
    <button type="button" class="btn btn-primary m-1" @onclick="(() => AddEmoji(c))" >@c</button>
  }
</div>

@code {
   //List of emojis
   String[] emojis = new String[] { "\U0001F600", "\U0001F601", "\U0001F602", "\U0001F602" };

   //Add Emoji to Message
   protected async Task AddEmoji(string emoji)
   {
       MsgBody += emoji;
       StateHasChanged();
   }

Upvotes: 4

Related Questions