1. 程式人生 > >nodejs之socket.io 私發消息和選擇群組發消息

nodejs之socket.io 私發消息和選擇群組發消息

cast 總結 color 之間 取出 .html true user 發送

寫在前面:其實有的時候忙碌是好的,比如忙碌起來的自己手機可以一天耗費掉只有20%的電,忙碌的自己很專心於一件事情,但是忙碌不等於過度疲勞,本周忙碌有點上腦,迷糊了一天,都在補覺,還是要去平衡下自己一天中忙碌的時數,累了就休息下,保持一個健康的身體。

今日正題:socketio實現私發消息和群組發消息(不是很困難,一搜一大片,但還是記錄下來總結)

基礎連接部分在上一篇:https://www.cnblogs.com/mfyngu/p/10780737.html

1.私發消息實現

實現思路:私發消息無非就是兩個人之間的對話,缺少不了的是我要說啥,我要發給誰,那個誰會看到消息嗎?

客戶端:先顯示當前在線的人-

//先找到當前在線的人 
socket.on(‘online‘,function(data){
   //data是一個sessionStore,包含了所有的用戶信息

//    把該對象轉換成哼數組
let users=Object.values(data.online);
document.getElementById(‘onlie‘).innerText=users.length;
//    做一個select進行在線列表進行

var html=‘‘; 
for(var key in users){
    var u=users[key];
    html+=` <option value="${u.socketid}">
        ${u.username}
        </option>
    `;
} 
})

  選擇私發給當前在線的人也就是->privateto

//私聊內容
document.getElementById("privateBtn").onclick=function(){
   
    //獲取到私聊對象  
    socket.emit(‘sendPrvate‘,{
        msg:document.getElementById("privateMsg").value,//這個是存儲要發送的消息
        //向誰發
        toid:privateto //存儲了socketid 選擇發送給某人後直接將peivateto進行賦值
    })
}

  發送的消息和事件已經傳遞到客戶端了,客戶端的樣子

io.on(‘sendPrvate‘,(context)=>{ 
    //socketid to msg 
    let {toid,msg}=context.data; //獲取發送過來的信息
    let fromSocket = context.socket.socket.id;//取出是誰發送的數據
    let {username} = findBySocketID(fromSocket);//找到要發送給人的username  :findBySocketID(fromSocket)是初始登錄時記錄每個人的sockteid和username
//xx對你私聊說: 

data={username:username,content:msg,type:‘pravate‘};
console.log(toid);
app._io.to(toid).emit(‘pravate‘,data); }) //這句話就是私發的關鍵

  其中context的結構為圖所示

技術分享圖片

服務端反應後將私發的信息推送到該用戶的聊天中客戶端只需要直接對private事件進行接收即可

//客戶端響應私發消息
socket.on(‘pravate‘,function(data){
    console.log(data);
    var ul =   document.getElementById(‘msg‘);
    ul.innerHTML+=`<li><span class="img"></span> 
    <span class="name">${data.username}</span>
    <span class="content">${data.content}</span></li>`;
}) 

實現截圖:佛系截圖(還沒有美化樣式)

技術分享圖片

2:群組消息的實現

(1)識別用戶在哪個群組 ,向哪個群組發送消息

客戶端:直接選擇加入的群組,向服務端傳遞

服務端:

io.on(‘joinGroup‘,(context)=>{
    let groupid=context.data;
    context.socket.socket.join(groupid);
    console.log(‘加入‘+groupid+‘組‘);
})

  技術分享圖片 嘻嘻,加入組成功

這樣客戶端用戶可以發送組消息:

//群聊選擇
document.getElementById(‘groupbutton‘).onclick=function(){
    var groupid= group;
    socket.emit(‘sendGroup‘,{
        msg:document.getElementById(‘groupMsg‘).value,
        togroup:groupid,
    })
}

  服務端監聽消息,並將消息推送給該組的成員

//給某個群組發消息
io.on(‘sendGroup‘,(context)=>{
    console.log(context);
    let {togroup,msg}= context.data;//發送的群組和消息
    let fromSocket=context.socket.socket.id;//找到發送人的socketid
    let {username}=findBySocketID(fromSocket);//找當前的發送人
    let data = {username:username,content:msg,type:‘group‘,grouptype:group[togroup]};
    app._io.to(togroup).emit(‘sendGroupMsg‘,data);
// 組聊信息
})

  這樣客戶端直接響應sendGroupMsg的消息就可以了,

技術分享圖片 群組發消息和私發消息已經實現

3:當前用戶在線數目統計

超級簡單,只需要每個用戶上線的時候,對群組的用戶數量+1在廣播到所有用戶那裏

io.on(‘login‘,context => {
    let id = context.data.id; 
    //存儲現有的用戶消息,存儲socketid,在list頁面加載知乎才存儲到的
    global.mySessionStore[id].socketid = context.socket.socket.id;
  //測試廣播在線上線用戶上線
  io.broadcast(‘online‘,{
      online:global.mySessionStore, //發送所有的用戶信息,這裏也是私聊的一個關鍵get
  }) 

  代碼code優化下進行github ;

git有風險 push需謹慎(此處加上一行淚~~)

 

nodejs之socket.io 私發消息和選擇群組發消息