基于PHP實(shí)現(xiàn)一個簡單的在線聊天功能

更新時間：2021年04月19日 14:42:24 作者：Arya_1s

這篇文章主要介紹了基于PHP實(shí)現(xiàn)一個簡單的在線聊天功能，對類似功能感興趣的同學(xué)，要著重看一下

一次只能和一個人聊天,但是可以隨意切換其他人.
如果用戶是從"發(fā)送消息" 入口進(jìn)來的,那么當(dāng)前馬上就切換到對應(yīng)的聊天窗口,而且如果之前有過聊天記錄,應(yīng)該把聊天記錄也展示出來.
如果是從"我的消息" 入口進(jìn)來的,那么應(yīng)該不顯示任何聊天記錄.等待選擇聊天對象.
"我"發(fā)送的消息顯示在右邊,"對方"發(fā)送的消息顯示在左邊,也可以相反,總之要不一樣.
切換聊天的時候不能刷新整個頁面,否則體驗(yàn)很差. 發(fā)送消息也同理,所以應(yīng)該用ajax
要保證在線聊天的及時性,應(yīng)該每隔一段很短的時間,就要與服務(wù)端通信,也就是說要輪詢ajax.

前端頁面

經(jīng)過簡單的需求分析,然后又找了找其他的網(wǎng)站,對比了一下功能在界面的展示,最終確定界面. 然后花了幾個小時做好了.

成品

這是最終全部做完(包括后端) 的效果.

點(diǎn)擊左側(cè)可以切換,下方多行文本框,輸入聊天信息,然后點(diǎn)擊發(fā)送.

整個流程大概就是這樣.

數(shù)據(jù)庫

回頭來看需求, 很明顯,首先要有一張表格,存放雙方的對話,想了想決定這樣定義字段:

主要是這兩個字段:
user_id 表示消息發(fā)送的主體
chat_user 表示消息接收的主題

這樣定義的好處是,可以輕易從一條消息中輕易辨別哪個是發(fā)送方,哪個是接收方,為前端的展示做準(zhǔn)備.

但是這樣還不夠

有了這張表,就可以通過當(dāng)前登錄的session中的用戶ID, 去進(jìn)行查詢,可以得知在跟哪些人聊天. 但是這樣并不方便,而且要進(jìn)行復(fù)雜的處理.

假設(shè)有一條消息是己方發(fā)送的,那么就插入數(shù)據(jù) ‘己方' ‘對方' ‘內(nèi)容',同時可以知道當(dāng)前聊天中的一個人是'對方'.
但是假設(shè)有一條消息是對方發(fā)送的,對當(dāng)前用戶來說,數(shù)據(jù)就是 ‘對方' ‘己方' ‘內(nèi)容'.

也就是說,想要實(shí)現(xiàn)多人聊天,就要獲取當(dāng)前正在跟 ‘我' 聊天的用戶們.不論是對方發(fā)送的,還是 ‘我' 發(fā)送的,都應(yīng)該計算在內(nèi). 要對數(shù)據(jù)庫遍歷兩次,而且很多對當(dāng)前來說是重復(fù),無用的數(shù)據(jù). 在”獲取聊天對方的主體” 這一步時, 只需要知道兩個人是否有聊天關(guān)系即可,具體內(nèi)容不用關(guān)心.

所以還要一張聊天關(guān)系表. 我是這樣定義字段的:

其中user_id 和 chat_user 為雙主鍵,不能同時相等. 這樣就只記錄了聊天關(guān)系,不記錄聊天內(nèi)容,搜索起來也方便得多.
‘我' 是user_id ‘對方' 是chat_user

舉個例子第一個字段表示我與ID為9的用戶有一個聊天關(guān)系, 所以在'我'的界面上,就應(yīng)該有這個用戶. 同理第二條字段表示對方與我有聊天關(guān)系,那么在對方的界面上,就要有我這個用戶.

