HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）
群聊天室
需求如下
在聊天界面中建立websocket連接.
一個(gè)客戶端發(fā)消息, 服務(wù)端接收消息后把消息分發(fā)給所有客戶端.
客戶端接收服務(wù)端發(fā)回來的消息, 打印.(顯示在聊天記錄區(qū)域)
提示當(dāng)前在線人數(shù).
服務(wù)端中一旦接收到客戶端連接, 維護(hù)一個(gè)全局變量count, 記錄當(dāng)前在線人數(shù)(count++)
// 聲明一個(gè)全局變量count, 用于保存當(dāng)前在線人數(shù) let count = 0 socketio.on('connection', (socket)=>{console.log('有客戶端連進(jìn)來了:'+socket.id)count++// 將count的值,給所有客戶端都發(fā)一遍socketio.emit('countmsg', count)// .... })當(dāng)服務(wù)端發(fā)現(xiàn)有客戶端斷開連接就需要讓count--
// 監(jiān)聽socket連接的斷開, 一旦連接斷開, count--, 再給所有客戶端發(fā)一遍 socket.on('disconnect', ()=>{count--socketio.emit('countmsg', count) })無論count如何變化, 只要count有變化就需要將count實(shí)時(shí)發(fā)給所有客戶端.
客戶端接收服務(wù)端發(fā)過來的消息countmsg. 將人數(shù)實(shí)時(shí)顯示在頁面中.
// 監(jiān)聽服務(wù)端發(fā)給客戶端的count消息 ? 實(shí)時(shí)在線人數(shù) 更新界面 socket.on('countmsg', (data)=>{userNumber.innerHTML = data })登錄, 發(fā)消息時(shí)攜帶頭像/昵稱等參數(shù).
一對一聊天的實(shí)現(xiàn)思路
客戶端向服務(wù)端發(fā)送請求, 請求連接連接.
服務(wù)端一旦監(jiān)聽到連接的建立, 將連接對象與客戶端id綁定在一起, 存起來.
客戶端發(fā)消息時(shí)需要攜帶目標(biāo)用戶(發(fā)給誰):
{name: 'zs', to:'目標(biāo)id', avatar:'a.jpg', content:'消息' }服務(wù)端接收到消息后, 解析出目標(biāo)用戶(目標(biāo)id), 找到當(dāng)時(shí)存儲的socket對象, 調(diào)用socket.emit()單獨(dú)給它發(fā)消息即可. 發(fā)消息時(shí)注意消息內(nèi)容:
{from:'zs', content:'內(nèi)容', avatar:'a.jpg'}總結(jié)
以上是生活随笔為你收集整理的HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows server 2016磁
- 下一篇： web前端 运用CSS动画 实现图像的幻