HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）
生活随笔
收集整理的這篇文章主要介紹了
HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
群聊天室
需求如下
在聊天界面中建立websocket連接.
一個客戶端發消息, 服務端接收消息后把消息分發給所有客戶端.
客戶端接收服務端發回來的消息, 打印.(顯示在聊天記錄區域)
提示當前在線人數.
服務端中一旦接收到客戶端連接, 維護一個全局變量count, 記錄當前在線人數(count++)
// 聲明一個全局變量count, 用于保存當前在線人數 let count = 0 socketio.on('connection', (socket)=>{console.log('有客戶端連進來了:'+socket.id)count++// 將count的值,給所有客戶端都發一遍socketio.emit('countmsg', count)// .... })當服務端發現有客戶端斷開連接就需要讓count--
// 監聽socket連接的斷開, 一旦連接斷開, count--, 再給所有客戶端發一遍 socket.on('disconnect', ()=>{count--socketio.emit('countmsg', count) })無論count如何變化, 只要count有變化就需要將count實時發給所有客戶端.
客戶端接收服務端發過來的消息countmsg. 將人數實時顯示在頁面中.
// 監聽服務端發給客戶端的count消息 ? 實時在線人數 更新界面 socket.on('countmsg', (data)=>{userNumber.innerHTML = data })登錄, 發消息時攜帶頭像/昵稱等參數.
一對一聊天的實現思路
客戶端向服務端發送請求, 請求連接連接.
服務端一旦監聽到連接的建立, 將連接對象與客戶端id綁定在一起, 存起來.
客戶端發消息時需要攜帶目標用戶(發給誰):
{name: 'zs', to:'目標id', avatar:'a.jpg', content:'消息' }服務端接收到消息后, 解析出目標用戶(目標id), 找到當時存儲的socket對象, 調用socket.emit()單獨給它發消息即可. 發消息時注意消息內容:
{from:'zs', content:'內容', avatar:'a.jpg'}總結
以上是生活随笔為你收集整理的HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows server 2016磁
- 下一篇： Python - Opencv应用实例之