如何在 Blazor SignalR 中发送带有文本的表情符号

Question

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

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

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

现在，问题是当在输入中调用 Javascript 函数 SetElemetById(id) 时，按钮单击 @onclick="SendMessage" 时 MsgBody 为空，如果未调用它，那么我们在 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 变量始终为空的原因。但即使可以，您也应该首先尝试在 Blazor 中实现所有内容，如果证明不可能，请使用 JSInterop。

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

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

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

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

1. 转到Github并下载存储库代码

2. 解压...它被解压到一个名为： RealtimeChat_WebAssembly-master

3. 此文件夹包含两个文件夹：EmojiPicker 和 WSDTChat. EmojiPicker 文件夹为空。为什么 ？我没有浪费时间学习。

4. 不过，我通过从here下载代码解决了这个问题

5. 解压文件夹，然后将其内容复制到EmojiPicker 文件夹。这样做...

6. 在 Visual Studio 中打开解决方案，构建解决方案，然后执行 命令：update-database 在包管理器控制台中以创建 数据库。现在运行应用程序并对其进行测试。

7. 测试添加表情符号和照片的功能。

8. 现在，你要做的就是按照相关代码来了解这个家伙是如何 实现了表情符号的使用...复制必要的代码并将其应用于您的 聊天。

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