如何在SignalR中发送带有文本的Emoji

Question

我已经开发了一个私人聊天应用程序使用blazor服务器signalR，在那里我们可以添加朋友，并与他们私下聊天。

现在，我想要的是发送表情符号和短信。

为了在输入文本框中获取表情符号，我所做的是给Id id="mytext"输入，这是绑定到@bind="MsgBody"并传递给javascript函数SetElemetById(id)的。

现在，问题是当在输入中调用Javascript函数MsgBody时，单击@onclick="SendMessage"按钮上的SetElemetById(id)为null，如果不调用它，则在MsgBody中有值，但输入中没有表情符号。

任何帮助我的代码或任何想法，我如何发送表情和文字将是伟大的。谢谢

下面是我的剃须刀组件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>

下面是我调用javascript函数的代码

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

下面是我的javascript函数

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

下面是我从输入中保存消息的代码

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

Answer 1

你做的事是错的。Blazor数据绑定引擎会忽略对Html标记的任何更改。因此，您不能影响来自JavaScript的输入文本元素的数据绑定。这就是为什么MsgBody变量总是为null的原因。但是，即使可以，您也应该首先尝试在Blazor中实现所有的东西，如果这是不可能的，就求助于JSInterop。

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

只是为了记录，您应该从OnAfterRender(异步)对初始化JS对象，并且只初始化一次；也就是说，您应该从if语句中调用init函数，如下所示：

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

尝试以下方法来实现表情符号功能：

1. 转到Github并下载存储库代码
2. 打开拉链..。它被解压缩到一个名为：RealtimeChat_WebAssembly-master的文件夹中。
3. 此文件夹包含两个文件夹：EmojiPicker和WSDTChat. -- EmojiPicker文件夹为空。为什么？我没有浪费时间去学习。
4. 但是，我通过从这里下载代码来解决这个问题。
5. 提取文件夹，然后将其内容复制到EmojiPicker文件夹中。那样做..。
6. 在Visual中打开解决方案，构建解决方案，然后在Package控制台中执行命令：update-database，以便创建数据库。现在运行这个应用程序并测试它。
7. 测试添加表情符号和照片的功能。
8. 现在，您要做的是按照相关的代码来理解这个家伙是如何实现使用emojis...copy的必要代码的，并将它应用到您的聊天中。
9. 您可以通过这个应用程序的功能，您的应用程序是缺失的，以及UI的外观和行为。

请做上面的工作，如果你遇到任何问题，请告诉我。如果你是一个程序员，那么你应该高兴地尝试独自解决所有的问题。但我在这里，我不是程序员；}

Answer 2

为什么不在javascript的情况下成功呢？

使用您想要的utf32表情符号定义一个数组，并在浏览器中创建一个键区来添加这些表情符号。

<!-- 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();
   }