私はいつもこの面白い機能を試してみたいと思っていました。複雑さはデータの相互作用やテーブル構造ではないと感じていますが、フロントエンドの開発が問題です...だから...
需要分析
この機能を実現するには、まずフロントエンドを実行します。他のWebサイトのオンラインチャット機能を比較すると、基本的なチャット機能に加えて、次の点に注意する必要があります。
1.一度にチャットできるのは1人だけですが、他の人は自由に切り替えることができます 。2 。ユーザーが「メッセージの送信」エントリから入ってくると、現在のチャットウィンドウがすぐに切り替わります。は以前のチャット履歴です。チャット履歴も表示されます 。3 。「マイメッセージ」エントリからの場合、チャット履歴は表示されません。チャットパートナーの選択を待機しています 。4 。「I右側に「」が表示され、「パートナー」が左側に表示され、その逆の場合もあります。つまり、 チャットを切り替えるときにページ全体を更新できないと、エクスペリエンスが低下します。同じことが言えます。メッセージを送信するために、ajaxを使用する必要があります。6。 オンラインでチャットするようにしてください。適時性、非常に短い時間ごとにサーバーと通信する必要があります。つまり、ajax.123456をポーリングする必要があります。
表紙
簡単なニーズ分析の後、他のウェブサイトを探し、インターフェースの機能表示を比較し、最終的にインターフェースを決定しました。その後、完了するまでに数時間かかりました。
完成品
これが最終結果です（バックエンドを含む）。
左をクリックして切り替え、下の複数行のテキストボックスをクリックし、チャット情報を入力して、[送信]をクリックします。
全体のプロセスはおそらくこのようなものです。
データベース
要件を振り返ると明らかです。まず、2者間の会話を保存するためのテーブルが必要です。それについて考えた後、次のようなフィールドを定義することにしました。
主に次の2つのフィールド：
user_idは送信されたメッセージ
chat_userは、受信され たメッセージの件名を表します
この定義の利点は、フロントエンド表示の準備として、メッセージからどちらが送信者でどちらが受信者であるかを簡単に区別できることです。
しかし、これは十分ではありません
このテーブルを使用すると、現在ログインしているセッションのユーザーIDでクエリを実行したり、チャット相手を確認したりできます。ただし、これは不便であり、複雑な処理が必要です。
1.自分の当事者から送信されたメッセージがあると仮定して、データ「自分の当事者」「他の当事者」「コンテンツ」を挿入すると、現在のチャットの1人が「他の当事者」であることがわかります
。ただし、相手から送信されたメッセージがあるとします。現在のユーザーの場合、データは「相手」「自分の」「コンテンツ」です。
つまり、複数人でチャットしたい場合は、現在「私」とチャットしているユーザーを取得する必要があります。相手から送信されたものか、「私」から送信されたものかをカウントする必要があります。データベース2回トラバースする必要があり、現在は繰り返して役に立たない大量のデータがあります。「チャットパートナーの本体を取得する」ステップでは、2人がチャット関係にあるかどうかを知るだけで済みます。特定のコンテンツを気にする必要はありません。
したがって、チャット関係テーブルもあります。次のようにフィールドを定義しました。
その中で、user_idとchat_userは二重主キーであり、同時に等しくすることはできません。このように、チャット関係のみが記録され、チャットコンテンツは記録されません。
検索がはるかに便利です。 「I」はuser_idおよび 'other'はchat_userです
たとえば、最初のフィールドは、ID 9のユーザーとチャット関係にあることを示しているため、「I」インターフェースにこのユーザーがいるはずです。同様に、2番目のフィールドは、相手が私とチャット関係にあることを示しています。次に、相手のインターフェイスに、私のようなユーザーがいる必要があります。
一般的に、チャット関係は相互ですが、削除することもできます。チャット関係を削除しても、チャット履歴が削除されるわけではありません。たとえば
、インターフェースでユーザー9とのチャット関係を削除したのに、表示されません。ユーザーNo.9とのチャットメッセージはですが、ユーザーNo. 9の場合、私はまだ彼のインターフェイスにいて、いつでもメッセージを送信できます。彼がメッセージを送信すると、サーバーは別のデータ「私」「パートナー」このようにして、私と相手とのチャット関係が再び確立されると同時に、チャット履歴が削除されることはないため、チャット関係が再確立されると、チャット履歴を表示できます。
さらに、チャット関係を削除した後、チャットを再開してチャット関係を再確立することもできます。
この表は、確立後に非常に便利です。 上記で分析した要件とチャットレコードの表示も完了できます。上手。
コードはリリースされません。実装のアイデアについて話しましょう
まず、メイン関数にはコントローラー、2つのテーブル、2つのモデルがありますが、アバターやニックネームなどはメイン関数には含まれていません。
コントローラMessageControllerには5つのメソッドがあります。
1.showPage（）は、ajax以外のリクエストに応答するために使用されます。ユーザーがチャットインターフェイスに初めて入るときなど、ブラウザを介してアクセスするときは、ブラウザを介してアクセスされます。このとき、showPageメソッドが呼び出されます。このとき、背景はチャット関係のみを取得し（4番目の方法）、インターフェースの左側に表示され、その他は処理されません。
2.newChat（）は、ajax以外のリクエストに応答するために使用されます。たとえば、クリックしてユーザープロファイルページからメッセージを送信すると、このメソッドが呼び出されます。まず、チャット関係が存在するかどうかを確認します。 、処理されません。存在しない場合は、チャット関係が挿入されます。そして、上記の最新の行であるすべてのチャット関係（4番目の方法）を取得するには、ユーザーIDをインターフェースに転送します。後で準備します。 。
3.getChatText（）、ajaxリクエストへの応答に使用されます。チャット情報の取得に使用されます。
ユーザー「I」がチャットインターフェイスにアクセスした後、フロントエンドはajaxポーリングの実行を開始しました。getChatText（）メソッドにアクセスし続けます。これで時間は2つの状況があります。
1現在、特定のユーザーとチャットしているjsは、getChatTextメソッドにリクエストを送信し、パラメーターは相手のユーザーIDです。サーバーセッションから「I」のIDを取得できるため、次の2つの情報を使用してデータベースからチャットメッセージを取得します。json形式に戻り、jsはデータ処理、ノード操作などを実行し、メッセージを表示します 。2 。現在ユーザーとのチャットがないため、ajaxは一時的に開始されず、ポーリングが行われます。チャットオブジェクトが選択されると開始されます。123
4.getChatTemp（）メソッドで、現在ログインしているユーザーのチャット関係を取得します。ツール関数として、1番目と2番目の関数用。
5.pushChat（）、ajaxリクエストへの応答、つまりメッセージリクエストの送信に使用されます。チャットメッセージをデータベースに挿入します。
それはほとんどそのようなものです。
全体的にオンラインチャットの基本機能は実現していますが、欠点があります。チャットメッセージを受信すると、新着メッセージの有無に関係なくすべて取得し、チャットボックスをクリアし
て再度入力します。 チャットメッセージがたくさんある場合によっては、スクロールバーに問題が発生することがあります。メッセージが送信されるたびに、スクロールバーは最初に上にスクロールし、次に下にスクロールします。1つの解決策は、チャット関係にフィールドを追加することです。 2人分のメッセージ数を保存します。データを取得した後最初にカウントして、元のメッセージよりも多いかどうかを確認します。多すぎる場合は、より多くのデータのみを取得してから、メッセージの数を更新します。それほど多くない場合は、データを破棄して何もしません。
実は最初はそう思っていたのですが、なぜ後ですべての買収をしたのかわかりません。
誤算、誤算。