一般來說聊天關(guān)系是相互的, 但是也可以刪除. 刪除聊天關(guān)系并不等于刪除聊天記錄.
比如,在我的界面上,我把與9號用戶的聊天關(guān)系刪除了,那么我就看不到與9號用戶的聊天信息了, 但是對9號用戶來說,我還在他的界面上,隨時可以向我發(fā)送消息. 當(dāng)他向我發(fā)送消息時,服務(wù)端又要生成一條數(shù)據(jù) ‘我' ‘對方' ,這樣,我與對方的聊天關(guān)系又建立起來了,同時,聊天記錄一直都沒有被刪除過,所以,當(dāng)重新建立聊天關(guān)系時,可以展示出聊天記錄.

而且,刪除聊天關(guān)系后, 我也可以重新發(fā)起聊天, 再次建立聊天關(guān)系.
所以這張表建立之后提供很多方便, 上面分析的需求,展示聊天記錄,也可以很好的完成.

實(shí)現(xiàn)思路

首先,主要功能有一個控制器,兩張表,兩個模型. 至于頭像,昵稱什么的,不計算在主要功能內(nèi).

控制器MessageController 一共有五個方法.

1.showPage()

用來應(yīng)對非ajax請求,用戶通過瀏覽器訪問時,比如第一次進(jìn)入聊天界面,就是通過瀏覽器訪問的,這時候調(diào)用showPage方法,這時候,后臺只獲取聊天關(guān)系(第四個方法),展示在界面左側(cè). 其他不作處理.

2.newChat()

用來應(yīng)對非ajax請求, 比如我通過用戶個人資料頁面,點(diǎn)擊發(fā)送消息,這時候就調(diào)用這個方法. 先判斷聊天關(guān)系是否存在,如果存在就不處理,如果不存在,就插入一個聊天關(guān)系. 并且要獲取所有聊天關(guān)系(第四個方法),最新的排上面,把用戶ID轉(zhuǎn)到界面上.為后面做準(zhǔn)備.

3.getChatText()

用來應(yīng)對ajax請求. 用來獲取聊天信息.
‘我' 這個用戶來到聊天界面上后, 前端就開始進(jìn)行ajax輪詢.不停訪問getChatText()這個方法. 這時有兩種情況.

當(dāng)前正在與某個用戶聊天,js就發(fā)送一個請求到getChatText方法,參數(shù)是對方的用戶ID. 因?yàn)?我'的ID 可以從服務(wù)端session獲取到.然后通過這兩個信息去數(shù)據(jù)庫獲取聊天消息.返回json格式,js進(jìn)行數(shù)據(jù)處理,節(jié)點(diǎn)操作,等等,然后把消息展示出來.
當(dāng)前沒有正在與某個用戶聊天,那ajax暫不啟動,當(dāng)選擇了聊天對象的時候再啟動輪詢.

4.getChatTemp()

獲取當(dāng)前登錄用戶的聊天關(guān)系. 作為一個工具函數(shù),供第一個和第二個函數(shù)使用.

5.pushChat()

用來應(yīng)對ajax請求, 也就是發(fā)送消息請求. 把聊天消息插入數(shù)據(jù)庫而已.

總結(jié)

實(shí)現(xiàn)了在線聊天的基本功能,但是有缺陷, 獲取聊天消息的時候,我是無論有沒有新消息,都全部獲取到. 然后清空聊天框,再填充.
這樣的結(jié)果是, 當(dāng)聊天信息很多的時候,滾動條會有問題, 每次發(fā)送消息,滾動條都會先滾動到最上面,再滾動下來. 有個解決方案是,在聊天關(guān)系上加一個字段,存儲兩個人的消息數(shù). 獲取完數(shù)據(jù)的時候,先統(tǒng)計一下,看看是不是比原來的多了,如果多了,就只獲取多的數(shù)據(jù),然后更新消息數(shù)目. 如果沒多,那就舍棄數(shù)據(jù),不做處理.

以上就是基于PHP實(shí)現(xiàn)一個簡單的在線聊天功能的詳細(xì)內(nèi)容，更多關(guān)于PHP在線聊天的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: