コメントまたは記事に @ ユーザー名を追加すると、ユーザー名にユーザーのホームページ アドレスが自動的にタグ付けされます。同時に、@ ユーザーに通知を受け取ることができます。この機能はどのように実装すればよいでしょうか。
返信内容:
各コメントと記事が投稿されると、@ 以降のコンテンツ (区切り文字やその他のルールなど) が照合およびグループ化され、非同期的にメッセージ キューにプッシュされます。
このキューは、既存のユーザーが存在するかどうかを処理し、既存のユーザーにメッセージをブロードキャストします。
バックエンドのロジックはおそらく次のようになります。カテゴリの編集は処理されず、挿入ステップのみが実行されます。
ここでは、at ユーザーを検索するためのインターフェイスを抽象化し、at の背後にあるユーザーが正当であるかどうかを検出するためのインターフェイスを抽象化できます。
Web の場合は、at を見つけた後、範囲を操作して at または区切り文字に最も近い文字を選択してリクエストします。このキャラクターのキー列。現在のユーザーの友人またはサイト全体のユーザーからの「いいね」を求めるプロンプトが、カーソル位置の位置計算を加えたフローティング レイヤーとして表示されます。マウス選択後にテキストがマークされる場合があります。
このステップは主に、マークが見つかったときにバックエンドのマッチング速度を向上させることを目的としています。テキストを正規化する必要はありません。ユーザーへのマーク付き通知は、フロントエンドで解析してバックエンドに送信できます。
ここでの実装ロジックは人それぞれ異なる可能性があります。おおよその手順は上記の通りとなります。
さあ、Zhihu のやり方を一緒に勉強しましょう。
まず、回答中に誰かに話しかけるとニックネームが表示され、そのニックネームは Zhihu で繰り返すことができるため、当然のことながら、このニックネームに基づいてあなたがどの人に話しかけているかを直接判断することはできません。の。
回答の中で誰かに @ を付けてみることができます。まず、@ の後のユーザー名の部分のフォントの色が変更されていることがわかります。これは、at 部分が必要であることを示しています。特定のタグを使用して、F12 キーを押すとブラウザーのデバッグ機能が開き、以下に示すように、応答の @ 部分にある HTML コードが見つかります。 Zhihu は、@ とユーザー名を囲むタグを使用していることがわかります。赤い丸で囲まれたデータ ハッシュ属性と class="member_mention" に注目してください。クラス属性は、スタイルを変更したり、誰かがここにいることを示したり、データを示したりすることができます。 -hash 属性は非常に
です。おそらく
は、ユーザーが にいて、回答を送信した後、Zhihu サーバーは、member_mention と hash の 2 つの重要な属性に基づいて、ユーザーを正確かつ迅速に識別できます (もちろん、私は Zhihu の従業員ではありません。これは単なる個人的な推測です) Zhihu の実際の実装ではないかもしれませんが、この方法は可能です)、ユーザーを識別した後、ユーザーの名刺を表示する機能については、単純な JS と、該当するユーザーに通知を送信することができます。 cssの問題。
Baidu Tieba は誰かを @ して解析します。
Zhihu では、@ を入力してから人を選択します。これは確認されるため、解析する必要はありません。個人の ID をバックエンドに直接送信します。 これは、Baidu Tieba ID が一意であり、Zhihu ニックネームが一意ではないという事実と関係があるのかもしれません。
ユーザーが送信したコンテンツからキャプチャするための特別な解析ロジックをアプリケーション層に追加します。Zhihu のエディターでもリアルタイムに表示できることを考慮すると、この機能を公開する API がバックグラウンドで存在することになります。
@ の後の最初の有効なユーザー名を解析して、必要に応じて通知を送信します。 。 。 入力中にリアルタイムで選択を求める Zhihu を「いいね!」することもできます。
通常のマッチングの後、ユーザー名が存在するかどうかを確認します これに関するソースコードはDiscuzにあります
場合によります。 コンテンツが編集できなくなった場合、それをどのように実装しても問題はありません。 そうであれば、ビジネス要件が十分に明確ではありません。