PHPでオンラインチャット機能を実装

PHPベースの簡単なオンラインチャット機能の実装

ずっと欲しかったこの興味深い機能を実行した後、複雑なのはデータのやり取りやテーブル構造ではなく、フロントエンドの開発だと感じました...ということで...

要件分析

To 機能を実装するには、まずフロントエンドを構築する必要があります。他の Web サイトのオンライン チャット機能を比較した結果、基本的なチャット機能に加えて、次の点にも注意する必要があることがわかりました。

1.一次只能和一个人聊天,但是可以随意切换其他人.
2.如果用户是从"发送消息" 入口进来的,那么当前马上就切换到对应的聊天窗口,而且如果之前有过聊天记录,应该把聊天记录也展示出来.
3.如果是从"我的消息" 入口进来的,那么应该不显示任何聊天记录.等待选择聊天对象.
4."我"发送的消息显示在右边,"对方"发送的消息显示在左边,也可以相反,总之要不一样.
5.切换聊天的时候不能刷新整个页面,否则体验很差.  发送消息也同理,所以应该用ajax.
6.要保证在线聊天的及时性,应该每隔一段很短的时间,就要与服务端通信,也就是说要轮询ajax.

フロントエンドページ

簡単なニーズ分析を行った後、他のWebサイトを探し、インターフェース内の機能の表示を比較し、最終的にインターフェースを決定しました。その後、数時間かけて完成しました。

すべてが完了した後の最終結果です。

左側をクリックして切り替えます。下の複数行のテキスト ボックスにチャット メッセージを入力し、[送信] をクリックします。

全体のプロセスは大まかに次のとおりです。

データベース

要件を振り返ると、最初に 2 つの当事者間の対話を保存するテーブルが必要であることは明らかです。考えた結果、次のようにフィールドを定義することにしました。

主に次の 2 つのフィールド:

user_id は送信されたメッセージの件名を表します
chat_user は受信されたメッセージの件名を表します
この定義の利点は、ファイルから簡単に取得できることです。メッセージの送信者と受信者を識別し、フロントエンド表示の準備をします。

これだけでは十分ではありません

このテーブルを使用すると、現在のメッセージ内のユーザーを渡すことができます。ログインしたセッション ID を照会して誰とチャットしているのかを知ることができますが、これは不便であり、複雑な処理が必要です。

1. 自分のメッセージを挿入します。 「側」「相手」「内容」と同時に、現在のチャットにいる一人が「相手」であることが分かります

2. ただし、相手から送信されたメッセージがあると仮定します。 , 現在のユーザーにとって、データは「相手」「自分側」「コンテンツ」です。

つまり、多人数チャットを実現したい場合は、現在いるユーザーを取得する必要があります。 「私」とのチャットでは、相手から送信されたものであっても、「私」から送信されたものであっても、すべてが計算に含まれる必要があり、その多くは現時点では重複して役に立たないデータです。 「チャット相手の件名を取得する」ステップでは、2 人にチャット関係があるかどうかだけを知る必要があります。

そのため、チャット関係テーブルが必要です。次のようにフィールドを定義します。

User_id と chat_user は二重の主キーであり、同時に等しくすることはできません。この方法では、チャットではなくチャット関係のみが記録されます。
'私' は user_id 'other party' は chat_user

たとえば、最初のフィールドは、ID 9 のユーザーがチャットしていることを示します。同様に、2 番目のフィールドは相手が私とチャット関係を持っていることを意味するため、相手のインターフェースには私

が存在する必要があります。
一般に、チャット関係は相互関係ですが、チャット関係を削除することは、チャット履歴を削除することを意味しません。

たとえば、私のインターフェイスでは、ユーザー No. とのチャット関係を配置します。 9 チャット関係が削除されると、ユーザー No. 9 とのチャット情報を見ることができなくなりますが、ユーザー No. 9 に関しては、まだ彼のインターフェイスにいて、いつでもメッセージを送信できます。このとき、サーバーは「私」と「相手」という別のデータを生成します。これにより、私と相手とのチャット関係が再び確立されます。記録は削除されていないため、チャット関係が再確立されたときに、チャット履歴を表示できます。

また、チャット関係を削除した後、チャットを再開してチャット関係を確立することもできます。

したがって、このテーブルを作成すると、上で分析したニーズに合わせて、チャットの記録も非常にうまく完了できます。

コードは掲載しません。実装アイデア

まず、main 関数には 1 つのコントローラー、2 つのテーブル、2 つのモデルがあります。アバターについては、ニックネームなどは main 関数には含まれません。コントローラー MessageController には、非 Ajax リクエストに応答するために使用される合計 5 つのメソッドがあり、ユーザーがアクセスするとき、たとえば、チャット インターフェイスに入るときにブラウザーを渡します。初回はブラウザ経由でアクセスした場合、showPageメソッドが呼び出されます。このとき、バックグラウンドはチャット関係(4番目のメソッド)を取得するだけで、その他は取得しません。処理されました。

2.newChat(),用来应对非ajax请求, 比如我通过用户个人资料页面,点击发送消息,这时候就调用这个方法. 先判断聊天关系是否存在,如果存在就不处理,如果不存在,就插入一个聊天关系. 并且要获取所有聊天关系(第四个方法),最新的排上面,把用户ID转到界面上.为后面做准备.

3.getChatText(), 用来应对ajax请求. 用来获取聊天信息.
‘我’ 这个用户来到聊天界面上后, 前端就开始进行ajax轮询.不停访问getChatText()这个方法. 这时有两种情况.

1 当前正在与某个用户聊天,js就发送一个请求到getChatText方法,参数是对方的用户ID.  因为'我'的ID 可以从服务端session获取到.然后通过这两个信息去数据库获取聊天消息.返回json格式,js进行数据处理,节点操作,等等,然后把消息展示出来.

2.当前没有正在与某个用户聊天,那ajax暂不启动,当选择了聊天对象的时候再启动轮询.

4.getChatTemp()方法,获取当前登录用户的聊天关系. 作为一个工具函数,供第一个和第二个函数使用.

5.pushChat(),用来应对ajax请求, 也就是发送消息请求. 把聊天消息插入数据库而已.

差不多就这样.

总体实现了在线聊天的基本功能,但是有缺陷, 获取聊天消息的时候,我是无论有没有新消息,都全部获取到. 然后清空聊天框,再填充.
这样的结果是, 当聊天信息很多的时候,滚动条会有问题, 每次发送消息,滚动条都会先滚动到最上面,再滚动下来. 有个解决方案是,在聊天关系上加一个字段,存储两个人的消息数. 获取完数据的时候,先统计一下,看看是不是比原来的多了,如果多了,就只获取多的数据,然后更新消息数目. 如果没多,那就舍弃数据,不做处理.

其实一开始就是这么想的,但是不知道后面为什么又做成了全部获取.
失算啊失算.

以上.